一.什麼是盒模型
二.盒模型的css屬性
內填充：padding屬性
外邊距：margin屬性
邊框：border
三.padding屬性
padding是在盒子裡面，在盒子與內容之間
padding的作用：控制子元素在父元素裡面的位置關係
padding會把盒子撐大
如果想讓盒子保持原有的大小：在寬高基礎上減掉。（ 如果乙個元素是被內容撐開的，沒有設定固定的寬高，padding直接撐開。不用減掉 ）
如果給單一方向新增paddingpadding-top/bottom/left/right
padding的設定特點：padding:30px; 四周
padding:10px 30px; 上下 左右
padding:10px 30px 50px 上 左右 下
padding:10px 30px 50px 100px 上右下左
padding不會對背景圖的位置造成影響
padding不能為負值 例子
讓文字和盒子的周圍產生間距
效果如圖
四.margin屬性
1.margin在元素外圍，不會撐大元素的大小
2. 作用:控制元素與元素之間的間距。
3. 給單一方向新增marginmargin-left/right/top/bottom
4. margin設定方法：margin:30px; 四周
margin:10px 30px; 上下 左右
margin:10px 30px 50px 上 左右 下
margin:10px 30px 50px 100px 上右下左 4.:
5. margin:0 auto;讓當前元素在父元素裡面左右居中。
6. margin常出現的bug
a:兩個相鄰元素上下的margin值 不會疊加 按照較大值設定。
b:如果父元素和第乙個子元素沒有浮動的情況下，給第乙個子元素新增margin-top,會 錯誤放在父元素上面。
7. margin可以設定負值
例子讓兩個盒子（同級的盒子）之間，產生一定距離
"box"> 半夜
"wrap"> 半夜
五.邊框屬性
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 透明
標準盒模型 怪異盒模型 彈性盒模型
box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...
怪異盒模型 彈性盒模型
標準盒模型 我們平常狀態下所寫的，即為標準盒模型狀態下的css樣式 box怪異盒模型 ie盒模型 p box兩種模式的區別標準模式會被設定的padding撐開，而怪異模式則相當於將盒子的大小固定好，再將內容裝入盒子。盒子的大小並不會被padding所撐開。標準模式 box sizing conten...