CSS盒模型

盒模型

所有HTML标签均可视为盒子（矩形），具有四个基本属性，

width（实际上指的是content部分的宽度）

height（同上，content部分的高度）

padding（内边距）

border
 

盒子的总宽度=width+padding左+padding右+border左+border右

总高度同理

常见浏览器开发者模式下也可以捕获网页对应盒模型示意图

示意图如下图

CSS 盒子模型 | 菜鸟教程 (runoob.com)

padding

盒子的内边距，具有四个方向，对应四个属性，单位为px，值为0时可以不带单位

padding-top

padding-right

padding-bottom

padding-left

也可以一次性设置，按上右下左顺序对应,空格隔开

例如:

pading:10px 20px 30px 40px;

等价于

padding-top:10px;

padding-right:20px;

padding-bottom:30px;

padding-left:40px;

 也可以只写三个数值，那么对应上、左右、下，只写两个数值，上下、左右，只写一个数值，代表上下左右

技巧：利用css小属性层叠大属性

margin

盒子的外边距（盒子与其他盒子的距离）

也有四个方向，

margin-top

margin-right

margin-bottom

margin-left

塌陷

竖直方向margin小数值会塌陷到大数值，不叠加，如下图，实际margin只有40px

左右方向没有这种现象

默认值

部分元素具有默认的margin(padding同)，为了避免影响，如有必要，可以在使用如下语句清除，*表示通配符选择器，表示选择页面所有元素

*{
    margin:0;
    padding:0;
}

考虑到效率，可以选择并集选择器，清楚常见元素的默认margin

body,ul,p{
    margin:0;
    padding:0;
}

水平居中

使用aoto实现水平居中

.box{
    margin:0 auto;
}

box-sizing

box-sizing:border-box;

添加后，盒子的width、height将变为实际宽高，常用于移动网页制作，兼容到ie9

display

块级元素：如div、section、header、h、li、ui，无法并排，默认撑满width

行内元素：如a、span、em、b、u、i，无法设置宽高，默认宽度自动收缩，margin失效

行内块：如img、表单，可以并排，也可以设置宽高

转换

display:block;  转换为块级元素

display:inline;  转换为行内元素

display:inline-block;   转换为行内块

隐藏

display:none;  隐藏元素

visibility:hidden;  隐藏，但是仍然占据位置