CSS盒模型

前言

   CSS盒模型（也被称为框模型）是网页布局的基础——每个元素被表示为一个矩形的盒子，框的内容(content)、内边距(padding)、边框(border)和外边距(margin)像洋葱的膜那样，一层包着一层构建起来。浏览器渲染网页布局时，他会算出每个盒子的内容要用什么样式，周围的洋葱层有多大，以及盒相对于其他盒放在哪里。
   元素盒的最里面是实际的内容(content)，直接包围内容的是内边距(padding)，或者叫做留白(padding)，这个说法是看到一篇文章提到的，我觉得很形象生动。就像一幅画一样，有主要的风景人物，但画卷上还有留白的地方，增加了整幅画的意境。既然内容和留白都在画卷上，那么我们可以想象得到元素盒模型的background属性自然也应用于内容(content) + 留白(padding)区域了。
   留白(padding)，边框(border)和外边距(margin)都是可选的，默认值是零。但是，不同的浏览器对于元素都有自己的默认样式。为了统一不同浏览器上的页面样式，一般将元素的margin和padding设置为0来覆盖浏览器自带样式。但是这种办法比较粗暴和粗糙，所以应运而生了，reset.css方法，解决这个问题。其实本质也就是，引入兼容不同浏览器的css代码。

盒属性

文档的每个元素被构造成文档布局内的一个矩形盒子，盒子每层的大小都可以使用一些特定的CSS属性调整。

CSS属性图解

标准盒模型和怪异盒模型

  标准盒模型很好理解，那就是业界统一遵循的一个规范化的盒模型，也被称作W3C标准模型。但是时代的发展中总会有不一样的声音，不管其发声目的是什么，他至少给了业界不一样的景色。怪异盒模型就出自老大哥——微软，顾名思义就是不标准的盒模型，也被称作IE标准模型或怪异盒模型。他们的区别就在于对于width和height的计算规则。

• 在一个标准盒模型里，盒子总宽度 = width + padding(左右) + border(左右) + margin(左右)
• 在一个IE标准盒模型里，盒子总宽度 = width + margin(左右) (即width已经包含了padding和border值)

这样就会造成一个问题，对于一个给定width的div，如果是IE盒模型，那么增加/减少padding值，div的内容区域(content)的宽度是会受到牵连影响的。
  那么如何区分是哪种盒模型呢？一般来说，除IE外，其余的浏览器都默认是W3C标准盒模型，同时css里的box-sizing属性可以显示的指明盒模型的类型。

box-sizing: content-box || border-box || inherit;

其中conten-box表示是W3C标准盒模型，border-box表示是IE标准盒模型。

width和height

   width和height设置内容盒（content box）的宽度和高度。内容盒是盒内容显示的区域——包括盒内的文本内容，以及表示嵌套子元素的其他盒。

注意：还有其它属性可以更巧妙地处理内容地大小——设置大小约束而不是绝对地大小。这些属性包括min-width、max-width、min-height和max-height。

padding

   padding表示一个CSS盒子的内边距——这一层位于内容盒的外边缘与边框的内边缘之间。padding属性接受长度值或百分比值，但不允许使用负值。其中百分数值是相对于父元素的width计算的，要是父元素的width改变，他们也会改变。该层的大小可以通过简写属性padding一次设置所有四个边，或用padding-top、padding-right、padding-bottom和padding-left属性一次设置一个边。

border

   CSS框的边框(border)是一个分隔层，位于内边距的外边缘以及外边距的内边缘之间。边界的默认大小为0——从而让他不可见。不过我们可以设置边界的宽度、样式和颜色让他出现。border简写属性可以让我们一次设置所有四个边，例如border:1px solid black; 但这个简写可以被各种普通书写的更详细的属性所覆盖：

• border-top,border-right,border-bottom,border-left:分别设置某一边的边界厚度/风格/颜色。
• border-width、border-style、border-color：分别仅设置边界的宽度/颜色/颜色，并应用到全部四边边界。
• 你也可以单独设置某一个边的三个不同属性，如border-top-width，border-top-style，border-top-color，等。
     这里有一个css技巧，那就是可以通过border画出三角形，当我们需要对话框上的三角形符号的时。

margin

外边距（margin）代表CSS周围的外部区域，称为外边距，他在布局中推开其他CSS框。其表现与padding很相似；简写属性为margin，单个属性分别为margin-top,margin-right,margin-bottom,margin-left。

注意：外边距有一个特别的行为被称作外边距塌陷（margin collapsing）：当两个框彼此接触时，他们的间距将取两个相邻外边界的最大值，而不是两者的总和。

当margin值取auto时，表示外边距的值由浏览器计算。