盒模型
说盒模型之前先看代码：
<head>
<style type="text/css">
.c{
height: 100px;
width: 100px;
border: solid 50px gray;
padding: 50px;
margin: 50px;
color: red;
}
</style>
</head>
<body>
<div class="c">
盒模型
</div>
</body>
代码显示效果：
对于浏览器而言，任何标签都是里面装着东西（内容）的盒子，比如文本、图片等标签。
（1）上图中整个天蓝色区域就是内容，“盒模型”三个字就是内容的一部分。
图中的橙色线条量取的就是内容的宽高，height是指内容的高度，width是指内容的宽度。
内容的周围通常环绕着装饰盒子的不同属性。如padding、border、margin等。
（2）图中的绿色线条量取的就是padding的宽度，padding是指内容与边框线之间隔开的那部分空间。图中天蓝色和灰色之间的白色区域就是padding。
（3）图中的红色线条量取的就是border的宽度，border是指盒子周边的直线，可以4个边都有一条边框线也可任意几边。图中灰色区域就是border。
（4）图中的蓝色线条量取的就是margin的宽度，margin是指一个标签和另一个标签的间隔。图中灰色区域以外，宽度50px的白色区域就是margin。
宽高
内容的宽高
宽度：width
高度：height
注意width和height属性仅仅设置了内容的宽高，即图中的天蓝色区域宽高，不含padding和border。
元素占据浏览器视图的宽高
图中元素占据浏览器的屏幕空间宽高，宽度：width+左右padding+左右margin，高度：height+上下padding+上下margin。
尽量不要指定元素宽高
尽量不要使用height属性，除非准确知道该元素的高度，如图片元素。对于文本等元素不要使用height属性，尽管当前可能没有文本溢出，但调节浏览器尺寸、放大字号后文本就可能溢出。
宽高使用百分比
设置元素的height、width值为百分比形式，则元素的高度、宽度是以其父元素的高度、宽度的百分比计算的。
如某个div宽度为200px，内部有一个子元素div，子元素div宽度设置width:75%，则子元素的宽度是200*（75%）=150px。