盒模型
每个元素都看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这4个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。
内容区
内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的三部分都是可选的。
内容区有三个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点，width和height这两个属性是针对内容区而言，并不包括padding部分。当内容信息太多，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。
width、height不是盒子总宽高,盒子的总宽度 = width + 左右padding + 左右border,盒子的总高度 = height + 上下padding + 上下border.
width属性
width属性表示盒子内容的宽度
width属性的单位通常是px，移动端开发也会涉及百分数、rem等单位
当块级元素（div、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width可以继承
height属性
height属性表示盒子内容的高度
height属性的单位通常是px，移动端开发也会涉及百分数、rem等单位
盒子的height属性如果不设置，它将自动被其内容撑开，如果没有内容，则height默认是0
内边距
内边距，指的是内容区和边框之间的空间，可以看做是内容区的背景区域。
关于内边距的属性有5种，即padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简洁内边距属性padding。使用这5种属性可以指定内容区域各方向边框之间的距离。
四个方向的padding，可以分别用小属性进行设置
| 小属性 | 意义 |
|---|---|
| padding-top | 上padding |
| padding-right | 右padding |
| padding-bottom | 下padding |
| padding-left | 左padding |
padding的四数值写法
padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding
padding的三数值写法
padding属性如果用三个数值以空格隔开进行设置，分别表示上、左右、下的padding
padding的二数值写法
padding属性如果用二个数值以空格隔开进行设置，分别表示上下、左右的padding
边框
在CSS盒子模型中，边框属性有border-width、border-style、border-color以及综合了三类属性的快捷边框属性border。
其中border-width指定边框的宽度，border-style指定边框类型，border-color指定边框的颜色。“border-width:1px;border-style:solid;border-color:gray;”等价于“border:1px solid gray;”。
外边距
外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。
margin也有四个方向
| 小属性 | 意义 |
|---|---|
| margin-top | 上margin，“向上踹” |
| margin-right | 右margin，“向右踹” |
| margin-bottom | 下margin，“向下踹” |
| margin-left | 左margin，“向左踹” |
margin的塌陷
竖直方向的margin有塌陷现象：小的margin会塌陷到大的 margin中，从而margin不叠加，只以大值为准
一些元素（比如body、ul、p等）都有默认的margin，在开始制作网页的时候，要将他们清除
盒子的水平居中
将盒子左右两边的margin都设置为auto，盒子将水平居中
.box {margin: 0 auto;文本居中是text-align: center; 和盒子水平居中是两个概念
盒子的垂直居中，需要使用绝对定位技术实现
margin写法有三种
“margin:20px;”表示4个方向的外边距都是20px；
“margin:20px 40px;”表示margin-top和margin-bottom为20px，margin-right和margin-left为40px。
“margin:20px 40px 60px 80px;”表示margin-top为20px，margin-right为40px，margin-bottom为60px，margin-left为80px。
box-sizing属性
将盒子添加了box-sizing: border-box; 之后，盒子的width 、height数字就表示盒子实际占有的宽高（不含margin）了，即padding、border变为“内缩”的，不再外扩
box-sizing属性大量应用于移动网页制作中，因为它结合百分比布局、弹性布局等非常好用，在PC页面开发中使用较少
box-sizing属性兼容到IE9
.box {
box-sizing: border-box;
width: 200px;
height: 200px;
border: 10px solid #000;
padding: 10px;
}行内元素和块级元素
| display属性类型 | 是否能并排显示 | 是否能设置宽高 | 当不设置width属性时 | 举例 |
|---|---|---|---|---|
| 块级元素 | 否 | 是 | width自动撑满 | div、section、header、 h系列、li、ul等 |
| 行内元素 | 是 | 否 | width自动收缩 | a、span、em、b、u、i 等 |
行内块
img和表单元素是特殊的行内块，它们既能够设置宽度高度，也能够并排显示
行内元素和块级元素的相互转换
使用display:block;即可将元素转为块级元素
使用display:inline;即可将元素转为行内元素，将元素转为行内元素的应用不多见
使用display:inline-block;即可将元素转为行内块
元素的隐藏
使用display: none;可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样
使用visibility: hidden;可以也可以将元素隐藏，但是元素不放弃自己的位置