前端面試（我的收藏總結）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