盒子模型

页面布局主要学习三大核心：盒子模型、浮动、定位
1.看透网页布局的本质：利用css摆盒子
网页布局过程：

2.盒子模型的组成

css盒子模型本质是一个盒子，封装周围的html元素，包括：边框、外边距、内边距和实际内容

3.边框
border可以设置元素的边框，边框有3部分组成：边框宽度（粗细）、边框样式、边框颜色

border： border-width||border-style||border-color;

边框的复合写法(即简写）：

border：1px soloid pink;

边框的分开写法：

border-top:1px soloid pink;

4.表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框
语法格式：

border-collapse: collapse;

• collapse是合并的意思 border-collapse: collapse；
• 表示相邻边框合并在一起

5.边框会影响盒子实际大小

• 测量盒子大小的时候不量边框
• 如果测量的时候包含了边框，则需要width/height减去边框宽度

6.内边距

1）padding复合属性

2）padding注意点

• 内容和边框有了距离，添加了内边距
• padding影响盒子实际大小，则会撑大盒子
• 解决方案：用width/height减去padding

3）padding不会影响盒子大小的情况

7.外边距（margin)
1）相邻块元素垂直外边距的合并
margin属性用于设置外边距，即控制盒子和盒子之间的距离
margin-left/right/top/bottom 即左/右/上/下外边距
maigin简写方式与padding完全一致
外边距可以让块级盒子水平居中的条件：

• 盒子必须指定了宽度
• 盒子外边距都设置为auto

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

2）嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案：

• 为父元素定义上边框
• 为父元素定义上内边距
• 为父元素添加over-flow:hidden;
  
  

8.清除内外边距
网页元素带有很多默认的内外边距，不同浏览器默认也不一致
语法格式：

* {
     margin：0；
     padding:0;
  }

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