CSS盒模型

每个CSS盒子有四个区域：内容（content）、填充（内边距，padding）、边框（border）、边界（外边距，margin)。

内容区域有三大属性：宽度（width）、高度（height）、背景（background）。

填充、边框、边界区域包含上、右、下、左部分。

其中边框包含三大子属性：border-style（边框样式）、border-color（边框颜色）、border-width（边框宽度）。

1.定义边界

元素的边界由CSS的margin属性控制。派生出四个子属性：margin-top,margin-right,margin-bottom,margin-left。

1.边界定义了元素与相邻元素的距离。

2.如果四边边界相同，margin设置一个值就行。

3.如果四边边界不相同，则margin定义四个值，四个值用空格进行分隔。顺序为top,right,bottom,left。如果某个边没有定义大小，则可以使用auto（自动）关键字进行代替，但是必须设置一个值。

例如：margin:12px 12em 16px 6em。margin:12px 12em auto 6em。

4.如果上下边界不同，左右边界相同则可以用三个值代替。

5.如果上下边界相同，左右边界相同。则可以用两个值代替：第一个值表示上下边界，第二个值表示左右边界。

6.margin值可以去负值。这样强迫元素偏移原来的位置，实现相对定位功能。

元素的边框由css的border属性负责定义。派生出四个子属性：border-top,border-right,border-bottom,border-left。还有border-style（边框样式）、border-color（边框颜色）、border-width（边框宽度）三个子属性。

1.边框的作用是划定当前元素与其他元素之间的分割线。

2.如果没有定义border-style属性，所定义的border-color和border-width属性无效。

3.border-color属性默认为黑色，border-width属性默认为medium大约等于2~3像素（视不同浏览器不同而定），border-style属性较多。

4.border-style、border-color、border-width属性值之间以空格分隔且没有先后顺序。

元素的补白由css的padding属性负责定义。派生出四个子属性：padding-top,padding-right,padding-bottom,padding-left。

1.补白是用来调整元素包含的内容与元素边框的距离。

2.补白的定义类似margin属性。

3.padding值不能为负值，即使为负值会被强制为0。