css問題整理（持續(xù)更新中...）

1. css權(quán)重戈二、優(yōu)先級

權(quán)重

內(nèi)聯(lián)樣式
id選擇器
class、屬性選擇器（eg：[title]{ color:blue;}）喳资、偽類(:first-child,:active,:disabled等)
元素選擇器觉吭、偽元素（::before,::after,::first-letter等）
通配選擇器（eg：*{}）

優(yōu)先級

權(quán)重相同，寫在后面的覆蓋前面的
使用 !important 達(dá)到最大優(yōu)先級仆邓，都使用 !important 時鲜滩，權(quán)重大的優(yōu)先級高

2. 用css2和css3分別寫一下垂直居中和水平居中

css2

水平居中：

div + margin: auto;
span + text-align

垂直居中

使用 position 然后 left/top 和 margin 的方式垂直居中（已知寬高和未知寬高）
使用 position + transform
使用 display: table-cell;

css3

水平垂直居中 flex

3. BFC和IFC介紹及應(yīng)用

4. opacity:0、visibility:hidden节值、display:none區(qū)別及應(yīng)用

display:none

DOM 結(jié)構(gòu)：瀏覽器不會渲染 display 屬性為 none 的元素，不占據(jù)空間搞疗；
事件監(jiān)聽：無法進(jìn)行 DOM 事件監(jiān)聽嗓蘑；
性能：動態(tài)改變此屬性時會引起重排，性能較差匿乃；
繼承：不會被子元素繼承桩皿，畢竟子類也不會被渲染；

visibility: hidden

DOM 結(jié)構(gòu)：元素被隱藏幢炸，但是會被渲染不會消失泄隔，占據(jù)空間；
事件監(jiān)聽：無法進(jìn)行 DOM 事件監(jiān)聽宛徊；
性能：動態(tài)改變此屬性時會引起重繪佛嬉，性能較高逻澳；
繼承：會被子元素繼承，子元素可以通過設(shè)置 visibility: visible;來取消隱藏暖呕；

opacity: 0

DOM 結(jié)構(gòu)：透明度為 100%赡盘，元素隱藏，占據(jù)空間缰揪；
事件監(jiān)聽：可以進(jìn)行 DOM 事件監(jiān)聽；
性能：提升為合成層葱淳，不會觸發(fā)重繪钝腺，性能較高；
繼承：會被子元素繼承,且赞厕，子元素并不能通過 opacity: 1 來取消隱藏艳狐；

5. 兩欄布局和三欄布局

6. 頁面防抖

Q：一個寬度百分百，高度自適應(yīng)的圖片皿桑，在網(wǎng)速慢的情況下加載過程中會出現(xiàn)抖動的問題（未加載圖片前容器的高度為0毫目，圖片加載完成后下面的內(nèi)容會被擠下去）
A：如果是圖片有固定高度，就不會出現(xiàn)加載抖動诲侮。但一般情況下镀虐，為了使圖片不被拉伸，高度一般設(shè)為自適應(yīng)沟绪，那么為了防止加載抖動刮便，我們需要給圖片提前占個位，這里使用的是css的padding-bottom百分比進(jìn)行占位绽慈。

例子：css div 垂直水平居中恨旱，并完成 div 高度永遠(yuǎn)是寬度的一半（寬度可以不指定）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      .outer {
        width: 400px;
        height: 100%;
        background: blue;
        margin: 0 auto;
        display: flex;
        align-items: center;
      }

      .inner {
       /* position: relative;*/
        width: 100%;
        height: 0;
        padding-bottom: 50%;
        background: red;
      }

      .box {
       /* position: absolute;*/
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">
        <div class="box">hello</div>
      </div>
    </div>
  </body>
</html>

7. 使網(wǎng)頁呈現(xiàn)哀悼模式

在相應(yīng)的節(jié)日里，需要整個頁面置灰坝疼，早body標(biāo)簽加上filter:grayscale(1)使網(wǎng)頁呈現(xiàn)哀悼模式

body{
  filter: grayscale(1);
}

8. 文本選中樣式及禁止選中

文本選中

image.png

<p class="content">為了保障您的權(quán)益搜贤，當(dāng)您在相關(guān)頁面上點(diǎn)擊確認(rèn)的時候，例如钝凶，您點(diǎn)擊“開</p>

.content::selection {
  color: #ffffff; 
  background-color: #ff4c9f;
}

禁止選中

.content::selection {
  user-select: none;
}

9. 解決IOS滾動條卡頓

body,html{   
  -webkit-overflow-scrolling: touch;
}

10. not選擇器

列表里面最后一行不需要border-bottom

ul> 
  <li>     
    <span>內(nèi)容</span>  
  </li>  
  <li>       
    <span>內(nèi)容</span>   
  </li>  
  <li>       
    <span>內(nèi)容</span>  
  </li>  
</ul>

li:not(:last-child){
  border-bottom: 1px solid #ebedf0;
}

11. image圖片底部有間距

1仪芒、給父元素設(shè)置font-size: 0
2、給img設(shè)置display: block
3耕陷、給img設(shè)置vertical-align: bottom
4桌硫、給父元素設(shè)置line-height: 5px;

12.使用flex布局實現(xiàn)智能固定底部

當(dāng)內(nèi)容不夠一屏?xí)r，底部按鈕固定在底部啃炸，當(dāng)內(nèi)容足夠多時铆隘，底部按鈕隨著內(nèi)容往下移動。