盒子模型基础

1.1 看透网页本质

网页布局过程：

1. 准备网页元素，网页元素基本都是盒子 box
2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。
3. 往盒子里放东西。

本质：利用 CSS 摆盒子

1.2 盒子模型（Box Model）组成

1.3 边框（border）

border 可以设置元素边框。边框有三个组成：`border-width`、`border-style`、`border-color`

属性可连写： border: border-width || border-style || border-color;

• border-collapse:collapse; 表示将相邻边框合并在一起

1.4.边框会影响实际大小

解决办法

（1）测量盒子的时候不测边框    （2）用width/height-边框宽度*2

1.5.内边距 （padding）

padding 属性设置内边距，即边框与内容之间的距离。

padding 属性简写

• 1 个值：上下左右（四面全部）
• 2 个值：上下，左右
• 3 个值：上，左右，下
• 4 个值：上，右，下，左 （按照顺时针）

注意

当盒子已经有了宽度和高度，再指定内边距，会撑大盒子

解决办法：用width/height-多出来的内边距

1.6 外边距（margin）

• margin-left: 左外边距
• margin-right: 右外边距
• margin-top: 上外边距
• margin-bottotm: 下外边距

margin 简写方式与 padding 一致。

1.7.外边距--水平居中

（1）盒子必须指定宽度（width）

（2）盒子左右的外边距都设置为auto

1.8。垂直外边距的塌陷

对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案

（1）为父元素定义上边框

（2）为父元素定义上内边距

（3）为父元素添加 overflow:hidden

1.9.清除内边距

* {

margin: 0;

padding: 0;

}