第二篇：前端開發-css盒模型簡介

css盒模型簡介

一、css盒模型是網頁佈局的基石！盒模型從內到外一共包含四個區域：

　　內容區 、內填充（補白）、邊框、外間距。其中內填充和外邊距得以實現的途徑要依靠padding和margin兩個屬性。

二、padding用法：

　　一、padding長在內容區與邊框之間，在盒子內部；

　　二、padding是爲了調整子元素在父元素裏面的位置關係；

　　三、padding的特色：padding的值會把盒子撐大；

　　四、若是盒子要想保持原來的大小，須要在原來寬高的基礎上減去padding值；

　　五、給與一個方向設定padding值：padding-left/right/top/bottom;

　　六、padding不能設置負值；

　　七、padding不會對背景圖位置有影響；

　　八、若是一個盒子沒有設定固定的寬高，加上padding值之後能夠不用減。

三、margin用法：

　　一、margin長在元素以外；

　　二、margin控制同級元素之間的位置關係；

　　三、margin不會對盒子自己形成影響；

　　四、給單一方向添加margin值：margin-left/right/top/bottom；

　　五、margin能夠設置負值；

　　六、控制子元素在父元素之間的位置關係，用padding最合適；

　　七、margin常出現的bug：

　　　　a、當父元素在第一個子元素沒有設置浮動的狀態下，若是第一個子元素添加margin-top/bottom會錯誤的把間距加到父元素上面；

　　　　b、上下相鄰兩個元素之間的margin值，不會疊加，按照最大值來設定。左右相鄰兩個元素之間的margin值會疊加

　　八、margin：0 auto；即上下0，左右auto，會讓子元素在父元素中居中。