外邊距的摺疊，行內元素的盒模型
阿新 • • 發佈：2021-07-17
1.外邊距的摺疊
- 父元素：
父子元素間相鄰外邊距，子元素的會傳遞給父元素（只限於上外邊距）， 父子外邊距的摺疊會影響到頁面的佈局，必須要進行處理。例如：設定子元素的位置margin-top:100px;結果同時父子元素同時向下移動100px
- 兄弟元素:
兄弟元素間的相鄰垂直外邊距會取兩者之間的較大值（兩者都是正值）。例如: 元素1(在下)margin-top:100px; 元素2：margin-bottom:120px;,則最終元素1向下移動120px
如果相鄰的外邊距一正一負，則取兩者的和。
如果相鄰的外邊距都是負值，則取兩者中絕對值較大的
2、行內元素的盒模型
行內元素不支援設定寬度和高度
行內元素可以設定padding，但是垂直方向padding不會影響頁面的佈局
行內元素可以設定border，垂直方向的border不會影響頁面的佈局
行內元素可以設定margin，垂直方向的margin不會影響佈局
- display 用來設定元素顯示的型別
| display可選值： |
|---|
| inline 將元素設定為行內元素 |
| block 將元素設定為塊元素 |
| inline-block 將元素設定為行內塊元素,既可以設定寬度和高度又不會獨佔一行 |
| table 將元素設定為一個表格 |
| none 元素不在頁面中顯示 |
- visibility 用來設定元素的顯示狀態
| visibility可選值： |
|---|
| visible 預設值，元素在頁面中正常顯示 |
| hidden 元素在頁面中隱藏 不顯示，但是依然佔據頁面的位置 |