CSS-盒模型PPT课件

第五章CSS盒模型,聊城大学传媒技术学院王丽萍,本章内容,本章实例,一、盒模型概述,第八章盒模型,1.盒模型的概念,CSS将所有的网页元素都看做是一个矩形框，这个框由元素的内容、填充（padding）、边框（border）和边界（margin）组成。,margin,border,padding,content,1.盒模型的概念（续）,填充（padding）是元素的内容与边框之间的空间。边界（margin）是一个元素和另一个元素之间的间隔。,margin,border,padding,content,2.网页中的矩形框,网页中的所有元素都形成某种矩形框。,*border:1pxsolid#FF0000;,htmlbodyh1h2pqa,3.盒的类型,CSS把盒子分为两种基本形态：Block：块框，即块状元素Inline：行框，即行内元素,（1）块状元素,块状元素独占一行。默认状态下，块状元素的宽度为100。常用的块状元素：html，bodyblockquoteph1h6ul，ol，dl，litableformdiv,（2）行内元素,行内元素在行内流动。行内元素没有高度和宽度。常用的行内元素：em，strongq，citebrimgainput，button，labelspan,4.理解盒模型,padding区域在边框之内，margin区域在边框之外。padding区域应用背景，margin区域不应用背景。不设置边框和背景时，不能分辨padding与margin。,content,#boxwidth:200px;height:150px;,border:solid10px#000000;,border:solid10px#000000;padding:40px;,border:solid10px#000000;padding:40px;margin:30px;,border:solid10px#000000;padding:40px;margin:30px;background-color:#0000FF;,padding:40px;margin:30px;,二、盒的尺寸,第八章盒模型,1.宽度计算,元素的宽度计算分两种情况：当元素未设置width时，border、padding和margin挤占内容区域的空间。当元素设置了width时，border、padding和margin附加在width之外。,（1）元素未设置width时,当元素未设置width时，border、padding和margin挤占内容区域的空间。,#boxborder:solid10px#000000;,padding:40px;,margin:30px;,content,当元素设置了width时，border、padding和margin附加在width之外。,#boxwidth:300px;height:200px;,border:solid10px#000000;,padding:40px;,margin:30px;,（2）元素设置了width时,2.高度计算,border、padding和margin总是附加在height之外。,#boxwidth:300px;height:200px;,border:solid10px#000000;,padding:40px;,margin:30px;,元素的总宽度=width,padding-right,padding-left,border-right,border-left,margin-right,margin-left,3.元素总宽度,左填充+右填充,左边框+右边框,左边界+右边界,元素的总高度=height,padding-top,padding-bottom,border-top,border-bottom,margin-top,margin-bottom,4.元素的总高度,上填充+下填充,上边框+下边框,上边界+下边界,例：,#boxwidth:200px;margin:10px;padding:20px;border:solid1px#000000;请你算一算我在网页上占据多大空间？,5.计算实例,三、边框（border）,第八章盒模型,1.边框,每个元素可以设置4个方向的边框。,border-right,border-left,border-top,border-bottom,2.边框的属性,每条边框有3种属性：边框宽度border-width边框颜色border-color边框样式border-style,3.边框样式（border-style）,border-style的值：solid实线dotted点线dashed虚线double双线groove槽边ridge岭边inset凹边ouset凸边none无边框，默认值hidden无边框,4.边框属性的设置,同时设置4个边框border:solid4px#FF0000;单独设置下边框border-bottom:double6px#000000;设置右边无边框border:dotted3px#0000FF;border-right:none;设置上、下无边框border:dashed5px#666666;border-width:05px;,模仿信纸格式,5.边框属性应用实例,#boxborder:outset4px#aaaaaa;#boxh2border-bottom:double6px#999999;#boxliborder-bottom:dashed1px#999999;,四、填充（padding）,第八章盒模型,1.填充,padding区域在边框之内。padding区域应用背景。,padding-top,padding-bottom,padding-right,padding-left,background:url(images/flower.jpg)no-repeatrightbottom;,2.设置填充的大小,可以单独设置上、右、下、左填充的大小。padding-top:2px;padding-right:4px;padding-bottom:6px;padding-left:8px;,也可以同时设置4个方向填充的大小。padding:2px4px6px8px;/*上，右，下，左*/padding:2px4px6px;/*上，左右，下*/padding:2px4px;/*上下，左右*/padding:2px;/*上下左右*/,2.设置填充的大小（续）,钟面原则,填充常用于创建一个呈现背景的区域。例：,ullist-style:none;width:300px;border:1pxsolid#666666;padding:0px10px;limargin:10px;,3.填充的特殊作用,background:url(bg1.jpg)no-repeatcenterbottom;limargin:10px;,background:url(bg1.jpg)no-repeatcenterbottom;padding-bottom:100px;limargin:10px;,background:url(bg1.jpg)no-repeatcenterbottom;padding-bottom:100px;limargin:10px;background:url(bg2.jpg)no-repeatlefttop;,background:url(bg1.jpg)no-repeatcenterbottom;padding-bottom:100px;limargin:10px;background:url(bg2.jpg)no-repeatlefttop;padding-left:20px;,五、边界（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:2px4px6px8px;/*上，右，下，左*/margin:2px4px6px;/*上，左右，下*/margin:2px4px;/*上下，左右*/margin:2px;/*上下左右*/,2.设置边界的大小（续）,当两个元素的垂直边界相遇时，它们将发生重叠。,3.垂直边界重叠,#box1,#box2height:100px;width:100px;border:10pxsolid#FF0099;margin:30px0;,3.垂直边界重叠（续）,例：,边界重叠的意义：让段落各处的边界一致。,3.垂直边界重叠（续）,pmargin:15px0;,如果边界不重叠,边界重叠,父子元素的垂直边界相遇时，子元素的边界将重叠在父元素的边界上。,4.父子垂直边界重叠,#sonmargin-top:30px;,父子元素的垂直边界相遇时，子元素的边界将重叠在父元素的边界上。注意：IE浏览器（IE6和IE7）中，父子元素的边界不重叠。,4.父子垂直边界重叠,#sonmargin-top:30px;,#faterwidth:100px;height:100px;background-color:#FFCC66;#sonheight:50px;width:50px;background-color:#99CCFF;margin-top:30px;,例：,IE对边界的错误解析,4.父子垂直边界重叠（续）,避免父子边界重叠的方法：用1px的填充将父子的边界分隔。,4.父子垂直边界重叠（续）,#faterwidth:100px;height:100px;background-color:#FFCC66;padding:1px;#sonheight:50px;width:50px;background-color:#99CCFF;margin-top:30px;,六、盒的高度与文本溢出,第八章盒模型,如果盒子不设置高度，当内容增加时，盒子会自动增加高度以适应内容。,1.高度自适应,#boxwidth:300px;border:1pxsolid#000000;background:#CCFFCC;,如果盒子设置了高度，当内容增加时，盒子不会增加高度，而是让内容溢出盒子。,2.高度固定，文本溢出,#boxwidth:300px;height:150px;border:1pxsolid#000000;background:#CCFFCC;,但是IE6浏览器对盒子的高度作了错误的解析，即使盒子设置了高度，它也让盒子增加高度以适应内容。,3.IE6对高度的错误解析,#boxwidth:300px;height:150px;border:1pxso