第七章 margin、padding和border
1.盒模型：四个属性：
（1）padding：内容与其边框线之间的空间。
（2）border：盒子周围的直线
（3）background-color：用来填充边框内部空间的，包括padding区域。
（4）margin：一个标签和另一个标签之间的间隔。
2.padding和margin的区别：padding是在内容和边框之间增加空间。避免内容被硬塞在方框里面，它还包括背景区域，因此padding占用的空间也可以为空白的内容。而margin则是在元素之间增加空白。
3.边距冲突：
当元素的bottom margin碰到另一个元素的top margin时，浏览器不是把这两个边距相加，而是应用它们中较大的那一个。
4.用margin负值消除空格：
margin负值代表移除空间。
5.块级盒子和行内盒子：
CSS有两种不同的盒子类型：block box（块级盒子）和inline box（行内盒子），它们分别对应于两个标签类型：块级标签和行内标签。块级标签在其前后会产生空格，行内标签在其前后不会产生空格。
6.行内元素只能设置left/right padding或margin，无法设置top/bottom padding或margin，除了<img>标签之外。display 属性可以让块级元素像行内元素那样显示，也可以让行内元素像块级元素那样显示。
7.添加边框：边框是环绕在元素周围的直线。每个border都通过color、width、style三个属性控制。样式还可以控制边框线的类型：solid（实现）dashed（虚线）等。
8.添加圆角：border-radius属性可以给盒子添加圆角。只写一个值时，它就会将这个值应用给一个元素的所有4个角，写四个值时，它会从左上角开始按顺时针应用于各个角。有些浏览器不支持border-radius属性，因此需要加上供应商前缀：-webkit-用于chrome、-moz-用于Firefox、-o-用于Opera、-ms-用于IE。
9.添加阴影：
box-shadow属性可以给元素的边界添加阴影。语法：box-shadow：-4px 6px 8px #000000;
第一个值为水平偏移量，这个值会将阴影移到元素的左边或者右边。正值是右边，负值是左边。第二个值为垂直偏移量，阴影的位置在元素的上方或者下方。正值是下方，负值是上方。第三个值是阴影的半径。决定阴影的模糊度和宽度。值为0时完全不模糊。第四个值是阴影的颜色。box-shadow属性中包括两个可选的值：inset关键字和阴影的尺寸。关键字inset告诉浏览器要将阴影画在方框内部，还可以添加一个阴影的尺寸作为第4个值。阴影的尺寸会将阴影扩展指定的量。可以在一个样式中添加多个阴影，用逗号隔开。
例如：box-shadow：10px 5px 8px #ff00ff，-5px -10px 20px 5px rgb(0,33,255)；
10.确定高度和宽度：
height和width属性时构成部分CSS盒模型的另外两个CSS属性，它们十分适用于给对象设置尺寸。盒子的实际宽度和高度是margin、border、padding、width属性值的总和。假如你设置了下列属性：
width：100px；
padding：15px；
border-width：5px；
margin：10px；
浏览器分配给盒子的宽度是160px。left/right margin为20px、left/right border为10px、left/right padding为30px，再加上宽度值100px。
11.height属性适合用来控制包含图片的div的高度以及横幅区域的设置。用来控制文本时要注意溢出。
12.用overflow控制溢出文本：overflow用4个关键字来控制溢出盒子边沿的那部分内容改如何显示：
（1）visible：这是浏览器通常的做法。
（2）scroll：添加滚动条。
（3）auto：要使滚动条变成可选，就用auto选项。
（4）hidden：隐藏任何超出盒子的那部分内容。
13.高度和宽度的最大化和最小化：
（1）max-width属性：用于设置元素的最大宽度。
（2）max-height属性：设置最大高度。
（3）min-width属性：设置元素的最小宽度。
（4）min-height属性：设置元素的最小高度。
14.浮动包围内容：float属性可以把元素移到左边或者右边。float属性值有三种：left、right、none。浮动标签的HTML代码必须出现在任何包围浮动元素的内容之前。浏览器会包围浮动元素周围的文本但是不会包围边框或者背景，消除背景元素在浮动元素之下的方法有两种：（1）给设置了浮动下方跑动的背景或边框的样式添加一条规则：overf：hidden。（2）在浮动元素周围添加边框：即设置足够粗的边框。
15.停止浮动：clear属性会指示元素不要包围浮动项目。clear属性接受以下选项：left样式将落至左浮动元素的下方、right：强迫样式落至右浮动对象的下方、both：强迫样式落至左浮动和右浮动元素的下方、none：完全关闭清楚属性。