盒子模型

导读“网页布局要学习三大核心，盒子模型、浮动、定位、学号盒子模型非常有助于我们布局页面
网页布局的步骤：

1. 先准备好相关的网页元素，网页元素基本都是盒子box
2. 利用css设置好盒子样式，然后摆放到相应的位置
3. 往盒子里装内容

css本质就是一个盒子，封装周围的HTML元素，它包括：边框，外边距。内边距，和实际内容

1.边框（border）

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

border：border-width|boder-style|border-color
边框简写：boder：1px solid red （无顺序）
边框分开写：boder-top|left|right|bottom（上边框） 1px solid red
                      
                              

属性	属性值
style	solid（实线）dashed（虚线）dotted（点线）

表格细线边框

border-collapse：collapse：会把相邻的边框和并到一起
注意：边框会影响盒子的实际大小，

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

内边距

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

padding：-left|  - right | -top |-bottom
复合性写法：padding ：（一个值：上下左右）
（两个值：上下，左右）
（三个值：上，左右，下）
（四个值：上，右，下，左）

不会撑开盒子的大小：不给盒子指定大小不会撑开盒子的大小

盒子模型的外边距

margin属性设置外边距，即控制盒子和盒子之间的距离
（简写方式和padding一样）
外边距的典型应用：
外边距可以让块级盒子水平居中，但是必须满足两个条件：

1. 盒子必须指定了宽度
2. 盒子左右的外边距都设置为：auto。

.header {width:960px;margin:0 auto;}

常见的写法，以下三种都可以：
margin-left：auto； margin-right：auto；
margin：auto；
margin：0 auto；（上下位0，auto自动）
注意
以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align：center即可

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
.嵌套块元素垂直外边距的塌陷（外边距合并）
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会 塌陷较大的外边距值
解决方案：

1. 可以为父元素定义上边框
2. 可以为父元素定义内边距
3. 可以为父元素添加overflow：hidden
   还 有其他方法，比如浮动、固定。绝对定位的盒子不会有塌陷问题，

清除内外边距

网页元素一般都自带一些内外边距，并且每个浏览器默认的内外边距不一样，因此在布局前首先要清楚掉网页元素的内外边距

*{
    padding：0；（清除内边距）
    margin：0；（清除外边距）
}

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