简介：
在20世纪90年代，许多网页布局是使用table，使用table最主要的原因是因为可以放text到一个盒子里，但是这是一个比较复杂的过程，现在可以使用比较简单的方法，那就是css。
元素盒子：
从里到外
content area < content box < padding box < border box < margin box
宽度和高度：
通常会明确定义一个元素的宽度，很少明确定义元素的高度。width和height并不能应用到inline nonreplaced elements，例如，如果你定义width和height属性到a标签，浏览器将会忽略这些声明。
下面的代码：
a:link {color: red; background: silver; height: 15px; width: 60px}
它的宽度和高度由内容来决定，而不是定义的宽度和高度。如果你添加属性display，值为inline-block或者block，width和height属性将会起作用。
（提示：如果没有min-width和max-width属性，则width的值就是宽度。如果width的值大于max-width的值，则使用max-width的值，如果width的值小于min-width的值，则使用min-width的值。min-width的值优先级最高）
(提示：width值为auto和100%的区别，auto是除去margin,border,padding的宽度，去占用父元素的宽度。而100%则完全是占用父元素的宽度，如果元素存在margin或者border或者padding，则元素会超过父元素的范围）
| width | |
| 值 | <length>|<percentage>|auto|inherit |
| 初始化值 | auto |
| 可以应用该属性的元素 | 所有的元素，除了nonreplaced inline elements, table rows, row groups |
| 继承性 | no |
| 百分比 | 是引用包含该块的元素的宽度 |
| height | |
| 值 | <length>|auto|inherit |
| 初始值 | auto |
| 可以应用该属性的元素 | 所有的元素，除了nonreplaced inline elements, table rows, row groups |
| 百分比 | 是引用包含该块的元素的高度 |
提示：height：100%声明元素将会是它父元素的高度。height：auto，说明元素的高度依赖于它子元素的高度。
提示：你可以通过使用box-sizing属性来改变width和height属性的计算范围。你可以使用content-box或者
border-box作为计算的范围，这篇文章使用默认的计算范围(box-sizing: content-box)
Padding:
在一个元素的content area之外，有一个区域叫做padding,它是在content和border之间的区域，
设置padding最简单的方法是通过属性padding.
| padding | |
| 值 | [<length>|<percentage>]{1,4}|inherit |
| 初始值 | 没有定义对于shorthand elements |
| 可以应用该属性的元素 | 所有元素 |
| 继承性 | no |
| 百分比 | 引用包含该块的元素的宽度 |
| 计算的值 | 看单个的属性(padding-top等等) |
| note | padding不能设置负值 |
如果你想所有的h2元素有1em的padding，你可以写下面的代码：
h2 {padding: 2em; background-color: silver}
Note: 一个元素的背景色默认扩展到padding区域，但是可以通过属性background-clip来改变背景区域。
默认元素并没有padding。
padding的属性值可以设置任何值，从ems到inches。设置padding的最简单方式是
设置一个值，这个值将会应用到四个边上。但是如果你想要在四个边上设置不同的值，那也是相当简单的，
h1 {padding: 10px 20px 15px 5px}
值得顺序是很重要的，遵循下面的顺序：
padding: top right bottom left（TRBL）
你也可以使用不同类型的长度值，例如：
h2 {padding: 14px 5em 0.1in 3ex;}
重复的值：
有时你输入的值可能有些重复，例如：
p {padding: 0.25em 1em 0.25em 1em}
你并不需要记录这么多个数字，你可以使用一下的代码代替
p {padding: 0.25em 1em}
这两个值足够代替四个值。
css定义下面的规则：
如果left的值没有定义，则使用right的值。
如果bottom的值没有定义，则使用top的值。
如果right的值没有定义，则使用top的值。
让我们看一个例子：你想要元素只有left padding不是0，你可以写代码：
h2 {padding: 0 0 0 3em;}
如果你想要p有一个空行，你可以写代码：
p {margin: 0; padding: 0.5em 0;}
单边的padding
如果你仅仅想要设置left padding的值，你不需要设置h2 {0 0 0 3em;}，你可以使用代码：
h2 {padding-left: 3em;}
| padding-top, padding-right, padding-bottom, padding-left | |
| 值 | <length>|<percentage>|inherit |
| 初始值 | 0 |
| 可以应用该属性的值 | 所有元素 |
| 继承性 | No |
| 百分比 | 引用包含该块的元素的宽度 |
| Note | padding不能设置负值 |
下面的两种代码实现相同的效果：
h1 {padding: 0 0 0 0.25in;}
h1 {padding-left: 0.25in;}
-----------------------------
h1 {padding: 0.25in 0 0;}
h1 {padding-top: 0.25in;}
------------------------------
h1 {padding: 0 0.25in;}
h1 {padding-right: 0.25in; padding-left: 0.25in;}
通常，只要你设置超过一个边的padding，最好你使用padding。但是从文档的显示角度来看，
它并不关心你使用哪种方式。
百分比和padding
百分比计算是根据父类元素的content area计算得来的。所以，如果父类元素的
宽度改变，则他们也会改变。例如下面的例子：
p {padding: 10%; background-color: silver;}
<div style="width: 600px">
<p>
this paragragh is contained within a div that has a width of 600 pixels,
so its padding will be 10% of the width of the paragraph's parent element.
Given the declared width of 600 pixels, the padding will be 60 pixels on all
sides
</p>
</div>
<div style="width: 300px;">
<p>
This paragraph is contained width a DIV with a width of 300 pixels,
so its padding will still be 10% of the width of the paragraph's parent.
There will, therefore, be half as much padding on this paragraph as that
on the first paragraph
</p>
</div>
考虑一下，如果你没有声明width，元素的总体宽度（包括padding）依赖于父元素的宽度。
百分比的值是相对于父元素的宽度来说的，它应用到top, bottom padding，还有left, right padding。
div p {padding-top: 10%;}
<div style="width: 500px;">
<p>
This is a paragragh, and its top margin is 10% the width of its parent element
</p>
</div>
你可以混合使用百分比值和长度值，例如：
h2 {padding: 0.5em 10%;}
Padding and Inline Elements
到目前为止，现在的讨论是针对block boxes的元素。当padding应用到inline
nonreplaced elements时，可能会有些不同。
例如：如果你设置top和bottom padding为strong元素。
strong {padding-top: 25px; padding-bottom: 50px;}
这种设置在文档中是允许的，但是如果你应用这种设置到inline nonreplaced element，它将不会影响到行高。当没有可见的背景，因为padding是透明的，先前的声明将没有
任何视觉效果。在inline nonreplaced elements中的padding并不会改变行高。当然，伴有background color和padding的inline nonreplaced element会有背景色
在元素的上面和下面，例如：
strong {padding-top: 0.5em; background-color: silver;}
demo
行高并不会改变，但是由于背景色会扩展到padding。行的背景色会重叠到它之前的行。
上面说的行为仅仅是针对inline nonreplaced elements的top和bottom边。left和right边会有一些不同，
如果你为inline nonreplaced element设置left或者right padding，他们将会可见的。
strong {padding-left: 25px; background: silver;}
如果一个inline nonreplaced element跨行，情形可能有点不同。例如：
strong {padding: 0 25px; background: silver;}
left padding应用到元素的开始，right padding应用到元素的结尾。默认情况下，padding并不会应用到每一行的left和right边。
你可以修改跨行的行为，通过使用box-decoration-break。
Padding和Replaced Elements
你可以应用padding到replaced element上，例如：你可以应用padding到image元素上，
img {background: silver; padding: 1em;}
不管replaced element是block-level或者inline，padding将会围绕content，背景色将会填充到
padding，你也将会看到padding将content和border分离开。
在inline nonreplaced elements中的padding并不会影响行高，但是在replaced
elements的padding中会影响行高。