CSS盒模型幻灯片.ppt

五、边界（margin） 第八章　盒模型 1. 边界 margin 区域在边框之内。 margin 区域不应用背景。 margin-top margin-bottom margin-right margin-left 可以单独设置上、右、下、左边界的大小。 margin-top: 2px; margin-right: 4px; margin-bottom: 6px; margin-left: 8px; 2. 设置边界的大小 也可以同时设置4个方向边界的大小。 margin: 2px 4px 6px 8px; /*上，右，下，左*/ margin: 2px 4px 6px; /*上，左右，下 */ margin: 2px 4px; /*上下，左右*/ margin: 2px; /*上下左右*/ 2. 设置边界的大小（续） 当两个元素的垂直边界相遇时，它们将发生重叠。 3. 垂直边界重叠 content content margin-top: 30px; margin-bottom: 20px; 理论上 content content margin-top: 30px; 实际上 边界重叠，形成一个边界。 #box1, #box2 { height: 100px; width: 100px; border: 10px solid #FF0099; margin: 30px 0; } 3. 垂直边界重叠（续） 例： 发生边界重叠 边界重叠的意义：让段落各处的边界一致。 3. 垂直边界重叠（续） p { margin: 15px 0;} 如果边界不重叠 边界重叠 父子元素的垂直边界相遇时，子元素的边界将重叠在父元素的边界上。 4. 父子垂直边界重叠 content #son { margin-top: 30px; } 父子元素的垂直边界相遇时，子元素的边界将重叠在父元素的边界上。 注意： IE 浏览器（IE6 和 IE7）中，父子元素的边界不重叠。 4. 父子垂直边界重叠 content margin-top: 30px; 理论上 content margin-top: 30px; 实际上 #son { margin-top: 30px; } #fater { 　width: 100px; height: 100px; 　background-color: #FFCC66; } #son { 　height: 50px; width: 50px; 　background-color: #99CCFF; margin-top: 30px; } 例： × IE 对边界的错误解析 发生边界重叠　　 边界不重叠　 4. 父子垂直边界重叠（续） 避免父子边界重叠的方法：用 1px 的填充将父子的边界分隔。 父元素有 1px 填充 4. 父子垂直边界重叠（续） #fater { 　width: 100px; height: 100px; 　background-color: #FFCC66; padding: 1px; } #son { 　height: 50px; width: 50px; 　background-color: #99CCFF; margin-top: 30px; } 六、盒的高度与文本溢出 第八章　盒模型 如果盒子不设置高度，当内容增加时，盒子会自动增加高度以适应内容。 1. 高度自适应 #box { width: 300px; border: 1px solid #000000; background: #CCFFCC; } 如果盒子设置了高度，当内容增加时，盒子不会增加高度，而是让内容溢出盒子。 2. 高度固定，文本溢出 #box { width: 300px; height: 150px; border: 1px solid #000000; background: #CCFFCC; } 但是 IE6 浏览器对盒子的高度作了错误的解析，即使盒子设置了高度，它也让盒子增加高度以适应内容。 3. IE6 对高度的错误解析 × IE6 对高度的错误解析 #box { width: 300px; height: 150px; border: 1px solid #000000; background: #CCFFCC; } 150px 可以使用 overflow 属性来控制内容的溢出方式。 overflow: visible 默认值，让溢