[toc]
## 關于padding-bottom
各瀏覽器廠商在容器可滾動的情況下,對padding-bottom是否保留意見是不同的(其它不為的padding是統一會保留的)

## 關于overflow-x和overflow-y
如果overflow-x和overflow-y屬性中的一個值設置為visible,而另外一個設置為scroll、auto或hidden,則visible的樣式表現會如同auto。
也就是說,除非overflow-x和overflow-y的屬性值都是visible,否則visible會當成auto來解析。換句話說,永遠不可能實現一個方向溢出裁剪或滾動,另一個方向內容溢出顯示的效果。
但是scroll、auto和hidden這3個屬性是可以共存的。
## 滾動條
HTML中有兩個標簽是**默認**可以產生滾動條的,
一個是根元素`<html>`
另一個是文本域`<textarea>`
因為這兩個標簽默認的overflow屬性值都不是visible(為auto)
### 默認滾動條均來自`<html>`
不是來自body
所以,如果我們想要去除頁面默認滾動條
```
html{overflow:hidden}
```
### 滾動條會占用容器的可用寬度或高度(client-\*)
占據的寬度為17px
## overflow與text-overflow
```
.ell{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
```
## overflow與錨點
### 錨點定位行為的觸發條件
分為如下兩種情況
#### URL地址中的錨鏈與錨點元素對應并有交互行為
前提條件:被查找的錨點元素要是處于非隱藏狀態
```
<a href='#1'></a>
<h2 id='1'></h2>
```
也可以使用`location.hash=1`進行跳轉
#### 可focus的錨點元素處于focus狀態
對焦點元素進行定位
```
document.querySelector('input').focus()
```
#### 區別
URL地址錨鏈定位是讓元素定位在瀏覽器窗體的上邊緣,
而focus錨點定位是讓元素在瀏覽器窗體范圍內顯示即可,不一定是在上邊緣
### 本質與行為表現
本質上是通過改變**容器**滾動高度或則寬度來實現的。
定位行為的發生是由內而外的,由內而外是指一個錨點元素可能會觸發多個滾動容器的定位
比如一個div里有一個h2,不僅div會滾動到h2的位置,html容器也會滾動到h2的位置,并且是由內而外觸發
### overflow:hidden也是可以滾動的
- 空白目錄
- 未處理
- webpack中的css模塊化
- CSS預處理器
- 效果
- 元素裝飾與美化
- 顏色
- checkbox
- img
- background
- clip-path
- 字體
- 文本控制
- text-indent
- letter-spacing
- word-spacing
- word-break和word-wrap
- white-space
- text-align
- text-decoration
- text-transform
- first-letter
- first-line
- 有關CSS百分單位的那些奇葩事兒
- 破壞性、包裹性、塊狀化
- 強大的absolute
- padding
- relative
- 繼承性
- fixed
- float
- BFC
- z-index
- overflow
- clip
- 最佳可訪問性隱藏
- 關于scrollHeight/Width
- 包含塊
- margin
- 布局系統
- 雜
- Flex
- Grid
- 自定義布局系統
- gutter實現思路
- 選擇器
- 偽元素和偽類
- css3
- appearance
- CSS2.1
- tmp
- 未定義行為
- 焦點元素
- outline輪廓
- 替換元素
- 盒子模型
- 塊級元素/盒子
- 標記盒子
- 容器盒子(內在盒子)
- 內聯元素/盒子
- 字母X
- line-height
- vertical-align
- font-size
- 內聯元素盒子模型新解
- line-height定義
- line-height與行內框盒子模型
- line-height與內聯元素的高度機制
- line-height值
- line-height與圖片
- vertical-align支持的屬性值及組成
- vertical-align起作用前提
- vertical-align與圖片
- vertical-align與line-height
- vertical-align前后不一的行為表現
- vertical-align實際應用
- line-height與height
- width/height與auto
- 最小內容寬度
- 最大內容寬度
- min/max-width/height注意事項
- 流:外部尺寸與內部尺寸
- 流體布局下的寬度分離原則
- height:auto
- 瀏覽器渲染原理
- 移動端