什麼是盒模型？

盒模型概念：

盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區、補白（填充）、邊框、邊界(外邊距)這就是盒模型。

盒模型組成如圖-1所示：

圖-1

css盒模型由內容區（content）、填充（padding）、邊框（border）、頁邊空白（margin）組成。內容區是盒子的中心，呈現盒子的主要資訊內容；填充是內容區和邊框之間的空間；邊框是環繞內容區和填充的邊界；頁邊空白位於盒子的最外圍，是新增在邊框外周圍的空間。

簡單的比喻：

當在兩個盒子裡各裝了乙個雞蛋，

content：雞蛋。

padding：雞蛋和盒子之間的距離。

border：盒子的厚度。

margin：兩個盒子之間的距離。

圖-2盒模型簡單的示例，如圖-3：

圖-3padding和margin的作用：

padding：用來控制父元素和子元素之間的位置關係；

用來控制元素和內容之間的位置關係。

特點1：新增了padding值之後，padding值會把元素原有的大小撐大；如讓元素原本大小不變得話，需要在元素的寬高上減掉所加的padding；

特點3：背景色會延展到padding區域

margin：控制同輩元素之間的位置關係。

特點：margin是在元素邊框以外的空白區。

盒模型分為怪異盒模型和標準盒模型：

標準模式：盒子總寬度/高度=內容區寬度/高度+padding+border+margin

怪異模式：總寬度=width（content+border+padding）+margin

逆戰班2.23

什麼是盒模型

盒模型，我想大家或多或少應該聽說過，但可能並沒有深入的了解過。下面我就分享一下我對此的理解，希望可以對大家的學習有所幫助。什麼是盒模型呢？顧名思義，就是類似於盒子的模型，可以根據通過設定模型裡面各部分的大小來顯示你想要的內容，並且顯示了元素之間的相互關係。css中定義所有的元素都可以擁有像盒子一樣的...

什麼是盒模型？

盒模型的概念通俗點來說，就是乙個盒子，裡面包含著通過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...