盒子模型原理

电子商务网页设计与制作Design

and

making

of

E-commerce

webpages盒子模型原理主讲人：陶小波THISIS盒子模型概述盒的尺寸边框（border）Content填充（padding）边界（margin）盒的高度与文本溢出一、盒子模型概述

盒子模型的概念

CSS将所有的网页元素都看做是一个矩形框，这个框由元素的内容、填充（padding）、边框（border）和边界（margin）组成。marginborderpaddingcontent填充（padding）是元素的内容与边框之间的空间。边界（margin）是一个元素和另一个元素之间的间隔。marginborderpaddingcontent

盒子模型的概念1.由“盒子”堆出来的网页版面网页中的所有元素都形成某种矩形框htmlbodyh1h2pqa块框行框

网页中的矩形框二、盒子模型的尺寸元素的宽度计算分两种情况：当元素未设置width时，border、padding和margin挤占内容区域的空间。当元素设置了width时，border、padding和margin附加在width之外。

（1）宽度计算padding-rightpadding-leftborder-rightborder-leftmargin-rightmargin-leftwidth元素的总宽度元素总宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界（2）元素总宽度border、padding和margin总是附加在height之外。300px200px300px200px300px200px300px200px#box{width:300px;height:200px;}border:solid10px#000000;}padding:40px;}margin:30px;}（3）高度计算padding-toppadding-bottomborder-topborder-bottommargin-topmargin-bottomheight元素的总高度元素的总高度=上边界+上边框+上填充+height+下填充+下边框+下边界（4）元素的总高度三、边框（border）每个元素可以设置4个方向的边框。border-rightborder-leftborder-topborder-bottom（1）

边框边框宽度border-width边框颜色border-color边框样式border-style（1）

边框每条边框有3种属性：3.边框样式（border-style）border-style的值：solid实线dotted点线dashed虚线double双线groove槽边ridge岭边inset凹边ouset凸边none无边框，默认值hidden无边框四、填充（padding）padding区域在边框之内。padding区域应用背景。padding-toppadding-bottompadding-rightpadding-leftbackground:url(images/flower.jpg)no-repeatrightbottom;（1）

填充可以单独设置上、右、下、左填充的大小。padding-top:2px;padding-right:4px;padding-bottom:6px;padding-left:8px;也可以同时设置4个方向填充的大小。padding:2px4px6px8px;/*上，右，下，左*/padding:2px4px6px;/*上，左右，下*/padding:2px4px;/*上下，左右*/padding:2px;/*上下左右*/（2）

设置填充的大小五、边界（margin）margin区域在边框之外。margin区域不应用背景。margin-topmargin-bottommargin-rightmargin-left（1）边界可以单独设置上、右、下、左边界的大小。margin-top:2px;margin-right:4px;margin-bottom:6px;margin-left:8px;也可以同时设置4个方向边界的大小。margin:2px4px6px8px;/*上，右，下，左*/margin:2px4px6px;/*上，左右，下*/margin:2px4px;/*上下，左右*/margin:2px;/*上下左右*/（2）设置边界的大小六、盒的高度与文本溢出如果盒子不设置高度，当内容增加时，盒子会自动增加高度以适应内容。#box{width:300px;border:1pxsolid#000000;background:#CCFFCC;}（1）高度自适应如果盒子设置了高度，当内容增加时，盒子不会增加高度，而是让内容溢出盒子。#box{width:300px;

height:150px;border:1pxsolid#000000;background:#CCFFCC;}（2）高度固定，文本溢出可以使用overflow属性来控制内容的溢出方式。overflow:visible默认值，让溢出的内容显示。overflow:scroll添加滚动条。overflow:auto在内容溢出的时候添加滚动条。overflow:hidden隐藏任何溢出的内容（3）控制文本溢出方式overflow:visible;overflow