css-小知識點
一，兄弟選擇器(+與~)
- （div + p） 緊接在另一個元素後的元素，是單個的，而且二者有相同的父元素
- （div ~ p） 也叫兄弟選擇器，表示某元素後所有同級的指定元素
二，偽類和偽元素區別
- 偽類值一種狀態 比如:hover :checked等
- 偽元素是一個真實存在的元素，他可以有樣式有內容 比如 ::after
實際上 css3 為了區分兩者，已經明確規定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。對於CSS2之前已有的偽元素，比如:before，單冒號和雙冒號的寫法::before作用是一樣的
三，選擇器的權重
!important(權重infinity) > 行內樣式(權重1000) > ID 選擇器(權重100) > (類選擇器 | 屬性選擇器 | 偽類選擇器 )(權重10) > 元素選擇器(權重1) > \*(權重0)
四，瀏覽器解析css
CSS 中，瀏覽器查詢元素是通過選擇權從後往前找的， 這樣做的目的是加快 CSS 解析速度，從後往前，排除法
- 因為所有樣式規則可能數量很大，而且絕大多數不會匹配到當前的 DOM 元素（因為數量很大所以一般會建立規則索引樹），所以有一個快速的方法來判斷「這個 selector 不匹配當前元素」就是極其重要的。
- 如果正向解析，例如「div div p em」，我們首先就要檢查當前元素到 html 的整條路徑，找到最上層的 div，再往下找，如果遇到不匹配就必須回到最上層那個 div，往下再去匹配選擇器中的第一個 div，回溯若干次才能確定匹配與否，效率很低。
- 逆向匹配則不同，如果當前的 DOM 元素是 div，而不是 selector 最後的 em，那隻要一步就能排除。只有在匹配時，才會不斷向上找父節點進行驗證。
- 但因為匹配的情況遠遠低於不匹配的情況，所以逆向匹配帶來的優勢是巨大的。同時我們也能夠看出，在選擇器結尾加上「*」就大大降低了這種優勢，這也就是很多優化原則提到的儘量避免在選擇器末尾新增萬用字元的原因。
五，盒模型
盒模型有兩種， IE 怪異盒子模型、W3C 標準盒子模型；
盒模型是由： 內容(content)、內邊距(padding)、邊框(border)、外邊距(margin) 組成的。
標準模型的寬高是指的 content 區寬高；(box-sizing: content-box)
IE 盒模型的寬高是指的 content+padding+border 的寬高。(box-sizing: border-box)
[W3C盒模型]
[IE盒模型]
六，行高的構成
行高是由 line-box 組成的
line-box 是由一行裡的 inline-box 組成的
inline-box 中最高的那個，或字型最大的拿個決定行高
七，inline-block 的間隙
兩個並列的 inline-block 中間會有一條裂縫，這個的原因是兩個標籤之間有空格，瀏覽器把這些空格當成文字中空格，所以這兩個塊中間多少有間隙。
解決辦法：
1. 刪除兩個標籤間的空格，但是這樣 html 排版不好
2. 容器元素 font-size: 0 然後再在裡面再重新設定字型大小
八，你對 line-height 是如何理解的？
- line-height 指一行字的高度，包含了字間距，實際上是下一行基線到上一行基線距離
- 如果一個標籤沒有定義 height 屬性，那麼其最終表現的高度是由 line-height 決定的
- 一個容器沒有設定高度，那麼撐開容器高度的是 line-height 而不是容器內的文字內容
- 把 line-height 值設定為 height 一樣大小的值可以實現單行文字的垂直居中
- line-height 和 height 都能撐開一個高度，height 會觸發 haslayout（一個低版本 IE 的東西），而 line-height 不會
九，line-height 三種賦值方式有何區別？（帶單位、純數字、百分比）
- 帶單位：px 是固定值，而 em 會參考父元素 font-size 值計算自身的行高
- 純數字：會把比例傳遞給後代。例如，父級行高為 1.5，子元素字型為 18px，則子元素行高為 1.5 \* 18 = 27px
- 百分比：將計算後的值傳遞給後代
參考：https://www.cnblogs.com/xxm980617/p/10885313.html
十，為什麼img標籤圖片下方有縫隙
因為 img 也相當於一個 inline 的元素， inline 就要遵守行高的構成，它會按照 base 基線對齊，基線對齊的話那麼它就會和底線間有一個縫隙。
如何解決： 因為它會遵守文字對齊方案，那麼就把圖片的對齊方式修改為 `vertical-align: bottom`。或者讓他`display: block`，這樣圖片雖然會換行，但是沒有間隙了。
十一，關於文字折行
①overflow-wrap 用來說明當一個不能被分開的字串太長而不能填充其包裹盒時，為防止其溢位，瀏覽器是否允許這樣的單詞中斷換行
word-wrap | normal
normal行只能在正常的單詞斷點處中斷。（例如兩個單詞之間的空格）。break-word表示如果行內沒有多餘的地方容納該單詞到結尾，則那些正常的不能被分割的單詞會被強制分割換行。
②word-break
break-all | normal
break-all允許在單詞內換行
③white-space
nowrap 文字不換行，直到遇到 <br> 標籤為止
十二，文字溢位顯示省略號
單行
```css
overflow: hidden;
text-overflow: ellipsis;
white-space: no-wrap;
多行
```css
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /*將物件作為彈性伸縮盒子模型顯示*/
-webkit-line-clamp: 3; /*用來限制在一個塊元素顯示的文字的行數*/
-webkit-box-orient: vertical; /*設定或檢索伸縮盒物件的子元素的排列方式*/
十三，display: none; 與 visibility: hidden; 的區別
結構：
- display:none
- 會讓元素完全從渲染樹中消失，渲染的時候不佔據任何空間, 不能點選，
- visibility: hidden
- 不會讓元素從渲染樹消失，渲染元素繼續佔據空間，只是內容不可見，不能點選
- opacity: 0
- 不會讓元素從渲染樹消失，渲染元素繼續佔據空間，只是內容不可見，可以點選
繼承
- display: none
- 非繼承屬性:父元素都不在了，子元素自然也就不會顯示了
- opacity: 0
- 非繼承屬性:不能通過設定子元素opacity: 1使其重新顯示
- visibility: hidden
- 繼承屬性，子孫節點消失由於繼承了 hidden，通過設定 visibility: visible;可以讓子孫節點顯式。
效能
- display:none
- 修改元素會造成文件迴流。讀屏器不會讀取 display: none 元素內容，效能消耗較大
- visibility:hidden
- 修改元素只會造成本元素的重繪,效能消耗較少。讀屏器讀取 visibility: hidden 元素內容
- opacity: 0
- 修改元素會造成重繪，效能消耗較少
過渡動畫
transition對於display肯定是無效的，大家應該都知道；
transition對於visibility 和opacity 是有效的；
相同點： 它們都能讓元素不可見、他們都依然可以被 JS 所獲取到
十四，外邊距摺疊
外邊距重疊就是 margin-collapse
相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以結合成一個單獨的外邊距。 這種合併外邊距的方式被稱為摺疊，結合而成的外邊距稱為摺疊外邊距
摺疊結果遵循下列計算規則：
- 兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值
- 兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值
- 兩個外邊距一正一負時，摺疊結果是兩者的相加的和
新手在做導航欄的時候發現頁面整體掉下來一截就是這個原因。
傳送：外邊距摺疊詳解
十五，css單位
1. px 絕對單位。傳統上一個畫素對應於計算機螢幕上的一個點，而對於高清屏則對應更多。
2. % 父元素**寬度**的比例。
如果對 html 元素設定 font-size 為百分比值，則是以瀏覽器預設的字型大小 16px 為參照計算的（所有瀏覽器的預設字型大小都為 16px），如 62.5%即等於 10px（62.5% \* 16px = 10px）。
3. em 相對單位。 不同的屬性有不同的參照值。
對於字型大小屬性（font-size）來說，em 的計算方式是相對於父元素的字型大小；
border, width, height, padding, margin, line-height）在這些屬性中，使用 em 單位的計算方式是參照該元素的 font-size，1em 等於該元素設定的字型大小。同理如果該元素沒有設定，則一直向父級元素查詢，直到找到，如果都沒有設定大小，則使用瀏覽器預設的 字型大小。
4. rem 是相對於根元素 html 的 font-size 來計算的，所以其參照物是固定的。
好處：rem 只需要修改 html 的 font-size 值即可達到全部的修改，即所謂的牽一髮而動全身。
5. vw, vh, vmin, vmax 相對單位，是基於視窗大小（瀏覽器用來顯示內容的區域大小）來計算的。
vw：基於視窗的寬度計算，1vw 等於視窗寬度的百分之一
vh：基於視窗的高度計算，1vh 等於視窗高度的百分之一
vmin：基於 vw 和 vh 中的最小值來計算，1vmin 等於最小值的百分之一
vmax：基於 vw 和 vh 中的最大值來計算，1vmax 等於最大值的百分之一
十六，css優化，提升效能的方法有哪些？
- 多個 css 合併，儘量減少 HTTP 請求
- css 雪碧圖
- 抽象提取公共樣式，減少程式碼量
- 選擇器優化巢狀，儘量避免層級過深 （用‘>’替換‘ ’）
- 屬性值為 0 時，不加單位
- 壓縮 CSS 程式碼 （刪除空格、去掉換行、去掉過剩分號等）
- 避免使用 [CSS 表示式]
- 它們要計算成千上萬次並且可能會對你頁面的效能產生影響。
十七，DOM 層級順序與 z-index
十八，link與@import的區別
- link 是 HTML 方式， @import 是 CSS 方式
- link 最大限度支援並行下載，@import 過多巢狀導致序列下載，出現 FOUC
- link 可以通過 rel="alternate stylesheet" 指定候選樣式
- 瀏覽器對 link 支援早於@import ，可以使用 @import 對老瀏覽器隱藏樣式
- @import 必須在樣式規則之前，可以在 css 檔案中引用其他檔案
- 總體來說：link 優於@import
十九，css有哪些繼承屬性
- font
- word-break
- letter-spacing
- text-align
- text-rendering
- word-spacing
- white-space
- text-indent
- text-transform
- text-shadow
- line-height
- color
- visibility
- cursor
二十，css3新特性？
- 新增選擇器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
- 彈性盒模型 display: flex;
- 多列布局 column-count: 5;
- 媒體查詢 @media (max-width: 480px) {.box: {column-count: 1;}}
- 個性化字型 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
- 顏色透明度 color: rgba(255, 0, 0, 0.75);
- 圓角 border-radius: 5px;
- 漸變 background:linear-gradient(red, green, blue);
- 陰影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
- 倒影 box-reflect: below 2px;
- 文字裝飾 text-stroke-color: red;
- 文字溢位 text-overflow:ellipsis;
- 背景效果 background-size: 100px 100px;
- 邊框效果 border-image:url(bt_blue.png) 0 10;
- 平滑過渡 transition: all .3s ease-in .1s;
- 動畫 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
- 變形 transform
- 旋轉 transform: rotate(20deg);
- 傾斜 transform: skew(150deg, -10deg);
- 位移 transform: translate(20px, 20px);
- 縮放 transform: scale(.5);