邊框（border） 外邊距（margin） 內邊距（padding）
元素的邊框就是圍繞在內容和內邊距的一條或多條線,它的屬性是border
邊框有三個屬性值1.寬度 2.樣式 3.顏色
border:width style color;
寬度樣式 solid->實線 dashed->虛線 dotted->點狀線 double->雙線
顏色1) 顏色英文單詞
2) 十六進製制
單邊框border-top / border-right / border-bottom / border-left
單內邊距屬性 padding-top / padding-right / padding-bottom / padding-left
4個屬性值: 上 右 下 左
3個屬性值: 上 (右左) 下
2個屬性值: (上下) (左右)
1個屬性值: (上右下左)
外邊距寫法和內邊距相同,只是屬性不同
單外邊距 margin-top / margin-right / margin-bottom /margin-left
多外邊距+屬性值margin
4個屬性值: 上 右 下 左
3個屬性值: 上 (右左) 下
2個屬性值: (上下) (左右)
1個屬性值: (上右下左)
box-sizing:content-box;
原理：
內容寬高+內邊距+邊框+外邊距
內容寬高：
width寬,height高
box-sizing:border-box;
原理：
內容寬度+外邊距(內容寬高包含了內邊距和邊框)
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
同級元素在豎直方向有margin時發生合併
當乙個元素出現在另乙個元素上面時，第乙個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖:
父子級之間在豎直方向有margin時發生外邊距合併
當乙個元素包含在另乙個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。請看下圖：
外邊距合併的結局方案
同級元素給第二個元素浮動,新增絕對定位,單獨設定某乙個元素inline-block
父子級元素外邊距合併解決辦法
1）給父級設定內邊距代替自己外邊距記住
2）給父級加邊框
3）給父級overflow:hidden（生成bfc）;
4）設定絕對定位
5）設定display:inline-block;
兩種盒模型
原來存在兩種盒模型，w3c標準盒模型和ie盒模型。兩者盒模型下計算元素的寬高不一致，為了實現統一，採取的方法是避免觸發ie盒模型，使用宣告就可以避免。下面我們來看看兩者的區別。w3c標準盒模型 width margin left margin right padding left padding r...
css 兩種盒模型
w3c 模型 box sizing border box content box 這是由 css2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。border box 為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都...
CSS 兩種盒模型
第一種是w3c標準的盒子模型 標準盒模型 第二種ie標準的盒子模型 怪異盒模型 標準盒模型width指的是內容區域content的寬度 height指的是內容區域content的高度 w3c標準盒模型下盒子的大小 width content border padding margin 怪異盒模型中的...