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

無標題文檔 box width500px height500px border1px solid #F00 這就是一個簡單的div盒子，盒子就是所謂的一個個div，N個DIV組成的就是HTML網(wǎng)頁具體的你需要看一些相關書籍學習一下；8 position定位方式確定元素的定位類型，如絕對定位相對定位等，這些定位方式可能會改變元素的盒子模型尺寸和位置通過調整這些屬性的值，你可以精確控制元素的寬度和高度，以及它們如何影響盒子模型的計算此外，其他CSS屬性的使用也可能間接影響盒子模型的尺寸，例如字體大小fontsize行高；需要準備的材料分別有電腦瀏覽器html編輯器1首先，打開html編輯器，新建html文件，例如indexhtml2其次，在indexhtml中的標簽中，輸入css代碼divborder 1px solid blue textalign center3瀏覽器運行indexhtml頁面，此時圖片在盒子中是居中顯示的；CSS盒模型詳解CSS3中的盒模型主要有標準模型和怪異模型IE盒子模型，兩者由marginborderpadding和content四部分構成不同模型在設置width和height時有所差異，可通過boxsizing屬性調整盒模型類型對于寬度，width可以設置為最小值minwidth和最大值maxwidth高度屬性也有相應的minheight和m。

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

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