前端知識體系(6)-css篇

時間 2021-05-19

標籤 css html css3 web chrome windows 瀏覽器 dom ide 佈局欄目 CSS 简体版

原文原文鏈接

如下內容爲 css 基礎篇（1）

1. 如何解決 a 標點擊後 hover 事件失效的問題？

改變 a 標籤 CSS 屬性的排列順序：
（愛恨原則）link -> visited -> hover -> active

a:link：未訪問的樣式
a:visited：已經訪問的樣式
a:hover：鼠標移上去時的樣式
a:active：鼠標按下的樣式

按照這樣書寫：
能夠解決 a:link 樣式被 a:visited 樣式覆蓋問題。
在 CSS 中，若是對於相同元素針對不一樣條件的定義，適宜將最通常的條件放在最上面，依次向下，保證最下面的是最特殊的條件（能夠理解爲樣式覆蓋）。css

這樣，瀏覽器顯示元素的時候，纔會從特殊到通常、逐級向上驗證條件。html

舉例說明：css3

我想讓未訪問連接顏色爲藍色，懸浮連接爲綠色，已訪問連接爲紅色：web

第一種狀況：我定義的順序是a:visited-紅色、a:hover-綠色、a:link:藍色，這時會發現：把鼠標放到未訪問過的藍色連接上時，它並不變成綠色，只有放在已訪問的紅色連接上，連接纔會變綠。chrome

第二種狀況：我把 CSS 定義順序調整爲：a:link、a:visited、a:hover，這時，不管你鼠標通過的連接有沒有被訪問過，它都會變成綠色啦。windows

這是由於，一個鼠標通過的未訪問連接同時擁有a:link、a:hover兩種屬性。瀏覽器

在第一種狀況下，a:link 離它最近，因此它優先知足同時擁有【a:link，a:hover】中的 a:link，而放棄 a:hover 的重複定義（hover 樣式被 link 給覆蓋了）。
在第二種狀況，不管連接有沒有被訪問過，它首先要檢查是否符合 a:hover 的標準（便是否有鼠標通過它），知足，則變成綠色，不知足，則繼續向上查找，一直找到知足條件的定義爲止。

奇淫技巧--記住正確排序：（l v h a ）==》LV好啊（取的首字母)dom

2. 響應式佈局

從目前瞭解的狀況，pc 和 h5 使用一套響應式的代碼的場景比較少了，大可能是 pc,h5 各自維護一套代碼。

1.使用CSS3媒體查詢@media 查詢ide

@media screen and (max-width:980px ) {
 body{
 background-color: red;
 }
}

2.flex佈局佈局

彈性盒佈局模型是css3規範中提出的一種新的佈局方式。

目的：提供一種更加高效的方式來對容器中的條目進行佈局、對齊和分配空間

優點：這種佈局模式已被主流瀏覽器所支持，能夠在web應用開發中使用。

3. Flex 佈局

Flex（Flexible Box）佈局稱爲 "彈性佈局"，能夠爲網頁的佈局提供最大的靈活性，取代了往常的浮動（float）佈局，而且任何一個容器均可以設置 Flex 佈局。
注：設置 Flex 佈局後，子元素的 Float 佈局將失效

3-1 Flex 中的四大概念

容器：若是給一個標籤添加 display:flex;，那麼這個標籤就是一個容器
項目：在容器中的直接子元素叫項目（必定是直接子元素）
主軸：項目的默認排序方向就是主軸（默認橫向排列，一個容器能夠有多根主軸）
交叉軸：和主軸垂直的那個軸，就是交叉軸

圖1

圖2

3-2 容器的屬性

Flex-direction --屬性決定主軸的方向
Flex-wrap -- 屬性決定項目排不下時如何換行
Flex-flow -- flex-direction 和 flex-wrap 的簡寫形式
justify-content -- 水平對齊
align-items -- 垂直對齊
align-content -- 決定了多根主軸的對齊方式

1.Flex-direction（屬性決定主軸的方向）

row（默認值）：主軸爲水平方向，起點在左端
row-reverse：主軸爲水平方向，起點在右端
column：主軸爲垂直方向，起點在上端
column-reverse：主軸爲垂直方向，起點在下端

2.Flex-wrap(屬性決定項目排不下時如何換行)

norwrap（默認）：不換行
wrap：換行，第一行在上方
wrap-reverse：換行，第一行在下方

3.Flex-flow（屬性是 flex-direction 和 flex-wrap 的簡寫形式）

flex-flow: flex-direction || flex-wrap;

4.justify-content(沿着主軸的方向--通常是水平對齊)

flex-start；（默認值），項目左對齊
flex-end：項目右對齊
center: 居中對齊
space-between：項目兩端對齊，項目之間的間隔都相等
space-around：每一個項目兩側的間隔相等

5.align-items(屬性決定項目在交叉軸上如何對齊--通常是垂直對齊)

flex-start 從上而下
flex-end 從下到上
center 擠在一塊兒居中顯示
stretch 拉伸（設置拉伸這個屬性的時候，不能給子元素設置高度,基線對齊）
注:必須給當前的容器設置高度纔會起做用

6.align-content（屬性決定了多根主軸的對齊方式）

stretch（默認值）：軸線佔滿整個交叉軸
flex-start：與交叉軸的起點對齊
flex-end：與交叉軸的終點對齊
center：與交叉軸的中點對齊
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分
space-around：每根軸線兩側的間隔都相等

3-3 項目屬性

項目的屬性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

（1）order（屬性定義項目的排列順序。數值越小，排列越靠前，默認爲 0）

（2）flex-grow（屬性定義項目的放大比例，默認爲 0，即若是存在剩餘空間，也不放大）

（3）flex-shrink（屬性定義了項目的縮小比例，默認爲 1，即若是空間不足，該項目將縮小）

（4）flex-basis(屬性定義了在分配多餘空間以前，項目佔據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲 auto，即項目的原本大小,也能夠設置 xx px,項目將佔據固定空間)

（5）flex（屬性是 flex-grow, flex-shrink 和 flex-basis 的簡寫，默認值爲 0 1 auto。後兩個屬性可選）

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

（6）align-self（屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋 align-items 屬性。默認值爲 auto，表示繼承父元素的 align-items 屬性，若是沒有父元素，則等同於 stretch）

4.使元素消失的方法

visibility:hidden 該元素隱藏起來了，但不會改變頁面佈局，可是不會觸發該元素已經綁定的事件
display:none 把元素隱藏起來，而且會改變頁面佈局，能夠理解成在頁面中把該元素刪掉
z-index=-1 把元素遮蓋起來，而且不會改變頁面佈局，能夠理解被其它元素壓在下面了
opacity：0, 該元素隱藏起來了，但不會改變頁面佈局，而且，若是該元素已經綁定了一些事件，如 click 事件也能觸發 ，經常使用於設置圖片透明度爲 0 ，而後加個點擊事件，點擊上傳文件
position: absolute; 設置一個很大的 left 負值定位，使元素定位在可見區域以外；
transform: scale(0); 將一個元素設置爲縮放無限小，元素將不可見，元素原來所在的位置將被保留；
< div hidden="hidden" > HTML5 屬性,效果和 display:none;相同，但這個屬性用於記錄一個元素的狀態；
height: 0 ; 將元素高度設爲 0 ，並消除邊框；
filter: blur(0) ; CSS3 屬性，括號內的數值越大，圖像高斯模糊的程度越大，到達必定程度可以使圖像消

奇淫技巧：隱藏透明區域外，縮放壓住高度0

rgba 和 opacity 透明有何不一樣:

rgba()只做用於元素自身的顏色或背景色，對元素的內容沒有影響。
opacity 在做用於元素自身的顏色或背景色的同時，也做用於元素內的內容的透明度。

5. css 盒模型

css 中，有兩種盒模型，經過 box-sizing 切換：

當設置爲 content-box 時，屬於標準盒模型，在設置寬度和高度時，只包含 content，不包含 padding 和 border；
而設爲 border-box 時，屬於 IE 盒模型，設置寬度和高度時，包含 content、padding 和 border。

標準（W3C）盒子模型：width = 內容寬度（content） + border + padding + margin
低版本IE盒子模型： width = 內容寬度（content + border + padding）+ margin

6. 選擇器怎麼解析的

樣式系統從關鍵選擇器開始，從右向左依次查找，若是出現未匹配的狀況會放棄規則，不然會左移直至匹配完成。
所以在寫樣式時，應儘可能選擇 ID 選擇器或 class 選擇器做爲關鍵選擇器，而且減小樣式的層級，下降消耗。

7. 選擇器

7-1 選擇器分類

id 選擇器(#myid)
類選擇器(.myclass)
標籤選擇器(div, h1,p)
通配符選擇器(*)
相鄰選擇器（h1 + p）
子選擇器(ul > li)
後代選擇器(li a)
屬性選擇器(a[rel="external"])
僞類選擇器(:link, :visited, :active , :hover, :before, :after)

7-2 選擇器優先級

選擇器類別	說明	權重	權值
!important	強制使用此樣式	權重最高	權值最高
行內樣式	style = ""	（1.0.0.0）	1000
id 選擇器	#id	（0.1.0.0）	100
類選擇器	.id	（0.0.1.0）	10
元素選擇器	div	（0.0.0.1）	1

通配符 > 繼承 > 瀏覽器默認

7-3 css3 新增的僞類

:first-child 匹配父元素中第一個子元素
E:first-child 它表示：只要 E 元素是它的父級的第一個子元素，就選中。它須要同時知足兩個條件，一個是第一個子元素，另外一個是這個子元素恰好是E。
如下 2 中解讀都是錯誤的:
- 誤解一：認爲 E:first-child 選中 E 元素的第一個子元素。
- 誤解二：認爲 E:first-child 選中 E 元素的父元素的第一個 E 元素。
:last-child 匹配父元素中最後一個子元素
:nth-child(n) 匹配父元素中第 n 個子元素（n 能夠是一個數字，一個關鍵字，或者一個公式）
- 參數 n 時選中全部行
- 參數爲 n+i 時表示從第 i 行開始下面的都被選中，如 n+3，從第 3 行開始下面所有選中
- 參數爲-n+i 時表示選中前 i 個元素，如-n+6 表示選中前 6 個
- 2n 表示 2 的倍數行被選中，選中偶數行
- 2n+1 表示選中奇數行
- 3n 表示每一個 3 行選中一次
- odd 表示奇數，even 表示偶數
:nth-last-child(n) 匹配倒數第 n 個同級兄弟元素
:nth-of-type(n) 匹配同類型中的第 n 個同級兄弟元素
:root 根元素
:not(selector)

7-4 選擇器如何工做的

從右向左依次查詢

8. 僞類和僞元素的區別

二者都是描述不在文本流中的東西。

其中僞類用單冒號表示，當元素處於某種狀態時，爲該元素添加樣式，如 a 標籤的 hover；
僞元素用雙冒號表示，爲了兼容老瀏覽器，有時候也會用單冒號表示，做用是建立不在文本流中的元素，併爲其添加樣式，如 ::before，在指定元素前添加元素。

9. BFC

BFC 指的是格式化上下文

9-1 當一個元素造成 BFC 後:

其內部元素的佈局不會影響外部元素
外部元素的佈局不會影響內部元素。

9-2 如何造成 BFC

根元素
浮動元素：float 除 none 之外的值
絕對定位元素：position (absolute、fixed)
display 爲 inline-block、table-cells、flex
表格類元素
overflow 除了 visible 之外的值 (hidden、auto、scroll)【最經常使用】

9-3 BFC 的原理/BFC 的佈局規則

BFC 內部的子元素，在垂直方向，邊距會發生重疊。
BFC 在頁面中是獨立的容器，外面的元素不會影響裏面的元素，反之亦然。
BFC 區域不與旁邊的 float box 區域重疊。（能夠用來清除浮動帶來的影響）。
計算 BFC 的高度時，浮動的子元素也參與計算。

9-4 BFC 的應用

解決 margin 重疊
當父元素和子元素髮生 margin 重疊時，解決辦法：給子元素或父元素建立 BFC
BFC 區域不與 float 區域重疊
清除浮動

10. 定位

10-1 基本含義

相對定位，將元素的 position 設爲 relative，元素相對於自身 content box 定位，仍佔據原來位置空間；
絕對定位，將元素的 position 設爲 absolute，元素相對於第一個 position 不爲 static 的祖先元素的 padding box 定位，元素不佔據原來位置空間；
固定定位，將元素的 position 設爲 fixed，元素相對於瀏覽器窗口頂部定位，不佔據原來位置空間

10-2 水平居中

通用方案：

行內元素：父元素是塊級元素，給父元素設置 text-align:center，父元素不是塊級元素，先將父元素設置爲塊級元素，再給父元素設置 text-align:center
圖片：給圖片設置 clear:both; display:block; margin:auto;

詳細方案：

方案一：
1. 寬度定，須要誰居中，就給誰設置 margin:0 auto;
2. 寬度不定，默認子元素寬度與父元素寬度同樣，給子元素設置 display:inline-block;或 display:inline,將其轉換成行內塊級元素/行內元素，給父元素設置 text-align:center
方案二：使用定位屬性
1. 子元素設置絕對定位，父元素設置相對定位，left: 50%; margin-left: 50px(子元素的寬度的一半--寬度定),或者 transform: translateX(-50%)(寬度不定)
方案三：使用 flexbox 佈局實現（寬度定不定都行）
1. 父元素設置 display: flex; justify-content: center;

10-3 垂直居中

單行的行內元素：設置 行高=父元素的高
多行的行內元素：父元素設置 display:table-cell; vertical-align:middle（行級、塊級、圖片都通殺）
塊級元素：
1. 方案一：子元素設置絕對定位，父元素設置相對定位，子元素設置：top:50%而且 margin-top: 子元素高度的一半(高度定)，或者transform:translateY(-50%);(高度不定)
2. 方案二：flex 佈局，給父元素設置 display:flex; align-items:center;（行級、塊級、圖片都通殺）

10-4 水平垂直居中

已知高度和寬度的元素

方案一：子元素設置絕對定位，父元素設置相對定位，子元素設置 left:0; right:0; top:0; bottom:0; margin:auto
方案二：子元素設置絕對定位，父元素設置相對定位，子元素設置 top:50%;left:50%(左上角垂直居中)，margin-top:-子元素高的一半,margin-left:-子元素寬的一半

未知高度和寬度的元素

方案一：（定位屬性）子元素設置絕對定位，父元素設置相對定位，子元素設置 top:50%;left:50%(左上角垂直居中)，transform:translate(-50%,-50%)(根據自身定位實現偏移)
方案二：（flex 佈局）父元素定義 display:flex; justify-content:center; align-items:center;

10-4 浮動

清除浮動的方法：

父級盒子定義高度（height）;
最後一個浮動元素後面加一個 div 空標籤，而且添加樣式 clear: both;
包含浮動元素的父級標籤添加樣式 overflow 爲 hidden/both;
父級 div 定義 zoom;

最好的方法：

clearfix:after{/*僞元素是行內元素 正常瀏覽器清除浮動方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;

那麼,clear:both;到底起了什麼做用？？？

clear 是 CSS 中的定位屬性，規定元素的哪一側不容許其餘元素浮動。那麼 clear:both 就是規定在左右兩側均不容許元素浮動。
clear 屬性只能在塊級元素上其做用，這就是清除浮動樣式中 display:block 的做用。
另外 visibility: hidden; height: 0; 只要 content 的值爲空, 寫不寫都無所謂。

11. 佈局

11-1 兩側定寬，中間自適應

浮動 左側設置左浮動，右側設置右浮動便可，中間會自動地自適應。
絕對定位 左側設置爲絕對定位， left：0px。右側設置爲絕對定位， right：0px。中間設置爲絕對定位，left 和 right 都爲 300px，便可。中間的寬度會自適應。
flexbox佈局 將左中右所在的容器設置爲 display: flex，設置兩側的寬度後，而後讓中間的 flex = 1，便可。
表格佈局 設置整個容器的寬度爲 100%，設置三個部分均爲表格(display:table-cell)，而後左邊的單元格爲 300px，右邊的單元格爲 300px，便可。中間的單元格會自適應。
網格佈局grid 設置容器爲網格佈局，寬度爲 100%，設置網格爲三列，並設置每列的寬度，便可。

12. margin 重疊

margin 重疊的規則

當兩個 margin 都是正值的時候，取二者的最大值；
當 margin 都是負值的時候，取的是其中絕對值較大的，而後，從 0 位置，負向位移；
當有正有負的時候，先取出負 margin 中絕對值中最大的，而後，和正 margin 值中最大的 margin 相加,即取和的絕對值

margin 重疊主要有四種狀況的解決：

相鄰兄弟元素 margin-bottom 和 margin-top 重疊。能夠將其中一個設爲 BFC；
父子元素 margin-top 重疊。能夠給父元素添加 border-top | padding-top 來分隔父子元素，也可將父元素設爲 BFC；
父元素高度 auto，父子元素 margin-bottom 重疊，在第二種狀況的解決方案上，還能夠給父元素設置 height、min-height、max-height；
無內容元素自身 margin-top 與 margin-bottom 重疊。能夠給元素設置 border | padding | height

13. 用 css 畫三角形

.triangle {
  width: 0;
  height: 0;
  border-width: 100px;
  border-style: solid;
  border-color: tomato transparent transparent transparent;  //3邊透明，一邊不透明
}

奇淫技巧--記住透明邊框的數量：3點一線 (總共 4 條線，有 3 條變成點了，即變透明瞭，另一條邊仍是線，即不透明)

14. 實現單行和多行文本溢出添加省略號

單行溢出：

p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行溢出：

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;  //3行溢出

15. 常見單位

px：絕對單位，頁面按精確像素展現
em：相對單位，基準點爲父節點字體的大小，若是自身定義了 font-size 按自身來計算（瀏覽器默認字體是 16px），整個頁面內 1em 不是一個固定的值
rem：相對單位，可理解爲」root em」, 相對根節點 html 的字體大小來計算，CSS3 新加屬性，chrome/firefox/IE9+支持
vw：viewpoint width，視窗寬度，1vw 等於視窗寬度的 1%
vh：viewpoint height，視窗高度，1vh 等於視窗高度的 1%
vmin：vw 和 vh 中較小的那個
vmax：vw 和 vh 中較大的那個
%:百分比

16. CSS 有哪些屬性能夠繼承？

字體系列屬性：如 font，font-family，font-size，font-weight，font-style
文本系列屬性：如 color，text-indent(文本縮進)，text-align(文本水平對齊)，line-height，word-spacing(字間隔)
元素可見性：visibility
表格佈局屬性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
列表屬性：list-style-type、list-style-image、list-style-position

17. CSS3 有哪些新特性？

選擇器（E:last-child 匹配父元素的最後一個子元素E。）;
圓角（border-raduis）;
多列布局（multi-column layout）;
陰影（shadow）和反射（reflect）;
文字特效（text-shadow）;
文字渲染（text-decoration）;
線性漸變（gradient）;
旋轉（rotate）/縮放（scale）/傾斜（skew）/移動（translate）;
媒體查詢（@media）;
RGBA 和透明度 ;
@font-face 屬性;
多背景圖 ;
盒子大小;

奇淫技巧：媒體查詢盒模型，旋轉圓角變（漸變）陰影

18. 爲何要初始化 CSS 樣式？

由於瀏覽器的兼容問題，不一樣瀏覽器對標籤的默認值是不一樣的，若是沒有對瀏覽器的 CSS 初始化，會形成相同頁面在不一樣瀏覽器的顯示存在差別。

19.CSS 優化、提升性能的方法有哪些？

多個 css 可合併，並儘可能減小 http 請求
屬性值爲 0 時，不加單位（margin: 0）
將 css 文件放在頁面最上面（CSS會阻塞渲染，在CSS文件請求、下載、解析完成以前，瀏覽器將不會渲染任何已處理的內容。若是放在下面，當html結構渲染完之後，解析css，又會從新渲染一次，致使頁面閃動）
避免後代選擇符，避免鏈式選擇符過長
使用緊湊的語法（margin: 8px 6px 7px 5px; ）
使用語義化命名，便於維護（屬於優化）
儘可能少的使用!impotrant，能夠選擇其餘選擇器
遵照盒子模型規則

奇淫技巧：合併簡寫縮短鏈，語義遵照盒模型

20. 迴流（重排）和重繪區別？

迴流（重排），reflow:當 render tree 中的一部分（或所有）由於元素的規模尺寸，佈局，隱藏等改變時而須要從新構建；

重繪（repaint）:當 render tree 中的一些元素須要更新屬性，而這些屬性隻影響元素的外觀，風格，而不會影響佈局時，稱其爲重繪，例如顏色改變等。

注意：每一個頁面至少須要引起一次重排+重繪，並且重排（迴流）必定會引起重繪。

觸發重排（迴流）的條件：

增長或者刪除可見的 dom 元素；
元素的位置發生了改變；
元素的尺寸發生了改變，例如邊距，寬高等幾何屬性改變；
內容改變，例如圖片大小，字體大小改變等；
頁面渲染初始化；
瀏覽器窗口尺寸改變，例如 resize 事件發生時等；

奇淫技巧：迴流理解爲流動，流動天然會引發佈局的變更；重繪能夠理解爲表層繪畫，那麼只是外觀的改變。

21.border:none 與 border:0 的區別？

首先是性能差別：

{border：0;}: 把 border 設置爲 0 像素，雖然在頁面上看不到，可是按 border默認值理解，瀏覽器依然對 border-width/border-color 進行了渲染，即已經佔用內存值；
{border：none；}被理解爲 border-style:none。boder:0;比 border:none多渲染了一個border-width:0,也就是爲何 border:none 的性能要比 border:0高；

兼容性差別：

{border:none;}當 border 爲「none」時彷佛對 IE6/7 無效,邊框依然存在,當 border 爲「0」時，全部瀏覽器都一致把邊框隱藏。

21. BFC、IFC、GFC、FFC 是什麼？

Block formatting context(BFC)--塊級格式化上下文；
Inline formatting context(IFC)--內聯格式化上下文；
Grid formatting context(GFC)--網格佈局格式化上下文；
Flex formatting context(FFC)--自適應格式化上下文

22. CSS 屬性 overflow 屬性定義溢出元素內容區的內容會如何處理?

scroll: 必定會出滾動條；
auto: 子元素內容大於父元素時出現滾動條；
visible: 溢出的內容出如今父元素以外；
hidden: 溢出隱藏；

23. style 標籤寫在 body 先後的區別？

通常狀況下，頁面加載時自上而下的。
將 style 標籤至於 body 以前，爲的是先加載樣式。
如果寫在 body 標籤以後，因爲瀏覽器以逐行方式對 html 文檔進行解析，當解析到寫在文檔尾部的樣式表時，
會致使瀏覽器中止以前的渲染，等待加載且解析樣式表完成以後會從新渲染，在 windows 的 IE 下可能會出現 FOUC 現象（頁面閃爍）。

24.垂直百分比是相對於容器高嗎？

通常來講，子元素的百分比單位都是以父元素爲依據。
可是 margin 和 padding 例外。元素的 height 是相對於容器的高度，可是元素的 margin 和 padding 是相對於容器的寬度。

25.clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop 區別

網頁可見區域高：document.body.clientHeight
網頁正文全文高：document.body.scrollHeight
網頁可見區域高（包括邊線的高）：document.body.offsetHeight
網頁被捲去的高：document.body.scrollTop
屏幕分辨率高：window.screen.height

每一個 HTML 元素都具備clientHeight offsetHeight scrollHeight offsetTop scrollTop 這 5 個和元素高度、滾動、位置相關的屬性，單憑單詞很難搞清楚分別表明什麼意思之間有什麼區別。

經過閱讀它們的文檔總結出規律以下：

clientHeight和offsetHeight屬性和元素的滾動、位置沒有關係它表明元素的高度，其中：

(1)clientHeight：

包括padding但不包括border、水平滾動條、margin的元素的高度。對於 inline的元素這個屬性一直是 0，單位 px，只讀元素。

(2)offsetHeight：

包括padding、border、水平滾動條，但不包括margin的元素的高度。對於inline的元素這個屬性一直是 0，單位 px，只讀元素。

接下來討論出現有滾動條時的狀況：

當本元素的子元素比本元素高且overflow=scroll時，本元素會 scroll，這時：

(3)scrollHeight:

由於子元素比父元素高，父元素不想被子元素撐的同樣高就顯示出了滾動條，在滾動的過程當中本元素有部分被隱藏了，scrollHeight包括當前不可見部分的元素的高度。
可見部分的高度其實就是 clientHeight，也就是scrollHeight>=clientHeight恆成立。在有滾動條時討論 scrollHeight 纔有意義，在沒有滾動條時 scrollHeight==clientHeight 恆成立。單位 px，只讀元素。

(4)scrollTop:

在有滾動條時，滾動條向下滾動的距離也就是元素頂部被遮住部分的高度。在沒有滾動條時scrollTop==0恆成立。單位 px，可讀可設置。。

(5)offsetTop:

當前元素頂部距離最近父元素頂部的距離,和有沒有滾動條沒有關係。單位 px，只讀元素。

26. 在一個未知寬度的父元素內如何建立一個等邊正方形

1. 利用 padding

<html>
    <head>
        <meta charset="utf-8" />
        <title>新標籤頁</title>
    </head>
    <script></script>

    <body>
        <div class="content">
            <div class="son">包裹內容</div>
        </div>
    </body>
        <style>
        .content {
            /* width: 100px;
            height: 100px; */
        }
        .son {
            width: 10%;
            padding-bottom: 10%; /* padding百分比相對父元素寬度計算 */
            height: 0;
            border: 1px solid red;
        }
    </style>
</html>

效果以下：

效果圖

2.padding-bottom+:after+absolute

<html>
    <head>
        <meta charset="utf-8" />
        <title>新標籤頁</title>
    </head>
    <body>
        <div class="content">
            <div class="son">包裹內容</div>
        </div>
    </body>
    <style>
        .content {
            width: 10%;
            background: #ccc;
        }

        .content:after {
            content: '';
            display: block;
            padding-bottom: 100%;
        }

        .son {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
    <script></script>
</html>

效果以下：

27. css動畫

屬性	含義
animation（動畫）	用於設置動畫屬性，他是一個簡寫的屬性，包含6個屬性
transition（過渡）	用於設置元素的樣式過分，和animation有着相似的效果，但細節上有很大的不一樣
transform（變形）	用於元素進行旋轉、縮放、移動或傾斜，和設置樣式的動畫並無什麼關係，就至關於color同樣用來設置元素的「外表」
translate（移動）	translate只是transform的一個屬性值，即移動。