概念：網頁布局的基石，從盒子的內部到盒子的外圍（內容 內填充 盒子本身 外邊距）
padding的用法：1.padding是長在內容和盒子之間的距離
2.padding是長在盒子裡面的
3.padding的作用主要控制子元素在盒子內部的位子關係
4.padding是新增在父元素上面的
5.padding可以把盒子撐大！！
（如果想讓盒子保持原有大小，需要在寬高的基礎上減掉padding！！
注：如果乙個盒子沒有固定大小被內容撐開，新增padding不用減 ）
6.單一方向上設定padding的值：
padding-left：左
padding-right：右
padding-top：上
padding-bottom：下
7.padding的設定方法：
padding：乙個值 四周都是padding
padding;兩個值 上下 左右
padding：三個值 上 左右 下
padding：四個值 上 右 下 左
8.padding不會對背景圖的位置造成影響。
9.padding不能為負值
margin的用法：1.margin是長在盒子外圍的。
2.margin控制當前的元素與其他同級的元素的位置關係。
3.margin不會改變盒子的內部的大小。
4.給元素的單一乙個方向設定margin值
margin-left:左
margin-right:右
margin-top:上
margin-bottom:下
5.margin設定方法
margin：乙個值 四周
margin：兩個值 上下 左右
margin：三個值 上 左右 下
margin：四個值 上 右 下 左
6.margin是可以設定負值的！！
7.margin常出現的bug:
a:同級元素上下之間的margin的margin值，不會疊加，會重合，按照最大值設定。
b:當父元素和第乙個子元素都沒有浮動，給第乙個子元素新增margin-top：會錯誤的把margin-top新增在父元素上面 。
a: 預設情況下邊框是長在元素寬高之外。
b: border:10px solid blue; ( 複合式寫法 )
屬性拆分：
border-width: 邊框大小
border-color: 邊框顏色
border-style: 邊框型別
（ solid 實線
dashed 虛線
dotted 點狀線
double 雙線
none 沒有線條
）c:單獨乙個方向設定邊框：
border-left:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-top:10px solid red;
d:border-width/color/style :
屬性值：
1個值： 四周都新增邊框
2個值： 上下 左右
3個值： 上 左右 下
4個值： 上 右 下 左
e:用邊框畫三角形：
transparent 透明
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...
CSS的盒模型
乙個盒子中主要的屬性 就5個 width height padding border margin。width是 寬度 的意思，css中width指的是內容的寬度，而不是盒子的寬度。height是 高度 的意思，css中height指的是內容的高度，而不是盒子的高度 padding是 內邊距 的意思...
現認知盒模型的基礎概念
標準盒模型由一下4個值組成 1 margin 外圍區域 2 border 邊框區 3 padding 內填充區 4 content 內容區 1 padding值 它的設定會影響盒子尺寸 占用空間 不同盒模型下的特點也不一樣 標準盒模型設定下，影響盒子自身尺寸 怪異盒模型設定下，影響盒子內部內容的區域...