盒子模型原理

電子商務(wù)網(wǎng)頁設(shè)計(jì)與制作Design

and

making

of

E-commerce

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

盒子模型的概念

CSS將所有的網(wǎng)頁元素都看做是一個矩形框，這個框由元素的內(nèi)容、填充（padding）、邊框（border）和邊界（margin）組成。marginborderpaddingcontent填充（padding）是元素的內(nèi)容與邊框之間的空間。邊界（margin）是一個元素和另一個元素之間的間隔。marginborderpaddingcontent

盒子模型的概念1.由“盒子”堆出來的網(wǎng)頁版面網(wǎng)頁中的所有元素都形成某種矩形框htmlbodyh1h2pqa塊框行框

網(wǎng)頁中的矩形框二、盒子模型的尺寸元素的寬度計(jì)算分兩種情況：當(dāng)元素未設(shè)置width時，border、padding和margin擠占內(nèi)容區(qū)域的空間。當(dāng)元素設(shè)置了width時，border、padding和margin附加在width之外。

（1）寬度計(jì)算padding-rightpadding-leftborder-rightborder-leftmargin-rightmargin-leftwidth元素的總寬度元素總寬度=左邊界＋左邊框＋左填充＋內(nèi)容寬度＋右填充＋右邊框＋右邊界（2）元素總寬度border、padding和margin總是附加在height之外。300px200px300px200px300px200px300px200px#box{width:300px;height:200px;}border:solid10px#000000;}padding:40px;}margin:30px;}（3）高度計(jì)算padding-toppadding-bottomborder-topborder-bottommargin-topmargin-bottomheight元素的總高度元素的總高度=上邊界+上邊框+上填充+height+下填充+下邊框+下邊界（4）元素的總高度三、邊框（border）每個元素可以設(shè)置4個方向的邊框。border-rightborder-leftborder-topborder-bottom（1）

邊框邊框?qū)挾萣order-width邊框顏色border-color邊框樣式border-style（1）

邊框每條邊框有3種屬性：3.邊框樣式（border-style）border-style的值：solid實(shí)線dotted點(diǎn)線dashed虛線double雙線groove槽邊ridge嶺邊inset凹邊ouset凸邊none無邊框，默認(rèn)值hidden無邊框四、填充（padding）padding區(qū)域在邊框之內(nèi)。padding區(qū)域應(yīng)用背景。padding-toppadding-bottompadding-rightpadding-leftbackground:url(images/flower.jpg)no-repeatrightbottom;（1）

填充可以單獨(dú)設(shè)置上、右、下、左填充的大小。padding-top:2px;padding-right:4px;padding-bottom:6px;padding-left:8px;也可以同時設(shè)置4個方向填充的大小。padding:2px4px6px8px;/*上，右，下，左*/padding:2px4px6px;/*上，左右，下*/padding:2px4px;/*上下，左右*/padding:2px;/*上下左右*/（2）

設(shè)置填充的大小五、邊界（margin）margin區(qū)域在邊框之外。margin區(qū)域不應(yīng)用背景。margin-topmargin-bottommargin-rightmargin-left（1）邊界可以單獨(dú)設(shè)置上、右、下、左邊界的大小。margin-top:2px;margin-right:4px;margin-bottom:6px;margin-left:8px;也可以同時設(shè)置4個方向邊界的大小。margin:2px4px6px8px;/*上，右，下，左*/margin:2px4px6px;/*上，左右，下*/margin:2px4px;/*上下，左右*/margin:2px;/*上下左右*/（2）設(shè)置邊界的大小六、盒的高度與文本溢出如果盒子不設(shè)置高度，當(dāng)內(nèi)容增加時，盒子會自動增加高度以適應(yīng)內(nèi)容。#box{width:300px;border:1pxsolid#000000;background:#CCFFCC;}（1）高度自適應(yīng)如果盒子設(shè)置了高度，當(dāng)內(nèi)容增加時，盒子不會增加高度，而是讓內(nèi)容溢出盒子。#box{width:300px;

height:150px;border:1pxsolid#000000;background:#CCFFCC;}（2）高度固定，文本溢出可以使用overflow屬性來控制內(nèi)容的溢出方式。overflow:visible默認(rèn)值，讓溢出的內(nèi)容顯示。overflow:scroll添加滾動條。overflow:auto在內(nèi)容溢出的時候添加滾動條。overflow:hidden隱藏任何溢出的內(nèi)容（3）控制文本溢出方式overflow:visible;overflow