HTML盒子模型冷知识!!!
一.边框 1.边框颜色 border-color 边框颜色(可以设置上边框,如:border-top-color,也可以整体设置,但是要注意顺序) 2.边框粗细 border-width 边框粗细(可以设置上边框,如:border-top-width,也可以整体设置,但是要注意顺序) 2.边框样式 border-style 边框样式(可以设置上边框,如:border-top-style,也可以整体设置,但是要注意顺序) 二.外边距 1.margin 盒子距离浏览器的距离 (可以设置上外边距,如:margin-top,也可以整体设置,但是要注意顺序) 2.居中 margin: 0px auto
三.内边距 1.padding 内容到盒子的距离 (可以设置上内边距,如:padding-top,也可以整体设置,但是要注意顺序)
四.盒子模型的尺寸 尺寸默认:padding+margin+wigth+border box-sizing 方便计算盒子模型尺寸(默认为content-box,border-box代表随着内容的宽度高度变化而变化)
五.圆角 border-radius 圆角(左上,右上,右下,左下) /*如果想要一个圆,那么必须满足宽和高一致,圆角取宽度或者高度的二分之一*/ /*如果想要半圆,那么必须满足宽是高的2倍,圆角取宽度的二分之一*/ /*如果想要四分之一圆,那么必须满足宽和高相等,圆角取宽度相等值*/ 六.盒子阴影 box-shadow 默认为外阴影,内阴影为inset box-shadow: 5px -5px 20px black;
HTML盒子模型冷知识!!!的更多相关文章
- 关于js盒子模型的知识梳理
盒子模型 JS盒子模型中的13个常用属性: clientWidth/clientHeight:可视区域的宽高,宽高+PADDING组成 clientTop/clientLeft:上边框和左边框的宽度 ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- CSS学习篇核心之——盒子模型
概述 关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识. 盒子模型 元素框的最内部分是实际的内容(element),直接包围内容的是内边距 ...
- css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
- 盒子模型的overflow属性,border属性,padding与margin属性
今天要写的是CSS布局—盒子模型 首先说一下CSS的整体布局: 它包括容器(container),页眉(header),导航条(navbar),页面主要内容(main),菜单(menu),主要内容(c ...
- HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...
- CSS基础知识(颜色、伪类、盒子模型)
6.设置颜色单位 L 普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L 颜色的八进制方式 ...
- padding标准盒模型和怪异盒子模型
我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...
- CSS盒子模型与box-sizing
今天在学习的时候偶然看到一张图片: 我瞬间瞪大了眼睛:width和height竟然不包括padding和border!! 过去所学知识有问题!在我的印象里,width应该是包含padding和bord ...
随机推荐
- 【开发工具】- Idea.2018.02注册码激活
1.从下面地址下载一个jar包,名称是 JetbrainsCrack-3.1-release-enc.jar 下载地址: 链接: https://pan.baidu.com/s/1VZjklI3qh ...
- js判断数组中是否有重复元素
方法一:正则 var ary = new Array("111","ff","222","aa","222&q ...
- 常用模块 - configparse模块
一.简介 configparser模块在Python中是用来读取配置文件的,配置文件的格式跟windows下的ini配置文件相似,可以包含一个或多个节点(section),每个节可以有多个参数(键=值 ...
- jq+swiper 实现今日头条App的选项卡效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 数据分析 之 NumPy
目录 简单了解数据分析 Python数据分析三剑客(Numpy,Pandas,Matplotlib) 简单使用np.array() 使用np的routines函数创建数组 ndarray N维数组对象 ...
- dedecms更换默认编辑器为百度编辑器ueditor
由于体验过ueditor编辑器,再次使用Dedecms编辑器感觉很别扭,所以就有了更换编辑器的想法.操作顺序如下所述: 1.首先,下载ueditor包,官网http://ueditor.baidu.c ...
- Vue编程式跳转
编程式跳转 <template> <ul class = "prolist"> <!-- //产品 --> <!-- :to = &quo ...
- Joomla漏洞复现
漏洞环境及利用 Joomla 3.4.6 : https://downloads.joomla.org/it/cms/joomla3/3-4-6 PHP 版本: 5.5.38 Joomla 3.4 之 ...
- Node.js 实现 MySQL 数据库增删改查
安装mysql $ npm isntall mysql 连接数据库 需要根据实际配置修改数据库用户名.及密码及数据库名 let mysql = require('mysql'); let connec ...
- linux下svn解决冲突
1. 使用svn status + 文件路径+文件名 查看文件或目录的状态(该状态可自行进行百度),属性状态为'C'的表示,改文件或目录处于冲突状态 2. 使用svn resolve --accept ...