CSS学习笔记——盒模型属性

通俗来讲，CSS（层叠样式表）在修饰HTML（超文本标记语言）时，会假定HTML文档元素会形成一个矩形的文档框，而此矩形框可以将HTML文档元素包裹在内，类似于将物品装进盒子中保存，这就是CSS中盒模型的通俗概念。
而对于HTML的文档盒子，可以从内到外分为四个部分：内容区（content）、填充区/内边距（padding）、边框（border）、外边距（margin）。
（上图是CSS中盒模型的图示效果）
1.内容区（content）：
这部分是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种模式类型。
2.填充区/内边距（padding）：
这部分是指内容区和边框之间的空间，及盒子中的内边距，也可以理解为控制父元素与子元素的距离。内填充的属性有五种 ，即padding -top（上内边距）、padding -bottom（下内边距）、padding -left（左内边距）、padding-right（右内边距） 以及综合了以上四种方向的快捷填充属性padding。使用这五种属性可以指定内容区信息内容与各方向边框间的距离。若盒子大小一定且未设置padding时，设置padding值可以使盒子撑大；若想要盒子大小保持不变，怎必须再盒子原有大小上减去相应padding值。设置盒子背景色属性时，可使背景色延伸到填充区域。

（上图为未加padding值的效果图；下图为加上padding值的效果图）
3.边框（border）：边框一般是指包裹着内容区和内边距的边界，边框的属性一般是指border-style（边框样式）、border-width（边框宽度）和border-color（边框颜色） 。border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的两个属性都会被忽略，边框将不存在。border-style 一般有dotted（点线）、dashed（虚线）、solid(实线)、double（双实线）等。
4.外边距（margin）：这个属性是指盒子的最外围，是添加在边框外周围的空间。一般同辈元素之间用的比较多，使盒子之间不会紧凑地连接在一起。外边距的属性一般有五种 ，即margin-top（上外边距）、margin-bottom（下外边距）、margin- left（左外边距）、margin-right（右外边距）以及综合了以上四种方向的快捷外边距属性margin，其具体的设置和使用与内边距padding属性类似。margin值不会影响元素宽高，但是会增加元素所占位置。
（margin可以设置为负值；padding不能设置为负值）
margin值的设置方法：
margin:30px; （四周都加上30像素外边距）
margin:10px 30px; （上下为10像素；左右为30像素外边距）
margin:10px 30px 50px （上为10像素；左右为30像素；下为50像素的外边距）
margin:10px 30px 50px 100px （上为10像素；右为30像素；下为50像素；左100像素的外边距）
（ 可以想象为沿着盒子顺时针设置）
padding值的设置方法和margin的设置相类似。
（注意：）
margin常出现的bug：
a:两个相邻元素上下的margin值不会叠加，谁的值大就按照谁的值设置中间的margin值。
b:如果父元素和第一个子元素（块状）没有浮动的情况下，给第一个子元素添加margin-top,这个属性会错误放在父元素上面。