CSS-盒模型

第五章CSS盒模型聊城大学传媒技术学院王丽萍本章内容盒的尺寸边框（border）填充（padding）边界（margin）盒模型概述盒的高度与文本溢出本章实例一、盒模型概述第八章盒模型1.盒模型的概念CSS将所有的网页元素都看做是一个矩形框，这个框由元素的内容、填充（padding）、边框（border）和边界（margin）组成。marginborderpaddingcontent1.盒模型的概念（续）填充（padding）是元素的内容与边框之间的空间。边界（margin）是一个元素和另一个元素之间的间隔。marginborderpaddingcontent2.网页中的矩形框网页中的所有元素都形成某种矩形框。*{border:1pxsolid#FF0000;}htmlbodyh1h2pqa块框行框3.盒的类型CSS把盒子分为两种基本形态：Block：块框，即块状元素Inline：行框，即行内元素（1）块状元素块状元素独占一行。默认状态下，块状元素的宽度为100％。常用的块状元素：html，bodyblockquoteph1~h6ul，ol，dl，litableformdiv（2）行内元素行内元素在行内流动。行内元素没有高度和宽度。常用的行内元素：em，strongq，citebrimgainput，button，labelspan4.理解盒模型padding区域在边框之内，margin区域在边框之外。padding区域应用背景，margin区域不应用背景。不设置边框和背景时，不能分辨padding与margin。content#box{width: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挤占内容区域的空间。#box{border:solid10px#000000;}padding:40px;}margin:30px;}contentcontentcontentcontent当元素设置了width时，border、padding和margin附加在width之外。300px200px300px200px300px200px300px200px#box{width:300px;height:200px;}border:solid10px#000000;}padding:40px;}margin:30px;}（2）元素设置了width时2.高度计算border、padding和margin总是附加在height之外。300px200px300px200px300px200px300px200px#box{width:300px;height:200px;}border:solid10px#000000;}padding:40px;}margin:30px;}元素的总宽度=widthpadding-rightpadding-leftborder-rightborder-leftmargin-rightmargin-leftwidth元素的总宽度3.元素总宽度左填充++右填充左边框++右边框左边界++右边界元素的总高度=heightpadding-toppadding-bottomborder-topborder-bottommargin-topmargin-bottomheight元素的总高度4.元素的总高度上填充++下填充上边框++下边框上边界++下边界例：headstyletype=“text/css”#box{width:200px;margin:10px;padding:20px;border:solid1px#000000;}/style/headbodydivid=“box”请你算一算我在网页上占据多大空间？/div/body262px5.计算实例三、边框（border）第八章盒模型1.边框每个元素可以设置4个方向的边框。border-rightborder-leftborder-topborder-bottom2.边框的属性每条边框有3种属性：边框宽度border-width边框颜色border-color边框样式border-style3.边框样式（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.边框属性应用实例#box{border:outset4px#aaaaaa;}#boxh2{border-bottom:double6px#999999;}#boxli{border-bottom:dashed1px#999999;}四、填充（padding）第八章盒模型1.填充padding区域在边框之内。padding区域应用背景。padding-toppadding-bottompadding-rightpadding-leftbackground: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.设置填充的大小（续）钟面原则填充常用于创建一个呈现背景的区域。例：ul{list-style:none;width:300px;border:1pxsolid#666666;padding:0px10px;}li{margin:10px;}3.填充的特殊作用background:url(bg1.jpg)no-repeatcenterbottom;}li{margin:10px;}background:url(bg1.jpg)no-repeatcenterbottom;padding-bottom:100px;}li{margin:10px;}background:url(bg1.jpg)no-repeatcenterbottom;padding-bottom:100px;}li{margin:10px;background:url(bg2.jpg)no-repeatlefttop;}background:url(bg1.jpg)no-repeatcenterbottom;padding-bottom:100px;}li{margin:10px;background:url(bg2.jpg)no-repeatlefttop;padding-left:20px;}五、边界（margin）第八章盒模型1.边界margin区域在边框之内。margin区域不应用背景。margin-topmargin-bottommargin-rightmargin-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.垂直边界重叠contentcontentmargin-top:30px;margin-bottom:20px;理论上contentcontentmargin-top:30px;实际上边界重叠，形成一个边界。#box1,#box2{height:100px;width:100px;border:10pxsolid#FF0099;margin:30px0;}3.垂直边界重叠（续）例：发生边界重叠边界重叠的意义：让段落各处的边界一致。3.垂直边界重叠（续）p{margin:15px0;}如果边界不重叠边界重叠父子元素的垂直边界相遇时，子元素的边界将重叠在父元素的边界上。4.父子垂直边界重叠content#son{margin-top:30px;}父子元素的垂直边界相遇时，子元素的边界将重叠在父元素的边界上。注意：IE浏览器（IE6和IE7）中，父子元素的边界不重叠。4.父子垂直边界重叠contentmargin-top:30px;理论上contentmargin-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:1pxsolid#000000;background:#CCFFCC;}如果盒子设置了高度，当内容增加时，盒子不会增加高度，而是让内容溢出盒子。2.高度固定，文本溢出#box{width:300px;height:150px;border:1pxsolid#000000;background:#CCFFCC;}但是IE6浏览器对盒子的高度作了错误的解析，即使盒子设置了高度，它也让盒子增加高度以适应内容。3.IE6对高度的错误解析×IE6对高度的错误解析