css盒子模型

1.內聯元素和塊級元素

• 塊級元素：div、p、h1~h六、ol、ul、dl、li、dd、table、form
• 內聯元素：a、br、i、img、input、label、select、span、textarea
• 內聯塊元素（內聯元素，可是能夠設置width、height）：img input

1.什麼元素能夠設置width和height

• 只設一個的話，至關於另外一個是auto
• 只有塊級元素，和內聯塊元素能夠設置寬度和高度

2.border元素

1. border-color:顏色|transparent(透明)
2. border-style: none|solid|dashed
3. border-width

邊框縮寫: border: 寬度|樣式|顏色

不一樣方向：border-top、border-left....

3.padding 內邊距

• padding會改變盒子的寬度和高度，不可爲負值

內邊距屬性的縮寫

padding: 值1                 // 4個方向都是值1
    padding: 值1 值2             // 上下=1 左右=2
    padding: 值1 值2 值3         // 上=1 左右=2 下=3
    padding: 值1 值2 值3 值4     // 上=1 右=2 下=3 左=4
複製代碼

4.margin

margin: 值1                 // 4個方向都是值1
    margin: 值1 值2             // 上下=1 左右=2
    margin: 值1 值2 值3         // 上=1 左右=2 下=3
    margin: 值1 值2 值3 值4     // 上=1 右=2 下=3 左=4
複製代碼

默認狀況下，html塊級元素存在外邊距 body，h1~h六、p.... 能夠聲明margin，覆蓋默認樣式

margin:auto

• 實現水平方向居中顯示的效果，
• 瀏覽器來計算外邊距，
• 相對於父元素的居中

5.盒子計算

margin+border+padding+width/height

6.display

inline： 內聯元素有空格解決辦法

• 元素之間不換行
• 在最外添加一個父元素div font-size:0

block:元素變成塊級元素，能夠設置width，height

區別

• inline:元素顯示爲內聯元素，元素先後沒有換行符
• block:元素顯示爲塊級元素，元素先後有換行符
• inline-block:行內塊元素，元素呈現爲inline,但具備block相應特性
• none:此元素不會被顯示

7.繼承

對於樣式屬性，經過設置值爲inherit，指定從父元素繼承相對屬性的值