盒模型 1.定義 2.盒模型成員介紹 content 通過設置width與height來規定content 塊級標簽可以設置自身寬高,預設寬為父級寬(width=auto),高為自動(由內容撐開) 內聯標簽不可以設置自身寬高,預設均為自動(由內容撐開) border border(邊框)由borde ...
盒模型
1.定義
1.任意一個元素都可以當作盒模型
2.盒子的大小由內容寬高(width/height)+邊距(padding)+邊框(border)
3.盒子由外邊距(margin),影響盒子的位置
廣義盒模型:文檔中所有功能性及內容性標簽,及文檔中所有顯示性標簽.
狹義盒模型:文檔中以塊級形式存在的標簽(塊級標簽擁有盒模型100%特性且最常用)2.盒模型成員介紹
content
- 通過設置width與height來規定content
- 塊級標簽可以設置自身寬高,預設寬為父級寬(width=auto),高為自動(由內容撐開)
- 內聯標簽不可以設置自身寬高,預設均為自動(由內容撐開)
border
- border(邊框)由border-width(寬度)、border-color(顏色)、border-style(風格)三部分組成
border成員:border-left、border-right、border-top、border-bottom
- border-width成員：border-left-width、border-right-width、border-top-width、border-bottom-width
- border-color成員：border-left-color、border-right-color、border-top-color、border-bottom-color
border-style成員：border-left-style、border-right-style、border-top-style、border-bottom-style
| 風格 | 解釋 |
|---|---|
| solid | 實線 |
| dashed | 虛線 |
| dotted | 點狀線 |
| double | 雙實線 |
| groove | 槽狀線 |
| ridge | 脊線 |
| inset | 內嵌效果線 |
| outset | 外凸效果線 |
margin
- margin成員：margin-left、margin-right、margin-top、margin-bottom
- margin整體設置
| 賦值個數 | 方位 |
|---|---|
| 1 | 上下左右 |
| 2 | 上下|左右 |
| 3 | 上|左右|下 |
| 4 | 上|右|下|左 |
- 總結:1.規定起始位置 2.順時針 3.不是找對面
3.邊界圓角
border-radius
- border-radius成員
| 成員 | 解釋 |
|---|---|
| border-top-left-radius | 左上 方位 |
| border-top-right-radius | 右上 方位 |
| border-bottom-left-radius | 左下 方位 |
| border-bottom-right-radius | 右下 方位 |
- 單方位設置
賦值個數(值類型:長度或百分比):1 解釋為:橫縱
賦值個數(值類型:長度或百分比):2 解釋為:橫|縱- 分向整體設置
格式:1/1 解釋為:橫向|縱向4.其他相關屬性
- max|min-width|height
- overflow
| 值 | |
|---|---|
| visible | 預設值。內容不會被修剪，會呈現在元素框之外。 |
| hidden | 內容會被修剪，並且其餘內容是不可見的。 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
- display
| 值 | 描述 |
|---|---|
| inline | 內聯 |
| block | 塊級 |
| inline-block | 內聯塊 |
5.盒模型佈局
盒模型佈局基本介紹
- 佈局方位：margin-left、margin-right、margin-top、margin-bottom
- 影響自身佈局：margin-left、margin-top
- 影響兄弟佈局：margin-right、margin-bottom
- 正向 / 反向：正值 / 負值
margin佈局坑
- 很多語義標簽具有預設margin
- 父子標簽margin-top重疊取大者
- 兄弟標簽margin-bottom、margin-top重疊取大者
