CSS盒子模型；

盒子是由边框，内边距，外边距，内容四部分组成；

1.边框：border；边框宽度、边框样式、边框颜色

写法：
border-widhth：1px；border-style:solid; border-color:blue;
综合写法：border:1px solid blue;
单个写法：

  1. border-top：1px solid red；
  2. border-bottom： 1px solid blue；
  3. border-left：1px solid red；
  4. border-right：1px solid red；
    表格相邻边框合并：border-collapse：collapse；

边框会影响盒子实际大小：
边框会额外增加盒子的实际大小。因此我们有两种解决方案；
1.测量盒子大写的时候，不量边框；
2.如果测量的时候包含了边框，则需要width/height 减去边框宽度；

2.内边距：padding；

内边距是内容与边框之间的距离；
写法1：

  1. padding-right:10px;
  2. padding-left:10px;
  3. padding-top:10px;
  4. padding-bottom:10px;
    复合写法：

1.只给了一个值的时候：
padding:5px; 表示的意思：1个值，代表上下左右都有5像素内边距；

2.给了两个值的时候；
padding：5px 10px； 表示的意思：2个值，代表上下内边距是5像素，左右内边距是10像素；

3.给了三个值的时候；
padding: 5px 10px 20px; 表示的意思： 3个值，代表上内边距是5像素，左右内边距是10像素 下内边距是20像素；

4.给了四个值的时候；
padding：5px 10px 20px 30px； 表示的意思： 4个值，上是5像素，右是10像素，下是20像素，左是30像素；顺时针来排序的，

padding会影响盒子实际大小；
当我们给盒子指定了padding值之后，发生了两件事情：
1.内容和边框有了距离，添加了内边距；
2.padding影响了盒子实际大小；
也就是说，如果盒子已经有了宽度和高度，此时在指定内边距，会撑大盒子。
解决方案：

1.如果保证盒子跟效果图大小保持一致，则让width/height 减去多出来的内边距大小即可；

2.添加box-sizing:border-box;

3.外边距：margin；

​ 盒子与盒子之间的距离；
​ 写法：

  • margin-right：10px；
  • margin-left：10px；
  • margin-top：10px；
  • margin-bottom：10px；
    复合写法则跟padding一模一样；

外边距典型应用：外边距可以让块级盒子水平居中，但必须满足两个条件；
1.盒子必须指定了宽度（width）
2.盒子左右的外边距都设置为auto。
例如：.header{ width:960px; margin:0 auto;}
常见的写法，以下三种都可以：

  • margin-left：auto；margin-right：auto；
  • margin：auto；
  • margin：0 auto；

让行内元素或者行内块元素水平居中
如果遇到行内元素或者行内块元素我也想让他水平居中呢？
行内元素和行内块元素只要给它们的父级元素添加text-align：center；即可

外边距合并

使用margin定义块级元素的垂直外边距时，可能会出现外边距合并。

1.相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时。如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案：尽量只给一个盒子添加margin值。

2.嵌套块元素垂直外边距的塌陷

使用margin定义块元素的垂直外边距时，可能会 出现外边距合并。

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

解决方案：

1.可以为父元素定义上边框。

2.可以为父元素定义上内边距。

3.可以为父元素添加overflow：hidden。

还有其他方法，比如浮动。固定。绝对定位的盒子不会有塌陷问题。原因还没学。

额外提一下清除内外边距；

比如:*{margin:0;padding:0;}