前端面試（個人收藏總結）CSS篇

簡單卟容易發表於2018-04-06
前端面試CSS

前端面試（個人收藏總結）html篇

前端面試（個人收藏總結）javascript篇（一）

前端面試（個人收藏總結）javascript篇（二）

文字不換行

    /*單行文字*/
    .single-line{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /*多行文字（注：目前僅webkit核心支援）*/
    .multi-row{
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        /* 英文情況換行 */
        word-wrap:break-word;
        word-break:break-all;
    }
    
複製程式碼

CSS樣式優先順序

!important > 行內樣式 > ID選擇器 > 類選擇器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性

  • 權重計算
  • 後寫優先

雪碧圖的作用

  • 減少HTTP請求數，提高載入效能
  • 減少圖片大小

display:inline-block的間距問題

由於空白字元的原因

解決：font-size: 0

如何清除浮動

  • overflow:hidden（原理：BFC）
  • ::after{clear:both}
  • .clear{clear:both}

如何適配移動端

viewport、 rem、 media查詢、 響應式設計：隱藏、折行、自適應

頁面三欄佈局實現方式

  • 浮動佈局
  • 定位佈局
  • flexbox佈局
  • 表格佈局
  • 網格佈局

盒子垂直水平居中實現方式

  • 定位 + margin：
 position: absolute; left: 50%; top: 50%; margin-left:-自身一半寬度; margin-top: -自身一半高度; 
複製程式碼
  • 定位 + transform：
 position: relative / absolute;left: 50%; top: 50%;transform: translate(-50%, -50%);  
複製程式碼
  • 表格佈局：
父級 display: table-cell; vertical-align: middle;  子級 margin: 0 auto; 
複製程式碼
  • flex 佈局：
父級 display: flex;align-items: center;justify-content: center; 
複製程式碼
  • 網格佈局

參考：github.com/Sweet-KK/cs…

關於CSS盒模型

標準模型：寬高 = content

IE模型：寬高 = border+padding+content

邊距重疊（塌陷）問題

上下2個div分別設定margin-bottom和margin-top，margin值合併取最大值。父div巢狀子div並設子div寬高margin-top，父div=子div寬高並會margin值合併取最大值。

解決原理：BFC

解決辦法：overflow：hidden

什麼是格式化上下文

格式化上下文，它指的是具有某種CSS格式化規則（佈局規則）的上下文環境，在這個上下文環境內的所有子元素，都將根據其特定的CSS格式化規則來進行排列。

BFC

塊級格式化上下文

規則：

  • BFC元素垂直方向的邊距會重疊；

  • 佔據文件流的BFC元素不會和浮動元素重疊；

  • BFC是個獨立容器裡外互不影響；

  • 計算BFC高度時浮動元素也會參與計算（如清除浮動）

如何建立：overflow、 float、 postion(absolute 或 fixed)、 dispay(inline-box和table相關的以及flex和grid)

FFC

自適應格式化上下文

規則：參考flex佈局

如何建立：flex或inline-flex

相關文章