CSS面試題佈局權重工程化

CSS面試題

CSS基礎面試題

Css權重：

計算一個不進位的數字

！important            	      					   +infinity
行間樣式（style）                     	  			+1000
id選擇器                                		      +100
class選擇器|屬性選擇器|僞類選擇器（eg ::before）         +10
標籤選擇器|僞元素（eg:hover）             	         +1
通配符選擇器                                          +0

文字折行

overflow-wrap：通用換行控制

• 是否保留單詞

word-break：真對多字節文字

• 中文句子也是單詞

white-space：空白處是否換行

CSS hack

1、css樣式選擇器的優先級

• 計算權重
• ! important
• 內聯樣式
• 後寫的優先級高

2、雪碧圖的作用

• 減少https請求數 提高加載性能
• 有可能減少圖片的大小（有限而且現在提及少）

3、自定義的字體的使用場景

• 宣傳、品牌、banner等固定文案
• 字體圖標

4、base64的作用

• 減少http請求（但增加了加載性能，所以適用於小圖標，如loading圖）
• 適用於小圖片
• 體積約爲原圖的4/3

5、僞元素和僞類的區別

• 僞類表狀態
• 僞元素是一個真的元素
• 僞類使用單冒號
• 僞元素使用雙冒號

6、如何美化checkbox

• label[for]和id
• 隱藏原生input
• :checked+ label

CSS佈局（重點）

盒子模型：

• content+padding+border+margin
• 默認情況：高度、寬度只對內容生效
• 佔用空間：content+padding+border

position：

• static： static定位是HTML元素的默認值，即沒有定位，元素出現在正常的流中。因此這種定位就不會受到top、bottom、left、right的影響。
• fixed： fixed定位是指元素的位置相對於瀏覽器窗口是固定位置，即使窗口是滾動的他也不會滾動，而且fixed定位使元素的位置與文檔流無關，因此不佔據空間，所以會和其他元素髮生重疊。
• relative： 相對定位元素的定位是相對他自己的正常位置定位。
• absolution：絕對定位的元素相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於。

float：

• 元素浮動

• 脫離文檔流

• 但不脫離文本流（佔據文字位置）

• 對自身影響：

  • 形成塊（BFC）
  • 位置儘量靠上

• 對兄弟的影響

  • 上面一般貼非float元素
  • 旁邊一般貼float元素
  • 不影響其他塊級元素的位置
  • 影響其他塊級元素內部的文本

• 對父級元素的影響

  • 從父佈局消失
  • 高度塌陷

• 清除浮動

  • 經典清除浮動

    .clearfix:after{
        content: '';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    /* 兼容IE6 IE7  zoom：1； 觸發haslayout屬性 */
    .clearfix{
        zoom: 1;
    }
    

  • 改寫：

    .clearfix:after{
        content: '';
        display: table;
        clear: both;
    }
    

  • 解決margin塌陷

    .clear-fix:before,
    .clear-fix:after{
    content: '';
      display: table;
    }
    
    .clear-fix:after{
      clear: both;
    }
    

flexbox佈局

• 彈性盒子
• 盒子是並列的
• 指定寬度即可
• 存在兼容性問題（低版本IE不支持，不同瀏覽器支持不同版本的flexbox）

CSS佈局面試題

1、實現兩欄或者三欄的佈局方法

• 表格佈局
• float+margin佈局
• inline-block佈局
• flexbox佈局

2、position：absolute|fixed有什麼區別

• 前者相對最近的absolute、relative定位
• 後者相對屏幕（viewport）

3、display：inline-block怎麼會有間隙、怎麼處理

• 原因：字符間距
• 解決
  • 消滅字符（設置父級font-size爲0）
  • 消滅間距（HTML中註釋換行代替換行，刪掉換行符）

4、清除浮動

• 原因：浮動的元素不會佔據父元素的佈局空間，可能浮動元素會超出父元素對其他元素造成影響
• 解決：
  • 讓盒子負責自己的佈局（觸發BFC）
    • overflow：hidden|auto
    • ::after{clear:both}

5、如何適配移動端頁面

• 把頁面viewprot適配
• rem/viewport/media query
• 設計上：隱藏、折行、自適應

CSS動畫

transition補間動畫

• 位置-平移（left | right | margin | transform）
• 方位-旋轉（transform）
• 大小-縮放（transform）
• 透明度（opacity）
• 其他-線性變換（transform）

.container{
	width: 100px;
	height: 100px;
    background: red;
    /* transition: all 1s; */
    transition: width 1s, background: 3s;
    /* transition-timing-function: linear  */
}
.container: hover{
	width: 800px;
    backgroud: green;
}

keyframe關鍵幀動畫

• 相當於多個補間動畫
• 與元素的狀態無關
• 定義更加靈活

.container{
	width: 100px;
	height: 100px;
    background: red;
    animation: run 1s;
    /* 設置循環次數 無線循環 */
    animation-iteration-count: infinite;
}

@keyframes run{
    0%{
        width: 100px;
    }
    50%{
        width: 600px;
    }
    100%{
        width: 100px;
    }
}

逐幀動畫

• 適用於無法補間的動畫
• 資源較大
• 使用steps（1）

.container{
	width: 100px;
	height: 100px;	
    background: url(./animal.png) no-repeat;
    animation: run 1s infinite;
    /* 讓動畫不補間，就每個幀就一個畫面 */
    transition-timing-function: steps(1);
}
/* 設置雪碧圖的位置不斷切換圖片達到動畫的目的 */
@keyframes run{
    0%{
        backgrund-position: 0 0;
    }
    12.5%{
    	backgrund-position: -100px 0;
    }
    25%{
    	backgrund-position: -200px 0;
    }
    37.55%{
    	backgrund-position: -300px 0;
    }
    50%{
        backgrund-position: 0 -100px;
    }
    62.5%{
    	backgrund-position: -100px -100px;
    }
    75%{
    	backgrund-position: -200px -100px;
    }
    87.5%{
    	backgrund-position: -300px -100px;
    }
    100%{
        backgrund-position: 0 0;
    }
}

動畫面試題：

1、CSS實現動畫的幾種方式

• transition
• keyframes（animation）

2、過度動畫和關鍵幀動畫的區別

• 過渡動畫需要有狀態變化
• 關鍵幀動畫不需要有狀態變化
• 關鍵幀動畫能控制更加精細

3、CSS動畫的性能

• 性能不壞
• 部分情況下優於js
• 但js可以做到更好
• 部分高危屬性（如box-shadow）

CSS預處理器

什麼是CSS預處理器

• 基於css的一種語言
• 通過工具編譯成css
• 添加許多css不具備的特性
• 提升css文件的組織

CSS預處理器的功能

• 嵌套 反映層級和約束
• 變量和計算 減少代碼重複
• Extend和Mixin代碼片段
• 循環 適用於複雜有規律的樣式
• import css文件模塊化

CSS預處理器框架

• Sass-Compass
• Less-Lesshat|EST
• 提供現成的mixin
• 類似js封裝庫封裝各種功能

CSS預處理器的作用

• 幫助更好地組織CSS代碼
• 提高代碼的複用性
• 提升可維護性

CSS工程化

關注：

• 組織
• 優化
• 構建
• 維護

PostCss:

能做什麼

• 本身只有解析能力
• 各種神奇的特性全靠插件
• 目前插件已經有很多了

應用場景

• import 模塊合併
• autoprefixier 自動添加前綴
• cssnano 壓縮代碼
• cssnext 使用css新特性
• precss 變量、mixin、循環等