盒子模型

盒子模型

css 盒子模型 (Box Model) 规定了元素处理元素内容、内边距、边框和外边距的方式，在 css 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框不会影响内容区域的尺寸，但是会增加 “盒子” 的实际尺寸，故标准盒子模型中 “盒子” 尺寸的计算公式为：
盒子实际尺寸 = 内容尺寸 + 内边距 + 边框宽度。

标签默认样式：

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式：可以分别进行，也可以使用通配符选择器对所有元素进行设置：

* {
    margin: 0;
    padding: 0;
}

padding内边距

css padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值，exp：h1 {padding: 10px;}
还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值，exp：h1 {padding: 10px 0.25em 2ex 20%;}
也通过使用 padding-top、padding-right、padding-bottom、padding-left 单独的属性，分别设置上、右、下、左内边距。
值复制：
通过值复制语法，可以不必重复地设置值，其规则如下：
• 如果缺少左内边距的值，则使用右内边距的值。
• 如果缺少下内边距的值，则使用上内边距的值。
exp：

p { padding: 0.5em 1em 0.5em 1em; }/*等同于*/p { padding: 0.5em 1em; }

内边距的百分比数值：
可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。
exp 把段落的内边距设置为父元素 width 的 10%：p {padding: 10%;}
注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

border 边框

css border 属性允许规定元素边框的样式、宽度和颜色，元素的边框就是围绕元素内容和内边据的一条或多条线：

border-style

样式是边框最重要的一个方面，如果希望边框出现，就必须声明一个边框样式。css 的 border-style 属性定义了 10 种边框样式，包括：solid、dashed、dotted、outset、none …，exp：
p { border-style: solid; }。
可以为一个边框定义多个样式，按照 “上、右、下、左” 的顺序执行，exp：
p { border-style: solid dotted dashed double; }。
如果希望为元素的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用 border-top-style、border-right-style、border-bottom-style、border-left-style 单边边框样式属性。

border-width

可以通过 border-width 属性为边框指定宽度，可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick，exp：

p {border-style: solid; border-width: 5px;}

同样可以按照 “上、右、下、左” 的顺序设置元素的各边边框宽度，exp：
p {border-style: solid; border-width: 15px 5px 15px 5px;}。
如果希望为元素的某一个边设置边框宽度，而不是设置所有 4 个边的边框宽度，可以使用 border-top-width、border-right-width、border-bottom-width、border-left-width 单边边框宽度属性。

border-color

css 使用 border-color 属性设置边框颜色。
【exp】：
p {border-style: solid; border-color: red;}。
同样可以按照 “上、右、下、左” 的顺序设置元素的各边边框颜色。
【exp】：
p {border-style: solid; border-color: red green blue transparent;}。
如果希望为元素的某一个边设置边框颜色，而不是设置所有 4 个边的边框颜色，可以使用 border-top-color、border-right-color、border-bottom-color、border-left-color 单边边框颜色属性。
当未设置 border-color 时，边框颜色会继承元素的 color 样式。因此对于 p {border-style: solid; color: red;} 最终会呈现红色描边。
边框与背景的层叠关系：
css 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是 “间断的”（例如，点线边框或虚线框），元素的背景会出现在边框的可见部分之间。

margin 外边距

设置外边距的方法就是使用 margin 属性，设置方式同内边距设置【link：padding 内边距】几乎相同，除了常规值，该属性还接受 “负值” 和 “auto”。常见的做法是为外边距设置长度值。
exp 在 h1 元素的各个方向设置 50 像素外边距：

h1 { margin : 50px; }

同 border、padding 一样，外边距也可以分别定义 4 个方向的外边距值：

h1 { margin : 10px 0px 15px 5px; }/*等同于*/h1{
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 15px;
    margin-left: 5px;

外边距的百分比数值：
可以为 margin 设置一个百分比数值：p {margin : 10%;}，百分数是相对于父元素的 width 计算的（同内边距计算方式相同），该例为 p 元素设置的外边距是其父元素宽度的 10%。

使用小技巧：水平居中块儿级元素

对指定宽度的块儿级元素可以通过 margin 设置： margin: 任意值 auto;，进行水平居中，exp：

p { 
    width: 300px;
    background-color: orange;
    margin : 0 auto; 
}

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者：

当一个元素包含在另一个元素中时，它们的上 / 下外边距也会发生合并：

外边距甚至可以与自身发生合并，假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并，这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距：

注：只有普通文档流中块儿级元素的垂直外边距才会发生外边距合并。

怪异盒子模型

大多数浏览器都会遵循标准盒子模型来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。但对于 IE5.X 和 6 会使用自己的非标准盒子模型，即 “怪异模式”。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和，因此在 “怪异” 盒子模型中 “盒子” 尺寸的计算公式为：
盒子实际尺寸 = 内容尺寸。
虽说是 “怪异” 盒子模型，然而在目前的实际开发中，该模式已经成为主流的盒子模型，诸多前端 UI 框架都会初始化对所有元素采用该盒子模型，可以通过 box-sizing 样式属性设置，需要注意的是该样式存在浏览器兼容性问题，使用时需要添加浏览器内核前缀：
/对所有元素采用 “怪异” 盒子模型/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

“怪异” 盒子模型使用优势：

“怪异” 盒子模型对于百分比宽度布局是有明显便捷性的，布局时无需再去额外计算元素的内边距及边框，exp：

<style>
    li {
        width: 25%;
        border: 1px solid lightblue;
        text-align: center;
    }</style>
    <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    </ul>