盒子模型（重点）

1. 网页布局三大核心：盒子模型、浮动、定位

2. 网页布局过程：

（1）准备好相关网页元素，这些基本都是盒子

（2）利用CSS设置盒子样式，再摆放到相应位置

（3）往盒子装内容

3. 盒子模型组成：边框（border）、内边距（padding）、外边距（margin）、实践内容（content）

4. 边框（border）

（1）border-width：边框粗细，单位px

（2）border-style：边框的样式(solid实线、dashed虚线、dotted点线

（3）border-color：边框颜色

（4）边框的复合写法：简写：border: 1px solid red;无顺序

（5）边框允许指定一个元素边框的样式和颜色：border-top: 1px solid red;

（6）表格的细线边框：border-collapse: collapse;表示相邻边框合并在一起

（7）边框会影响盒子实践大小：

①测盒子大小时可以不量边框

②测量时包含边框，则需width/height减去边框宽度

（8）内边距：padding：盒子与内容之间距离

①padding-left

②padding-right

③padding-top

④padding-bottom

⑤简写：padding: 5px; 1个值代表上下左右都有5px内边距；2个值代表第一个表上下边距，第二个表左右边距；3个值表示上内边距、左右内边距、下内边距；4个值表示上右下左，顺时针

⑥padding也会影响盒子大小：如果盒子有高、宽，内边距会撑大盒子，所以想要的盒子大小-内边距=实际盒子大小

⑦若盒子没有指定width/height属性。此时padding不会撑开盒子大小

（9）外边距margin：盒子与盒子之间距离（简写方式与padding一样）

①margin-left

②margin-right

③margin-top

④margin-bottom

⑤它可以使块级盒子水平居中，但必须满足：盒子指定了宽度，盒子左右外边距设置为auto

三种写法：margin-left: auto;margin-right: auto;

margin: auto;

margin: 0 auto;

注：行内元素或行内块元素水平居中给其父元素添加text-align:center即可

⑥外边距合并：定义块元素的垂直外边距时，可能出现，有以下两种情况：

a 相邻块元素垂直外边距的合并：上有下外边距，下有上外边距，它们之间垂直距离取两个值中较大的

b嵌套块元素垂直外边距的塌陷：父元素与子元素同时有上外边距，此时父元素会塌陷较大外边距。

解决方案：为父元素定义上边框。为父元素定义上内边距。为父元素添加overflow:hidden（这种不会出现影响盒子大小）。

（9）清除内外边距：很多网页元素带有默认内外边距

*{ (通配符选择器）

padding: 0;

margin: 0;

}

注：行内元素为了照顾兼容性，尽量只设置左右内外边距，但是转换为块级元素和行内块元素就可以了。

注：去掉li前面的项目符号小圆点：list-style-type: none;