[TOC] 1. CSS盒模型 元素的尺寸 1.1 元素的尺寸 | 屬性 | 值 | 說明 | | | | | | width | auto、長度值或百分比 | 元素的寬度 | | height | auto、長度值或百分比 | 元素的高度 | | min width | auto、長度值或百分比 ...
目錄
1. CSS盒模型
元素的尺寸
1.1 元素的尺寸
| 屬性 | 值 | 說明 |
|---|---|---|
| width | auto、長度值或百分比 | 元素的寬度 |
| height | auto、長度值或百分比 | 元素的高度 |
| min-width | auto、長度值或百分比 | 元素的最小寬度 |
| min-height | auto、長度值或百分比 | 元素的最小高度 |
| max-width | auto、長度值或百分比 | 元素的最大寬度 |
| max-height | auto、長度值或百分比 | 元素的最大高度 |
用於可能動態產生元素尺寸變大變小的問題，來限制最大最小值
div{
background: silver;
width: 200px;
height: 200px;
min-width: 100px;
min-height: 100px;
}
<div>HTML5</dive>1.2. 元素內邊距 padding
div{
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
/*上下各空出10,20px*/
padding: 10px 20px;
/*上,右，下，左*/
padding: 10px, 20px,10px,10px;
}
1.3. 元素外邊距 margin
1.4. 處理溢出overflow
溢出的參數值
| 值 | 說明 |
|---|---|
| auto | 瀏覽器自動處理溢出內容，用滾動條 |
| hidden | 有溢出，直接剪掉 |
| scroll | 不管是否溢出，都有滾動條 |
| visible | 預設值，不管是否溢出，都顯示 |
div{
overflow-y: auto;
}1.5. 元素的可見性Visibility
| 屬性值 | 說明 |
|---|---|
| visible | 預設值，元素在頁面上可見 |
| hidden | 元素不可見，但會占據空間 |
| collapse | 元素不可見，隱藏表格的行列。如果不是表格，則和hidden一樣 |
div{
background: silver;
width: 200px;
height: 200px;
visibility: visible;
}2. CSS元素的盒類型
CSS盒模型中的display屬性，可以更改元素本身盒類型，那麼有哪些盒類型呢？
2.1. 塊級元素(區塊)
- 能夠設置元素尺寸，隔離其他元素功能（有換行功能）的元素
<div>, <p>
2.2. 行內元素
- 不能設置元素尺寸，它只能自適應內容、無法隔離其他元素，其他元素會緊跟其後:
<span>, <d>
2.3. 行內-塊元素
- 可以設置元素尺寸，但是無法隔離其他元素
<img>
2.4. 盒類型元素轉換dispaly
| 值 | 說明 |
|---|---|
| block | 盒為塊級元素 |
| inline | 盒為行內元素 |
| inline-block | 盒為行內-塊元素 |
| none | 盒子不可見，不占位 |
div{
background: silver;
width: 200px;
height: 200px;
/*轉成了行內元素*/
display: inline;
/*轉成了行內-塊元素*/
display: inline-block
}3. CSS盒元素的浮動float
| 值 | 說明 |
|---|---|
| left | 浮動元素靠左 |
| right | 浮動元素靠右 |
| none | 禁止浮動 |
#a{
background: maroon;
float: left;
}
#b{
background: green;
float: right;
}
#c{
background: blue;
float: left;
}
