盒模型的概念通俗點來說，就是乙個盒子，裡面包含著通過css屬性在html文件中所展現出來的內容和樣式。它是用來控制元素和元素之間的位置關係。乙個div就是乙個盒子
它的組成部分就是內容區（content）+填充區（padding）+邊框（border）+外邊距（margin）
先看一段**：
通過**可以看出來box是box1的父元素，我給父元素box的寬高各200px，給子元素box1的寬高各100px。
當我給子元素和父元素新增margin和padding值之後：
通過上圖可以看出子元素box1的位置關係發生了變動，在這裡，我給子元素box1新增了margin-left：40px；也就是box1左邊的外邊距距離父元素有40px的間距；然後我同樣給父元素box新增了padding-top：40px；子元素box1的上方距離父元素box也有40px的間距。然後還給子元素box1新增了乙個寬度為2px的黑色邊框。
但是我們能看出來這個圖的大小明顯和上邊圖的大小不一樣了，這是為什麼呢？因為我們給父元素box已經設定好了寬高，當我們給父元素設定padding值的時候，父元素的寬高就會發生變化，所以要注意一點：當給父元素新增了padding值之後，如果想讓父元素的寬高保持原有的大小，就要在父元素原有的寬高上減去padding值；如果沒有給父元素設定寬高，padding值直接撐開的，就不用減去。
在上面這個圖中，可以明白盒模型的組成布局，content內容區裡邊放的就是我們要讓他在網頁上顯示出來的內容，也就是box1，而padding，是控制子元素在父元素裡的位置關係；margin就是控制元素和元素之間的的位置關係。
怎麼區分padding和margin？padding是在盒子的內部，邊框（border）與內容區（content）之間的距離，margin是在盒子的外部，盒子與盒子之間的距離，也就是邊框（border）與邊框（border）之間的距離；如圖：
什麼是盒模型？
盒模型概念 盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區 補白 填充 邊框 邊界 外邊距 這就是盒模型。盒模型組成如圖 1所示 圖 1 css盒模型由內容區 content 填充 padding 邊框 ...
什麼是盒模型
盒模型，我想大家或多或少應該聽說過，但可能並沒有深入的了解過。下面我就分享一下我對此的理解，希望可以對大家的學習有所幫助。什麼是盒模型呢？顧名思義，就是類似於盒子的模型，可以根據通過設定模型裡面各部分的大小來顯示你想要的內容，並且顯示了元素之間的相互關係。css中定義所有的元素都可以擁有像盒子一樣的...
什麼是CSS盒模型 IE盒模型和W3C盒模型
1.什麼是css盒模型 2.ie盒模型和w3c盒模型 3.css3屬性box sizing 4.關於盒模型的使用 在最初接觸css的時候，對於css盒模型的不了解，撞了很多次的南牆呀。盒模型是網頁布局的基礎，它制定了元素如何在頁面中顯示，如果足夠地掌握，那使用css布局那將會容易得多。1.什麼是cs...