解析CSS的box model盒模型及其內的子元素布局控制

2024-07-11 08:25:44

字體：大中小

來源：轉載

供稿：網友

css的兩種盒模型介紹
CSS中Box model是分為兩種，第一種是W3C的標準模型，另一種是IE的傳統模型，他們相同之處都是對元素計算尺寸的模型，具體說就是對元素的width,height,padding,border以及元素實際尺寸的計算關系；他們不同之處呢？兩者的計算方法不一至：
1、W3C的標準Box Model:

復制代碼

代碼如下:/*外盒尺寸計算（元素空間尺寸）*/ Element空間高度 = content height + padding + border + margin Element 空間寬度 = content width + padding + border + margin /*內盒尺寸計算（元素大小）*/ Element Height = content height + padding + border （Height為內容高度） Element Width = content width + padding + border （Width為內容寬度）

2、IE)傳統下Box Model（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）:

復制代碼

代碼如下:/*外盒尺寸計算（元素空間尺寸）*/ Element空間高度 = content Height + margin (Height包含了元素內容寬度，邊框寬度，內距寬度) Element空間寬度 = content Width + margin (Width包含了元素內容寬度、邊框寬度、內距寬度) /*內盒尺寸計算（元素大小）*/ Element Height = content Height(Height包含了元素內容寬度，邊框寬度，內距寬度) Element Width = content Width(Width包含了元素內容寬度、邊框寬度、內距寬度)

其實原則上來說Box Model是分得很細的，我們這里主要分了兩個比較明顯的地方，就是外盒模型和內合模型，如上面計算公式所示（后面我將會詳細介紹一下CSS中的Box Model）。這樣說大家可能還不太好理解，下面我們一起來看一個實際的例子，比如說現在有一個叫boxtest的Div，其具有下面一個屬性
.boxtest { border: 20px solid; padding: 30px; margin: 30px; background: #ffc; width: 300px; }
我們先來看一下W3C標準瀏覽器（Firefox,Safari,Chrome,Opera,IE6+）和傳統瀏覽器(IE6以下版本瀏覽器)的Layout截圖
201671112001776.jpg (500×444)