CSS盒模型演示文件修改版.pptVIP

Margin:auto指水平居中 居左 margin:0 auto 0 0 居右 margin:0 0 0 auto 居中 margin:0 auto Header的显示背景图像的高度为：height+padding-top+padding-bottom=80+150+0=230PX，刚好等于背景图片的高度，所以背景图片不会重复。 背景图片重复的两种情况：1是Header的显示背景图像的高度height+padding-top+padding-bottom背景图片的高度，背景图片重复显示 2是Header的显示背景图像的高度height+padding-top+padding-bottom==背景图片的高度，但是height内容的高度，就是给的height80PX装不下内容，内容会把height撑大。 五、边界（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. 高度