1.什麼是盒模型？
在html頁面中，每乙個元素都可以看做是乙個盒子，而每個盒子都是由：內容區（content）、填充區（padding）、邊框區（border），外邊界區（margin）四部分組成的。
2.盒模型的模式
盒模型分為兩種模式，分別是標準模式和怪異模式
標準模式：乙個塊的總寬度=width+margin(左右)+padding(左右)+border(左右)
怪異模式：乙個塊的總寬度=width+margin(左右) (即width已經包含了padding和border值)
3.標準和怪異模型的轉換
box-sizing:content-box;將採用標準模式的盒子模型標準
box-sizing:border-box;將採用怪異模式的盒子模型標準
box-sizing:inherit;規定應從父元素繼承box-sizing屬性的值
4.js盒模型
獲取和設定box的內容寬高:
ie：dom.currentstyle.width/height
非ie：window.getcomputedstyle(dom).width/heigth
let obj=document.
getelementbyid
("box");
let style=
null;if
(window.getcomputedstyle)
else
alert
("width="
+style.width+
"\nheight="
+style.height)
;
CSS 盒模型和怪異盒模型
盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係,css定義所有元素都可以擁有像盒子一樣的外形和平面空間,即都包含內容區,補白 填充,內邊距 邊框,邊界 外邊距 下面說明了盒子模型 盒模型又分為標準盒模型 w3c標準 和怪異盒模型 ie盒模型 標準盒模型與ie盒模型的區別在於寬高...
學習CSS盒模型和CSS3彈性盒模型
css盒模型本質是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。div300px 寬 50px 左 右填充 50px 左 右邊框 50px 左 右邊距 450px 最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...