第5章CSS盒模型-2017年11月.pptVIP

边界重叠的意义：让连续块元素各处的边界一致。 5.5.3 垂直边界重叠（续） p { margin: 0.8em 0;} 如果边界不重叠 边界重叠 父元素中包含子元素。 5.5.4 父子垂直边界重叠 子元素1 子元素2 当父元素的填充为 0 时。 5.5.4 父子垂直边界重叠 子元素1 子元素2 当父元素的填充、边框均为 0 时，父元素与子元素的边界相遇。 5.5.4 父子垂直边界重叠 子元素1 子元素2 5.5.4 父子垂直边界重叠 子元素1 子元素2 当父元素的填充、边框均为 0 时，父元素与子元素的边界相遇，这时发生父子垂直边界重叠。 #father { 　width: 100px; height: 100px; 　background-color: #FFCC66; } #son { 　width: 50px; height: 50px; 　background-color: #99CCFF; margin-top: 30px; } 例： 5.5.4 父子垂直边界重叠（续） 发生边界重叠　　 避免父子垂直边界重叠的方法是，给父元素设置填充或边框，将父子元素的边界分隔开。 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; } 但是 IE6 浏览器对盒子的高度作了错误的解析，即使盒子设置了高度，它也让盒子增加高度以适应内容。 5.6.3 IE6 对高度的错误解析 × IE6 对高度的错误解析 #box { width: 300px; height: 150px; border: 1px solid #000000; background: #CCFFCC; } 150px 对于标准浏览器，可以使用CSS的overflow 属性来控制内容的溢出方式。 overflow: visible 默认值，让溢出的内容显示。 overflow: scroll 添加滚动条。 overflow: auto 在内容溢出的时候添加滚动条。 overflow: hidden 隐藏任何溢出的内容 5.6.4 控制文本溢出方式 5.6.5 几种溢出方式的比较 overflow: visible; overflow: auto; overflow: hidden; 第 5 章　CSS 盒模型 聊城大学传媒技术学院　王丽萍 本章内容 5.2 盒的尺寸　 5.3 边框（border）　 5.4 填充（padding）　 5.5 边界（margin）　 5.1 盒模型概述　 5.6 盒的高度与文本溢出 5.1 盒模型概述 5.1.1 盒模型的概念 CSS 将所有的网页元素都看做是一个矩形框，这个框由元素的内容、填充（padding）、边框（border）和边界（margin）组成。 margin border padding 内容 5.1.1 盒模型的概念（续） 填充（padding） 是元素的内容与边框之间的空间。 边界（margin） 是一个元素和另一个元素之间的间隔。 margin border padding 内容 5.1.2 盒的类型 CSS 把盒子分为两种基本形态： 块状元素 行内元素 （1）块状元素 块状元素独占一行。默认状态下，块状元素的宽度为100％。 常用的块状元素： body p h1~h6 ul，ol，li table blockquote form div （2）行内元素 行内元素