本文講解css中w3標準盒模型
和ie標準盒模型
的區別。
所有的html元素都可以看做是乙個盒子,它包括邊距margin
,邊框border
,填充padding
,內容content
幾部分組成。
css中的盒模型分為兩種,分別為w3標準盒模型和ie盒模型,它們的區別在於大小不同
。
w3標準盒模型的width,height就是指content的區域。
>
>
>
.w3style
>
head
>
>
class
="w3"
>
w3標準盒模型
div>
body
>
html
>
可以看到,width為150,height為20,都是在content區域。
ie標準盒模型的width,height指的是content + padding + border。
>
>
>
.iestyle
>
head
>
>
class
="ie"
>
ie標準盒模型
div>
body
>
html
>
可以看到,width 150 = content 110 + padding-left 10 + padding-right 10 + border 20; 而 高度設定為20,content直接變成了0(沒變成負的);
css有個box-sizing
屬性,可以切換盒模型
>
>
>
.w3.ie
style
>
head
>
>
class
="w3"
>
w3標準盒模型
div>
class
="ie"
>
ie標準盒模型
div>
body
>
html
>
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子,父元素和子元素的關係就行大盒子裡放了個小盒子,兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...
css盒模型 css核心概念
頁面中所有元素都被看成是乙個矩形盒子,盒子包含元素內容 內邊距 padding 邊框 border 和外邊距 margin 計算盒子大小方式 box sizing 預設計算方式 width 寬 padding 內邊距 border 邊框 元素實際寬度 height 高 padding 內邊距 bor...
CSS 盒模型和怪異盒模型
盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係,css定義所有元素都可以擁有像盒子一樣的外形和平面空間,即都包含內容區,補白 填充,內邊距 邊框,邊界 外邊距 下面說明了盒子模型 盒模型又分為標準盒模型 w3c標準 和怪異盒模型 ie盒模型 標準盒模型與ie盒模型的區別在於寬高...