《【教学课件】第5章CSS盒模型.ppt》由会员分享，可在线阅读，更多相关《【教学课件】第5章CSS盒模型.ppt（44页珍藏版）》请在三一办公上搜索。
1、第 5 章CSS 盒模型,聊城大学传媒技术学院王丽萍,本章内容,5.1 盒模型概述,5.1.1 盒模型的概念,CSS 将所有的网页元素都看做是一个矩形框，这个框由元素的内容、填充（padding）、边框（border）和边界（margin）组成。,5.1.1 盒模型的概念（续）,填充（padding）是元素的内容与边框之间的空间。边界（margin）是一个元素和另一个元素之间的间隔。,margin,border,padding,内容,5.1.2 盒的类型,CSS 把盒子分为两种基本形态：块状元素行内元素,（1）块状元素,块状元素独占一行。默认状态下，块状元素的宽度为100。常用的块状元素：bo
2、dyph1h6ul，ol，litableblockquoteformdiv,（2）行内元素,行内元素在行内流动。行内元素没有高度和宽度。常用的行内元素：em，strongq，citebrimgainput，button，labelspan,5.1.3 理解盒模型,padding 区域在边框之内，margin 区域在边框之外。padding 区域应用背景，margin 区域不应用背景。元素不设置边框和背景时，不能分辨 padding 与 margin。,内容,#box width:200px;height:150px;,border:solid 10px#000000;,border:solid
3、 10px#000000;padding:40px;,border:solid 10px#000000;padding:40px;margin:30px;,border:solid 10px#000000;padding:40px;margin:30px;background-color:#0000FF;,5.2 盒的尺寸,元素的总宽度=width,padding-right,padding-left,border-right,border-left,margin-right,margin-left,5.2.1 元素总宽度,左填充+右填充,左边框+右边框,左边界+右边界,元素的总高度=heig
4、ht,padding-top,padding-bottom,border-top,border-bottom,margin-top,margin-bottom,5.2.2 元素的总高度,上填充+下填充,上边框+下边框,上边界+下边界,例：,#box width:200px;height:100px;margin:10px 20px;padding:20px 5px;border:solid 1px#000000;请你算一算我在网页上占据多大空间？,5.2.3 计算实例,5.3 边框（border）,5.3.1 边框,每个元素可以设置 4 个方向的边框。,border-right,border-
5、left,border-top,border-bottom,5.3.2 边框的属性,每条边框有 3 种属性：边框宽度 border-width边框颜色 border-color边框样式 border-style,5.3.3 边框样式（border-style）,border-style 的值：solid 实线dotted 点线dashed 虚线double 双线groove 槽边 ridge 岭边inset 凹边ouset 凸边none 无边框，默认值hidden 无边框,5.3.4 边框属性的设置,同时设置 4 个边框border:solid 4px#FF0000;单独设置下边框border
6、-bottom:double 6px#000000;设置右边无边框border:dotted 3px#0000FF;border-right:none;设置上、下无边框border:dashed 5px#666666;border-width:0 5px;,模仿信纸格式,5.3.5 边框属性应用实例,#box border:outset 4px#aaaaaa;#box h2 border-bottom:double 6px#999999;#box li border-bottom:dashed 1px#999999;,5.4 填充（padding）,5.4.1 填充,padding 区域在边框
7、之内。padding 区域应用背景。,padding-top,padding-bottom,padding-right,padding-left,background:url(images/flower.jpg)no-repeat right bottom;,5.4.2 设置填充的大小,可以单独设置上、右、下、左填充的大小。padding-top:2px;padding-right:4px;padding-bottom:6px;padding-left:8px;,也可以同时设置 4 个方向填充的大小。padding:2px 4px 6px 8px;/*上，右，下，左*/padding:2px
8、4px 6px;/*上，左右，下*/padding:2px 4px;/*上下，左右*/padding:2px;/*上下左右*/,5.4.2 设置填充的大小（续）,钟面原则,ul list-style:none;width:300px;border:1px solid#666666;padding:0px 10px;li margin:0.8em 0;,填充常用于创建一个呈现背景的区域。例：,5.4.3 填充的特殊作用,background:url(bg1.jpg)no-repeat center bottom;padding-bottom:100px;li margin:0.8em 0;bac
9、kground:url(bg2.jpg)no-repeat left top;padding-left:20px;,5.5 边界（margin）,5.5.1 边界,margin 区域在边框之外。margin 区域不应用背景。,margin-top,margin-bottom,margin-right,margin-left,可以单独设置上、右、下、左边界的大小。margin-top:2px;margin-right:4px;margin-bottom:6px;margin-left:8px;,5.5.2 设置边界的大小,也可以同时设置4个方向边界的大小。margin:2px 4px 6px 8
10、px;/*上，右，下，左*/margin:2px 4px 6px;/*上，左右，下*/margin:2px 4px;/*上下，左右*/margin:2px;/*上下左右*/,5.5.2 设置边界的大小（续）,当两个块元素的垂直边界相遇时，它们将发生重叠。,5.5.3 垂直边界重叠,#box1,#box2 height:100px;width:100px;border:10px solid#FF0099;margin:30px 0;,5.5.3 垂直边界重叠（续）,例：,边界重叠的意义：让连续块元素各处的边界一致。,5.5.3 垂直边界重叠（续）,p margin:0.8em 0;,如果边界不重
11、叠,边界重叠,父元素中包含子元素。,5.5.4 父子垂直边界重叠,当父元素的填充为 0 时。,5.5.4 父子垂直边界重叠,当父元素的填充、边框均为 0 时，父元素与子元素的边界相遇。,5.5.4 父子垂直边界重叠,5.5.4 父子垂直边界重叠,当父元素的填充、边框均为 0 时，父元素与子元素的边界相遇，这时发生父子垂直边界重叠。,#father width:100px;height:100px;background-color:#FFCC66;#son width:50px;height:50px;background-color:#99CCFF;margin-top:30px;,例：,5.
12、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
13、 solid#000000;background:#CCFFCC;,如果盒子设置了高度，当内容增加时，盒子不会增加高度，而是让内容溢出盒子。,5.6.2 高度固定，文本溢出,#box width:300px;height:150px;border:1px solid#000000;background:#CCFFCC;,但是 IE6 浏览器对盒子的高度作了错误的解析，即使盒子设置了高度，它也让盒子增加高度以适应内容。,5.6.3 IE6 对高度的错误解析,#box width:300px;height:150px;border:1px solid#000000;background:#CCFFCC;,对于标准浏览器，可以使用CSS的overflow 属性来控制内容的溢出方式。overflow:visible 默认值，让溢出的内容显示。overflow:scroll 添加滚动条。overflow:auto 在内容溢出的时候添加滚动条。overflow:hidden 隐藏任何溢出的内容,5.6.4 控制文本溢出方式,5.6.5 几种溢出方式的比较,overflow:visible;,overflow:auto;,overflow:hidden;,Thank You!,
