盒模型，我想大家或多或少應該聽說過，但可能並沒有深入的了解過。下面我就分享一下我對此的理解，希望可以對大家的學習有所幫助。什麼是盒模型呢？顧名思義，就是類似於盒子的模型，可以根據通過設定模型裡面各部分的大小來顯示你想要的內容，並且顯示了元素之間的相互關係。css中定義所有的元素都可以擁有像盒子一樣的外形和平面空間。盒模型分為標準盒模型和怪異盒模型。
盒模型的組成：內容區、補白/填充、邊框、邊界/外邊距。
盒模型的組成：content（內容區）+padding（填充區）+border（邊框區）+margin（外邊界區）。其中，
content： 指的是元素的寬和高
border： 指的是盒子的邊緣
padding： 用來控制父元素和子元素之間的位置關係以及元素和內容之間的位置關係的。
margin： 是用來控制同輩元素之間的位置關係，是顯示在元素邊框以外的空白區。
（1）有確定的寬高的盒子在新增了padding值之後，它的大小會被paddding值撐大。 如果想讓元素原來的大小不變，需要在元素的寬高上減掉所加的padding。但如果你本身量的就是盒子內部內容的區域大小，就不用減去padding。
（2）padding不可以寫負值。
（3）背景色會延展到padding區域。
設定padding值可以有兩種方法
方法一 ：
padding-top:30px; 上填充
padding-right:30px; 右填充
padding-bottom:30px; 下填充
padding-left:30px; 左填充
方法二 ：
padding： 1 2 3 4 1、上 2、右 3、下 4、左
padding： 1 2 3 1、上 2、左和右 3、下
padding： 1 2 1、上和下 2、左和右
padding： 1 1、上 右 下 左
（1）與padding屬性不同， margin不會影響元素的實際寬高，但是也會曾加的他的所佔區域。margin值是顯示在盒子邊框（若有邊框的話）外面的距離。
（2）margin 是可以寫負值的。
設定padding值可以有兩種方法
方法一：
margin-top:30px; 上外邊距
margin-right:30px; 右外邊距
margin-bottom:30px; 下外邊距
margin-left:30px; 左外邊距
方法二 ：
margin：1 2 3 4 1、上 2、右 3、下 4、左
margin：1 2 3 1、上 2、左和右 3、下
margin：1 2 1、上和下 2、左和右
margin：1 1、上 右 下 左
margin的bug:
1、上下的兩個元素之間的margin值會重疊顯示。誰的值大就以誰的margin值來顯示。
為了避免這樣情況出現，我們可以只給其中乙個元素設定margin值。
2、當父元素裡的第乙個子元素（塊元素），新增margin-top的時候，會錯誤的把margin-top值新增給父元素。（建立在當前的元素沒有新增邊框和浮動的前提下。）
為了避免這種情況出現，我們可以給父元素新增overflow：hidden； 也可以給父元素和子元素新增浮動；也可以給父元素新增邊框，或者乾脆不給當前元素用margin，給它的父元素用padding。
標準盒模型的所佔位置的組成：寬高（content）+padding+border+margin
寬度實際占有的位置大小： 寬+左右padding+左右border+左右margin
元素高度實際占有的位置大小： 高+上下padding+上下border+上下margin
2.怪異盒模型
元素的寬度：width（content+border+padding）+margin
什麼是盒模型？
盒模型概念 盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區 補白 填充 邊框 邊界 外邊距 這就是盒模型。盒模型組成如圖 1所示 圖 1 css盒模型由內容區 content 填充 padding 邊框 ...
什麼是盒模型？
盒模型的概念通俗點來說，就是乙個盒子，裡面包含著通過css屬性在html文件中所展現出來的內容和樣式。它是用來控制元素和元素之間的位置關係。乙個div就是乙個盒子 它的組成部分就是內容區 content 填充區 padding 邊框 border 外邊距 margin 先看一段 通過 可以看出來bo...
什麼是CSS盒模型 IE盒模型和W3C盒模型
1.什麼是css盒模型 2.ie盒模型和w3c盒模型 3.css3屬性box sizing 4.關於盒模型的使用 在最初接觸css的時候，對於css盒模型的不了解，撞了很多次的南牆呀。盒模型是網頁布局的基礎，它制定了元素如何在頁面中顯示，如果足夠地掌握，那使用css布局那將會容易得多。1.什麼是cs...