前端面試問題CSS篇

前端面試問題HTML篇：https://my.oschina.net/u/3674939/blog/1637883

前端面試問題JavaScript篇：https://my.oschina.net/u/3674939/blog/1640595

前端面試問題其它篇（安全、性能、加載等）：https://my.oschina.net/u/3674939/blog/1643029

文本不換行

/*單行文本*/
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
           

CSS樣式優先級

!important > 行内樣式>ID選擇器 > 類選擇器 > 标簽 > 通配符 > 繼承 > 浏覽器預設屬性

• 權重計算
• 後寫優先

雪碧圖的作用

• 減少HTTP請求數，提高加載性能
• 減少圖檔大小

display:inline-block的間距問題

由于空白字元的原因

解決：font-size: 0

如何清除浮動

• overflow:hidden
• ::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; 
           

• 網格布局

參考：https://github.com/Sweet-KK/css-layout

CSS盒模型

标準模型：寬高 = content

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

邊距重疊問題

上下2個div分别設定margin-bottom和margin-top，margin值合并取最大值。父div嵌套子div并設子div寬高margin-top，父div=子div寬高并會margin值合并取最大值。

解決：overflow：hidden

BFC

塊級格式化上下文

原理：BFC元素垂直方向的邊距會重疊；BFC區域不會和浮動元素重疊；BFC是個獨立容器裡外互不影響；計算BFC高度時浮動元素也會參與計算

如何建立：overflow、 float、 postion(relative不算)、 dispay(隻有inline-box和table相關的)

附：55道css面試題：https://segmentfault.com/a/1190000013325778

轉載于:https://my.oschina.net/u/3674939/blog/1637877