对css中盒子模型的理解

盒子的基本属性

html文档中的每一个元素在页面布局中都会被呈现为一个盒子模型，如下图所示：

width和height属性用来设置内容区域的宽和高，height属性在默认情况下和内容框的高度相同，也就是随内容多少的变化而变化。
padding为盒子模型的内边距宽度，也就是内容到边界（border）直接的距离。
border属性是用于设置边界的宽度（border-width），样式（border-style），颜色（border-color），但是在定义宽度的时候会忽略以百分比作为单位的情况

margin属性设置了盒子外部区域的宽度，这个属性推开了页面布局中其他的盒子。margin属性的值可以为负，表示这个元素的边界会向内凹，如果margin的值为正值，那么表示这个块级元素的边界向上下左右某个方向拉伸。

margin为正值的情况下的两个box

margin为负值的情况下两个box位置的变化

可以看出当把margin设置成负值后，box2的位置向上和向左发现5px的移动，是因为margin不再包裹在border外面，而是向内凹陷，根据外边距合并的原则，合并后的外边距为0，所以两个box的上下边距之间没有距离。
注意： 如果使用百分比设置内外边距，例如设置margin：5%，这个5%是以当前元素的父元素为基准来计算的。

margin的外边距合并（margin collapsing）

margin属性有一个特别的行为，就是外边距合并，这个行为只对普通文档流中的块级元素的垂直外边距有效，行内框（inline-block），浮动元素和绝对定位的原素不会发生外边距合并。
发生外边距合并的三种基本情况：
1.两个或多个垂直毗邻的兄弟元素，上面元素的下边距会与下面元素的上边距发生合并，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

　　　　　　　　　　　　 (图片引用自w3cschool)

2.父元素和子元素之间，具体可分为两种情况：

• 父元素的上外边距和第一个子元素的上外边距
• 父元素的下外边距和最后一个子元素的下外边距
  发生这两种情况的前提是父元素和第一个（或最后一个）子元素之间不存在边框和内边距把外边距分隔开，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
  
  　　　　　　　　　　　 (图片引用自w3cschool)

3.空元素，如果一个块级元素中不包含任何内容，并且在其 margin-top 与 margin-bottom 之间没有边框、内边距，这种情况下这个元素自身的上下边距会发生合并。

　　　　　　　　　　　　　 (图片引用自w3cschool)
注意：

• 即使某一外边距为0，这些规则仍然适用。因此就算父元素的外边距是0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。
• 如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和。
• 如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。

box-sizing属性

在默认情况下，width属性设置的是元素内容的宽度，而任何一个被绘制到屏幕上的元素的盒子宽度和高度都需要加上border和padding的值，所以当你调整一个元素宽度和高度的时候都需要考虑到border和padding的值，box-sizing可以用来调整这个问题：

• content-box：默认值，在这种情况下设置width为100px时，元素被绘制到屏幕上的总宽度=100px+padding-left+padding-right+border-left+border-right
• border-box：在这种情况下设置width为100px时，元素被绘制到屏幕上的总宽度=100px

　　　　　　　

background-clip属性

当我们给一个元素设置background-color和background-imge时，这个背景会覆盖到元素border的外边界，background-clip属性可以用来调整背景所覆盖的区域，一共有四个值：
border-box:背景延伸到边框外，默认值
padding-box：背景延伸到内边距外，但是不会绘制到border。
content-box：背景被裁剪至内容区（content box）外沿。
text ：背景被裁剪成文字的背景色。

使用text时要注意字体颜色需要设置成透明和浏览器兼容问题。