网站设计与开发课程 第5章 网页CSS盒模型 课件.ppt

#father { 　width: 100px; height: 100px; 　background-color: #FFCC66; } #son { 　width: 50px; height: 50px; 　background-color: #99CCFF; margin-top: 30px; } 例： 5.5.4 父子垂直边界重叠（续） } 发生边界重叠　　 × IE 对边界的错误解析 边界不重叠　 避免父子垂直边界重叠的方法是，给父元素设置填充或边框，将父子元素的边界分隔开。 5.5.4 父子垂直边界重叠（续） #father { 　width: 100px; height: 100px; 　background-color: #FFCC66; padding: 1px; } #son { 　width: 50px; height: 50px; 　background-color: #99CCFF; margin-top: 30px; } } } 5.6 盒的高度与文本溢出 如果元素不设置高度，当内容增加时，元素会自动增加高度以适应内容。 5.6.1 高度自适应 #box { width: 300px; border: 1px solid #000000; background: #CCFFCC; } 如果元素设置了高度，当内容增加时，元素不会增加高度，而是让内容溢出。 5.6.2 高度固定，文本溢出 #box { width: 300px; height: 150px; border: 1px solid #000000; background: #CCFFCC; } 在没有设置 height 属性的情况下，块元素的高度自适应。 在设置了 height 属性的情况下，块元素内容区域的高度为指定值。多出的内容从块元素中溢出。 小结：块元素 在没有设置 width 属性的情况下，块元素的宽度为父元素的100%。如果对块元素设置左右padding、左右border、左右margin，块元素的内容区域会收缩，为左右padding、左右border、左右margin 让开空间。 在设置了 width 属性的情况下，块元素内容区域的宽度为 width 值，如果对块元素设置左右padding、左右border、左右margin，块元素的总宽度会增加。 在没有设置 height 属性的情况下，块元素的高度自适应。 在设置了 height 属性的情况下，块元素内容区域的高度为 height 值。多出的内容从块元素中溢出。 5.2 盒的尺寸 元素的总宽度 = width padding-right padding-left border-right border-left margin-right margin-left width 元素的总宽度 5.2.1 元素总宽度 左填充 + + 右填充 左边框 + + 右边框 左边界 + + 右边界 元素的总高度 = height padding-top padding-bottom border-top border-bottom margin-top margin-bottom height 元素的总高度 5.2.2 元素的总高度 上填充 + + 下填充 上边框 + + 下边框 上边界 + + 下边界 例： head style type=“text/css” #box { width: 200px; height: 100px; margin: 10px 20px; padding: 20px