10 個 CSS 高頻面試題,你都會嗎?

2021-02-19 前端大全

（給前端大全加星標，提升前端技能）

作者：程式設計師成長指北 公號 / 小小張

1.什麼是 BFC機制

BFC(Block Formatting Context)，塊級格式化上下文，是一個獨立的渲染區域，讓處於 BFC 內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。

在IE下, Layout,可通過zoom:1 觸發

浮動的元素會被父級計算高度(父級元素觸發了BFC)

非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發了BFC)

margin不會傳遞給父級(父級觸發BFC)

屬於同一個BFC的兩個相鄰元素上下margin會重疊

普通文檔流布局: 浮動的元素是不會被父級計算高度

非浮動元素會覆蓋浮動元素的位置

margin會傳遞給父級元素

兩個相鄰元素上下的margin會重疊

開發中的應用

2. CSS3中新增的選擇器以及屬性

這裡只是列出來, 具體的使用,請查看我的關於css3新增選擇器與屬性文章

屬性選擇器含義描述E[att^="val"]屬性att的值以"val"開頭的元素E[att$="val"]屬性att的值以"val"結尾的元素E[att*="val"]屬性att的值包含"val"字符串的元素選擇器含義描述E:root匹配文檔的根元素，對於HTML文檔，就是HTML元素E:nth-child(n)匹配其父元素的第n個子元素，第一個編號為1E:nth-last-child(n)匹配其父元素的倒數第n個子元素，第一個編號為1E:nth-of-type(n)與:nth-child()作用類似，但是僅匹配使用同種標籤的元素E:nth-last-of-type(n)與:nth-last-child() 作用類似，但是僅匹配使用同種標籤的元素E:last-child匹配父元素的最後一個子元素，等同於:nth-last-child(1)E:first-of-type匹配父元素下使用同種標籤的第一個子元素，等同於:nth-of-type(1)E:last-of-type匹配父元素下使用同種標籤的最後一個子元素，等同於:nth-last-of-type(1)E:only-child匹配父元素下僅有的一個子元素，等同於:first-child:last-child或 :nth-child(1):nth-last-child(1)E:only-of-type匹配父元素下使用同種標籤的唯一一個子元素，等同於:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)E:empty匹配一個不包含任何子元素的元素，注意，文本節點也被看作子元素屬性含義描述兼容transition設置過渡效果
transform變換效果(移動、縮放、轉動、拉長或拉伸)
animation動畫效果
box-shadow陰影效果FF3.5, Safari 4, Chrome 3text-shadow文本陰影FF 3.5, Opera 10, Safari 4, Chrome 3border-colors為邊框設置多種顏色FF3+boder-image圖片邊框FF 3.5, Safari 4, Chrome 3text-overflow文本截斷IE6+, Safari4, Chrome3, Opera10word-wrap自動換行IE6+, FF 3.5, Safari 4, Chrome 3border-radius圓角邊框FF 3+, Safari 4 , Chrome 3opacity不透明度allbox-sizing控制盒模型的組成模式FF3+, Opera 10, Safari 4, Chrome 3outline外邊框FF3+, safari 4, chrome 3, opera 10background-size不指定背景圖片的尺寸safari 4, chrome 3, opera 10background-origin指定背景圖片從哪裡開始顯示safari 4, chrome 3, FF 3+background-clip指定背景圖片從什麼位置開始裁切safari 4, chrome 3rgba基於r,g,b三個顏色通道來設置顏色值, 通過a來設置透明度safari 4, chrome 3, FF3, opera 103. 居中布局

行內元素: text-align:center

塊級元素: margin:0 auto

絕對定位和移動: absolute + transform

絕對定位和負邊距: absolute + margin

flex布局: flex + justify-content:center

垂直居中

子元素為單行文本: line-height:height

absolute + transform

flex + align-items:center

table: display:table-cell; vertical-align: middle

利用position和top和負margin

水平垂直居中

1. 已知元素寬高:絕對定位+margin:auto:

div{
width: 200px;
height: 200px;
background: green;

position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}

2. 已知元素寬高:  絕對定位+負margin

div{
width: 200px;
height: 200px;
background: green;

position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}

3. absolute+transform

div{
width: 200px;
height: 200px;
background: green;

position:absolute;
left:50%; /* 定位父級的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}

4.flex + justify-content + align-items

.box{
height:600px;

display:flex;
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
/* aa只要三句話就可以實現不定寬高水平垂直居中。*/
}
.box>div{
background: green;
width: 200px;
height: 200px;
}

4. 清除浮動有哪些方法, 各有什麼優缺點

優點: 簡單, 寫少量代碼, 兼容性也好 缺點: 添加無語義html元素, 不利於代碼語義化, 後期維護成本大

優點: 簡單, 代碼少, 瀏覽器支持好 缺點: 不能和position配合使用, 因為超出的尺寸會被隱藏overflow:hidden

優點: 瀏覽器支持好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等） 缺點: 代碼多，要兩句代碼結合使用，才能讓主流瀏覽器都支持

簡單, 代碼少,好掌握 缺點: 只適用於高度固定的布局

5. 用純CSS創建一個三角形的原理是什麼

之前寫三角形, 都是直接記住代碼,沒有探究原因,我也是直到有一次面試時,面試大哥讓我說說css創建三角形的原理,我就.回來就趕緊翻資料.接下來我就將當時我理解的過程列舉出來:

1. 寫一個我們最熟悉的 border應用

.box{
width:100px;
height:100px;
border: 3px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

效果如下:

2. 接下來,我們將border值增大

.box{
width:100px;
height:100px;
border: 50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

很容易發現, border渲染並不是正方形, 而是梯形的.

3. 在增大border的基礎下, 此時我們將盒子寬高變成0,會產生什麼效果呢!

.box{
width:0px;
height:0px;
border: 50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

四個三角形拼合成的矩形呈現在我們眼前,那如如果我們只想要一個三角形, 我們是不是可以設想將其他三個設為不可見;

4. 設置透明, 隱藏其中三個三角形

.box{
width:0px;
height:0px;
border: 50px solid;
border-color:transparent transparent transparent #ef4848;
}

三角形這樣就出來, 有木有很簡單, 當然我們也可以採用逆向思維來寫這個效果, 就是先將所有邊框設為透明, 然後需要哪邊再對其設置顏色, 效果是一樣的

.box{
width:0px;
height:0px;
border: 50px solid transparent;
border-left:50px solid #ef4848;
}

這樣給面試你的人講,講明白應該不是問題., 重點就是要理解border的應用

6. 實現三欄布局有哪些方法, 分別描述一下

三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在開發十分常見，那麼什麼是三欄布局？即左右模塊固定寬度，中間模塊隨瀏覽器變化自適應，想要完成的最終效果如下圖所示：下面列出四種實現方式, 在開發中可以根據實際需求選擇適合自己的方法進行編碼:

<style>
.container{
display:flex;
justify-content: center;
height: 200px;
background: #eee;
}
.left {
width: 200px;
background-color: red;
height: 100%;
}
.main {
background-color: yellow;
flex: 1;
}
.right {
width: 200px;
background-color: green;
}
</style>
<div class="container">
<div class="left">1</div>
<div class="main">2</div>
<div class="right">3</div>
</div>

簡單實用，現在比較流行的方案，但是需要考慮瀏覽器的兼容性。

<style>
.container {
position: relative;
background:#eee;
height:200px;
}
.main {
height: 200px;
margin: 0 120px;
background-color: yellow;
}
.left {
position: absolute;
width: 100px;
height: 200px;
left: 0;
top: 0;
background-color: red;
}
.right {
position: absolute;
width: 100px;
height: 200px;
background-color: green;
right: 0;
top: 0;
}
</style>

<div class="container">
<div class="left">1</div>
<div class="main">2</div>
<div class="right">3</div>
</div>

這種方案也簡單實用, 並且可以將 <div></div>元素放到第一位,使得主要內容優先加載!

<style>
.content {
float: left;
width: 100%;
}
.main {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: yellow;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: -200px;
background-color: green;
}

</style>
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

<style>
.container {
margin-left: 120px;
margin-right: 220px;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: yellow;
}
.left {
float: left;
width: 100px;
height: 300px;
margin-left: -100%;
position: relative;
left: -120px;
background-color: blue;
}
.right {
float: left;
width: 200px;
height: 300px;
margin-left: -200px;
position: relative;
right: -220px;
background-color: green;
}
</style>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>

聖杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div並排，以形成三欄布局。

7. css3實現0.5px的細線

<style>
.line {
position: relative;
}
.line:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background-color: #000000;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}
</style>

<div class="line"></div>

8. link 與 @import 的區別

從屬關係區別

@import是 CSS 提供的語法規則，只有導入樣式表的作用；link是HTML提供的標籤，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等

加載順序區別

加載頁面時，link標籤引入的 CSS 被同時加載；@import引入的 CSS 將在頁面加載完畢後被加載。

兼容性區別

@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link標籤作為 HTML 元素，不存在兼容性問題。

DOM可控性區別

可以通過 JS 操作 DOM ，插入link標籤來改變樣式；由於DOM方法是基於文檔的，無法使用@import的方式插入樣式。

css部分就整理到這裡, 小夥伴們面試還有什麼經常遇到的,可以在評論區給我留言, 我有時間就整理出來, IT(挨踢)都是一大家, 方便你我他

9. 開發中為什麼要初始化css樣式

因為瀏覽器的兼容問題，不同瀏覽器對有些標籤的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

10. CSS優化、提高性能的方法有哪些

內容和樣式分離，易於管理和維護

減少頁面體積

css文件可以被緩存、重用，維護成本降低

不使用@import

避免使用複雜的選擇器，層級越少越好 建議選擇器的嵌套最好不要超過三層，比如：

精簡頁面的樣式文件，去掉不用的樣式

利用CSS繼承減少代碼量

避免！important，可以選擇其他選擇器

覺得本文對你有幫助？請分享給更多人

關注「前端大全」加星標，提升前端技能

好文章，我在看❤️

相關焦點

  • 10個關於css高頻面試題
    +, Safari 4 , Chrome 3opacity不透明度allbox-sizing控制盒模型的組成模式FF3+, Opera 10, Safari 4, Chrome 3outline外邊框FF3+, safari 4, chrome 3, opera 10background-size不指定背景圖片的尺寸safari 4, chrome 3, opera 10background-origin
  • 想去面試?這10道最高頻的手撕代碼題都會了嗎?
    下面這10道最高頻的手撕代碼面試題都會了嗎？相信我，徹底掌握以下這10道題的解法，你順利做出手撕代碼面試題目的概率至少不低於50%。1，快速排序題目形式：手寫一下快速排序算法。題目難度：中等。出現概率：約50%。手寫快排絕對是手撕代碼面試題中的百獸之王，掌握了它就是送分題，沒有掌握它就是送命題。
  • 10 個 GitHub 上超火的 CSS 技巧項目,找到寫 CSS 的靈感!
    目前文檔一共包含 43 個 CSS 的小樣式（持續更新…），所以還是很不錯的學習 CSS 的項目來的。font: bold 200% Consolas, Monaco, monospace;   /*等寬字體*/    overflow: hidden;    white-space: nowrap;    font-weight: 500;    border-right: 1px solid transparent;    animation: typing 10s
  • 【面試題】CSS知識點整理(附答案)
    父級添加overflow屬性：包含浮動元素的父標籤添加樣式overflow為hidden或auto，通過觸發BFC方式，實現清除浮動清除浮動的四種方式及其原理理解[14]10. postcss我們都知道」babel「的存在，可以讓我們使用比較新的js語法，postcss則可以理解為CSS的」babel「，可以讓我們使用比較新的CSS語法
  • 104道 CSS 面試題,助你查漏補缺(上)
    本部分主要是筆者在複習 CSS 相關知識和一些相關面試題時所做的筆記，如果出現錯誤，希望大家指出！目錄1.介紹一下標準的 CSS 的盒子模型？低版本 IE 的盒子模型有什麼不同的？[1]3.::before 和:after 中雙冒號和單冒號有什麼區別？解釋一下這 2 個偽元素的作用。[3]10.display 有哪些值？
  • 【乾貨】各大網際網路公司前端筆試面試題–HTML,CSS篇
    很多面試題是我自己面試BAT親身經歷碰到的。整理分享出來希望更多的前端er共同進步吧，不僅適用於求職者，對於鞏固複習前端基礎更是大有裨益。而更多的題目是我一路以來收集的，也有往年的，答案不確保一定正確，如有錯誤或有更好的解法，還請斧正。前面幾題是會很基礎，越下越有深度。1.你做的頁面在哪些流覽器測試過？
  • 2020年底面試題
    面試結果先說下面試結果：猿輔導、貝殼10月份拿到offer，但沒去，後來問了下可以去，但是薪資不調整，遂over，猿輔導的面試還是比較有技術含量的，當時其實想走了，後來想想等等年終獎吧，就沒去騰訊二面掛，難度適中。其實是有希望過，只是面的時候發現不是自己想去的部門，面試官說你可想好。。
  • 27 個 CSS 面試的高頻考點助力金三銀四
    這種分離可以提高內容的可訪問性，在樣式特徵的規範中提供更多的靈活性和控制，通過在一個單獨的. .css 文件中指定相關的 CSS，使多個 web 頁面能夠共享格式，並減少結構內容中的複雜性和重複。它具有簡單的語法，並使用大量的英文關鍵字來指定各種樣式屬性的名稱。既然我們已經討論了CSS的基礎知識，讓我們來觀察一下基於CSS的重要面試問題。問題1：什麼是 CSS？
  • PCB工程師面試題,看看你都會嗎?
    以下是深圳某公司的PCB工程師面試題目，來試下你會幾題。(答案在最下方)本文引用地址：http://www.eepw.com.cn/article/201803/377060.htm　　一、填空　　1.
  • 面試題聯盟之CSS篇
    、css預處理器（sass/less/stylus/postcss）這些都是類css語言，通過webpack編譯可以轉成瀏覽器可讀的css，並且賦予css更強大的功能。但是谷歌瀏覽器支持最小字體是12px，所以可以將屏幕分成10份來計算。
  • 挑戰一輪大廠後的面試總結 - css 篇
    在去年底開始換工作，直到現在算是告了一個段落，斷斷續續的也面試了不少公司，現在回想起來，那段時間經歷了被面試官手撕，被筆試題狂懟，悲傷的時候差點留下沒技術的淚水。這篇文章我打算把我找工作遇到的各種面試題（每次面試完我都會總結）和我自己複習遇到比較有意思的題目，做一份匯總，年後是跳槽高峰期，也許能幫到一些小夥伴。
  • 面試整理(三)CSS部分
    web前端面試 —— CSS部分1. css sprite 是什麼,有什麼優缺點概念：將多個⼩圖⽚拼接到⼀個圖⽚中。p:nth-child(2) 選擇屬於其⽗元素的第⼆個⼦元素的每個 <p> 元素。:after 在元素之前添加內容,也可以⽤來做清除浮動。 10 display有哪些值？說明他們的作⽤ inline-block 象⾏內元素⼀樣顯示，但其內容象塊類型元素⼀樣顯示。
  • 好程式設計師web前端培訓分享HTML/CSS部分面試題
    好程式設計師web前端培訓分享HTML/CSS部分面試題。準備參加web前端面試的小夥伴們一起看一看吧，希望能夠對大家有所幫助！ 在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容(content)，元素的內邊距(padding)，元素的邊框(border)，元素的外邊距(margin)四個部分。這四個部分佔有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。
  • 104道 CSS 面試題,助你查漏補缺
    CSS 面試知識點總結最近在整理 CSS 的時候發現遇到了很多面試中常見的面試題，本部分主要原作者在 Github 等各大論壇收錄的 CSS 相關知識和一些相關面試題時所做的筆記，分享這份總結給大家，對大家對 CSS 的可以來一次全方位的檢漏和排查，感謝原作者 CavsZhouyou 的付出，原文連結放在文章最下方，如果出現錯誤，希望大家共同指出
  • HTML+CSS 面試題整理(一)
    )： h1 + p { margin-top:50px; }⑾兄弟選擇符（選擇該元素的所有兄弟）： h1 ~ p { line-height:30px; }9.css屬性可繼承：①所有元素可繼承：visibility、cursor②內聯元素可繼承（14個）：letter-spacing、word-spacing、white-space、line-height
  • 104道CSS面試題,助你查漏補缺
    [阿里航旅的面試題]簡單說一下 css3 的 all 屬性。為什麼不建議使用通配符初始化 css 樣式。absolute 的 containingblock（包含塊）計算方式跟正常流有什麼不同？元素豎向的百分比設定是相對於容器的高度嗎？全屏滾動的原理是什麼？用到了 CSS 的哪些屬性？
  • 360子公司,華閱文化前端面試 面試題,技術問題,邏輯題詳解
    2019.1.9收到的面試。和hr老哥，談到21號上午去。（樓主在職）不多說，直接面試題。1.舉例HTML5和css3的新特性（常考）2js代碼用來保存用戶訪問某一個頁面的次數。3.看一段css樣式，寫出div的樣子。4盒子margin10，padding10，border2px盒子高度為px,總高度為100px.css實現！5清除浮動的方法，列舉6對flex布局的了解。實現一下表格。
  • 關於CSS不得不知的9條面試經驗
    CSS是前端必須要掌握的技能之一，而一般面試也都會從CSS開始。在面試官心中的形象，很大程度取決於CSS題目的答題成果。
  • 夠了 - 104道 CSS 面試題,助你查漏補缺
    CSS 面試知識點總結最近在整理 CSS 的時候發現遇到了很多面試中常見的面試題，本部分主要原作者在 Github 等各大論壇收錄的 CSS 相關知識和一些相關面試題時所做的筆記，分享這份總結給大家，對大家對 CSS 的可以來一次全方位的檢漏和排查，感謝原作者 CavsZhouyou 的付出，原文連結放在文章最下方，如果出現錯誤，希望大家共同指出
  • [重拾CSS]一道面試題來看偽元素、包含塊和高度坍塌
    前言前幾天某個群友在群裡問了一道面試題，就是關於一個自適應的正方形布局的困惑，先貼上代碼。我其實很長一段時間沒有寫 CSS 了，對於裡面的一些細節也比較模糊了，因此決定重拾 CSS，來重新捋一捋這題目中的一些知識點。