CSS之盒模型

怎么理解盒子模型？

盒子模型是样式表（css）控制页面的很重要的概念。如果理解了盒子模型和其中每个元素的用法，才能熟练使用css的定位方法和技巧。所有的页面的元素都可以看成是一个盒子，占据一定的页面空间。占据的空间要比实际使用的空间要大得多。我们可以调整盒子的边框和距离，来调整盒子（页面和页面中的元素）的位置。

盒子模型是由内容（content）、边框（border）、内边距（padding）、外边距（margin）组成

他们的关系如下图所示：

content

content是盒子主要装内容的地方。即元素、文档流、嵌套盒子，盒模型主要组成部分之一。

border

border是元素的外围，即元素的边，盒模型主要组成部分之一。

计算元素的宽和高要把border加上特别是特殊网站页面

border有三个主要属性，color（颜色）、width（粗细）和style（样式）。

color主要是指定border的颜色，一共有256的3次方种颜色供我们选择。通常是16进制的值，比如红色是“#FF0000”。
width是border粗细程度，可以设置为thin、thick和length，length为具体数值，比如说border:1px #CCC solid;其中1px指的是border的width，默认值是medium，一般浏览器解析为2像素。
style属性可以设为none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等，其中none和hodden是不显示border，hidden可以用来解决边框的冲突问题。对于groove、inset、outset、rigde、border-style，IE会出现兼容问题，使用时一定要注意。

padding

padding用于控制content与border之间的距离，即内边距，盒模型主要组成部分之一。