css盒模型簡介
1、css盒模型是網頁布局的基石！盒模型從內到外一共包含四個區域：
內容區 、內填充（補白）、邊框、外間距，其中內填充和外邊距得以實作的途徑要依靠padding和margin兩個屬性，
2、padding用法：
1、padding長在內容區與邊框之間，在盒子內部；
2、padding是為了調整子元素在父元素里面的位置關系；
3、padding的特點：padding的值會把盒子撐大；
4、如果盒子要想保持原來的大小，需要在原來寬高的基礎上減去padding值；
5、給與一個方向設定padding值：padding-left/right/top/bottom;
6、padding不能設定負值；
7、padding不會對背景圖位置有影響；
8、如果一個盒子沒有設定固定的寬高，加上padding值以后可以不用減，
3、margin用法：
1、margin長在元素之外；
2、margin控制同級元素之間的位置關系；
3、margin不會對盒子本身造成影響；
4、給單一方向添加margin值：margin-left/right/top/bottom；
5、margin可以設定負值；
6、控制子元素在父元素之間的位置關系，用padding最合適；
7、margin常出現的bug：
a、當父元素在第一個子元素沒有設定浮動的狀態下，如果第一個子元素添加margin-top/bottom會錯誤的把間距加到父元素上面；
b、上下相鄰兩個元素之間的margin值，不會疊加，按照最大值來設定，左右相鄰兩個元素之間的margin值會疊加
8、margin：0 auto；即上下0，左右auto，會讓子元素在父元素中居中，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/51687.html
標籤：Html/Css