標準盒模型由一下4個值組成
1、margin(外圍區域)
2、border(邊框區)
3、padding(內填充區)
4、content(內容區)
1、padding值：
它的設定會影響盒子尺寸
占用空間
不同盒模型下的特點也不一樣
標準盒模型設定下，影響盒子自身尺寸
怪異盒模型設定下，影響盒子內部內容的區域尺寸
怪異盒子，本身不會影響盒子設定好的外部尺寸
如圖：
2、 margin值：
占用空間
影響同輩元素之間的距離
需要注意的是
上邊元素的 margin-bottom 與 下邊元素的 margin-top
取兩者之間最大值, 不是相加關係
如圖：
就CSS盒模型的幾點認知
概念 網頁布局的基石，從盒子的內部到盒子的外圍 內容 內填充 盒子本身 外邊距 padding的用法 1.padding是長在內容和盒子之間的距離 2.padding是長在盒子裡面的 3.padding的作用主要控制子元素在盒子內部的位子關係 4.padding是新增在父元素上面的 5.paddin...
盒模型的基礎
盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區 補白 填充 邊框 邊界 外邊距 這就是盒模型。即 由content padding border margin組成基本的框架 1.padding是在盒子裡面...
盒模型基礎
盒模型屬性 盒模型有五個屬性分別為 1 width 內容寬度 2 height 內容高度 3 border 邊框 4 padding 內邊距 即邊框到內容之間的距離 5 margin 外邊距 即乙個盒子到另乙個盒子之間的距離 一 width與height 指盒子的寬和高 盒子的體積或者容積，顯示內容...