CSS3秘笈：第七章

第七章 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：完全关闭清楚属性。