一css盒子模型概念CSS css盒子模型又稱框模型 Box Model ，包含了元素內(nèi)容content內(nèi)邊距padding邊框border外邊距margin幾個(gè)要素如圖圖中最內(nèi)部的框是元素的實(shí)際內(nèi)容，也就是元素框，緊挨著元素框外部的是內(nèi)邊距padding，其次是邊框border，然后最外層是外邊距margin；布局的一般寫法，從上到下，從左到右進(jìn)行排版布局所以，先寫最上面的長(zhǎng)盒子，再寫第二行最左邊的，中間的大盒子你不知道怎么弄，可以把 二三行看成一行，一最大的最準(zhǔn)，縱向分成三列，即 紅色來(lái)進(jìn)行布局，兩邊紅色的盒子再固定寬度后，寫兩個(gè)盒子規(guī)定高度分成兩行就行最下的盒子和第一行一；1打開HBuilder開發(fā)軟件并在Web項(xiàng)目中創(chuàng)建一個(gè)新的靜態(tài)頁(yè)面2將三個(gè)div元素插入body元素并將其類設(shè)置為AA，BB和CC3預(yù)覽靜態(tài)頁(yè)面，您可以看到頁(yè)面效果，即中上層和下層4分別設(shè)置AA，BB和CC三個(gè)類的樣式屬性，包括寬度，高度和背景顏色5我們?cè)俅卧O(shè)置body元素樣式屬性body textalign；整個(gè)盒子模型在網(wǎng)頁(yè)中所占的寬度左邊界左邊框左填充內(nèi)容右填充右邊框右邊界 CSS盒子模型的屬性內(nèi)容屬性寬=width 高=height 內(nèi)填充屬性內(nèi)容與邊框之間的距離padding 外邊距屬性margin使用該屬性的時(shí)候注意瀏覽器的兼容性內(nèi)填充與邊界的規(guī)則如果有四個(gè)參數(shù)表示上右下左，也可以單單指；像這樣可以通過(guò)子代選擇器來(lái)設(shè)置，例如boxdivdivdivcolor#f00 但是假如最里層有多個(gè)div那也會(huì)被設(shè)置當(dāng)前樣式，所以這樣雖然可以設(shè)置到，但是不合理通過(guò)后代選擇器來(lái)設(shè)置 box contont color#f00 這樣就是設(shè)置自代類名為 contont的盒子了。

無(wú)標(biāo)題文檔 box width500px height500px border1px solid #F00 這就是一個(gè)簡(jiǎn)單的div盒子，盒子就是所謂的一個(gè)個(gè)div，N個(gè)DIV組成的就是HTML網(wǎng)頁(yè)具體的你需要看一些相關(guān)書籍學(xué)習(xí)一下；8 position定位方式確定元素的定位類型，如絕對(duì)定位相對(duì)定位等，這些定位方式可能會(huì)改變?cè)氐暮凶幽Ｐ统叽绾臀恢猛ㄟ^(guò)調(diào)整這些屬性的值，你可以精確控制元素的寬度和高度，以及它們?nèi)绾斡绊懞凶幽Ｐ偷挠?jì)算此外，其他CSS屬性的使用也可能間接影響盒子模型的尺寸，例如字體大小fontsize行高；需要準(zhǔn)備的材料分別有電腦瀏覽器html編輯器1首先，打開html編輯器，新建html文件，例如indexhtml2其次，在indexhtml中的標(biāo)簽中，輸入css代碼divborder 1px solid blue textalign center3瀏覽器運(yùn)行indexhtml頁(yè)面，此時(shí)圖片在盒子中是居中顯示的；CSS盒模型詳解CSS3中的盒模型主要有標(biāo)準(zhǔn)模型和怪異模型IE盒子模型，兩者由marginborderpadding和content四部分構(gòu)成不同模型在設(shè)置width和height時(shí)有所差異，可通過(guò)boxsizing屬性調(diào)整盒模型類型對(duì)于寬度，width可以設(shè)置為最小值minwidth和最大值maxwidth高度屬性也有相應(yīng)的minheight和m。

Border邊框 圍繞在內(nèi)邊距和內(nèi)容外的邊框Padding內(nèi)邊距 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的Content內(nèi)容 盒子的內(nèi)容，顯示文本和圖像為了正確設(shè)置元素在所有瀏覽器中的寬度和高度，你需要知道的盒模型是如何工作的元素的寬度和高度 重要 當(dāng)您指定一個(gè) CSS 元素的寬度和高度屬性時(shí)；標(biāo)準(zhǔn)盒子模型css中widthheight=content的widthheight 怪異盒子模型css中widthheight=content的widthheight+padding+border 導(dǎo)致的結(jié)果由于標(biāo)準(zhǔn)盒子模型和怪異盒子模型的存在，這就導(dǎo)致當(dāng)同一段css代碼作用在同一個(gè)元素上時(shí)，在不同盒子模型下的瀏覽器中，元素所占的寬度和高度卻不同三，css3中；所有HTML元素可以看作盒子，在CSS中，quotbox modelquot這一術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用 CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括 邊距 ， 邊框 ， 填充 ，和 實(shí)際內(nèi)容 盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素我們可以同過(guò)調(diào)整元素的內(nèi)外邊距邊框來(lái)實(shí)現(xiàn)元素的；width=border+padding+content border和padding都是有左右兩邊下面是盒模型這里面的611*170你可以理解為content 希望對(duì)你有所幫助，望采納；內(nèi)邊距邊框和外邊距可以應(yīng)用于一個(gè)元素的所有邊，也可以應(yīng)用于單獨(dú)的邊而且，外邊距可以是負(fù)值，而且在很多情況下都要使用負(fù)值的外邊距 下圖是W3School的Box Model 圖解 示例代碼如下* “*” 代表通配符，代表適用于所有標(biāo)簽** padding 0px margin 0px *ID選擇器*。

以下是W3C標(biāo)準(zhǔn)的盒子示例lt！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quotDTDxhtml1transitionaldtdquot DIV+CSS div1 width300pxheight300pxbackgroundyellowborder2px solid redpadding10px 20px 30px 40px。