CSS面試題整理

eeeeeeeeeeee發表於2019-03-30

CSS面試題

?這只是個人筆記……我沒想到居然有人看到……

題目來源: 前端開發面試題

答案基本是自己整理的。並不是全部題目都有。

會有很多自己的囉嗦，還有很多亂七八糟的補充，請見諒。

介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？

盒子模型有兩種：IE 盒子模型(IE5.5及以下)，W3C標準盒子模型。

盒子模型(box model)：

內容(content)、填充(padding)、邊框(border)、邊界(margin) 。
不同：

W3C標準盒子模型的width和height，是content的寬高；

IE盒模型的width和height，是content、padding、border三部分合起來的寬高。

附加：

outline（輪廓）繪製在元素框之上，其不佔據空間（不影響元素大小和定位）【所以如果輪廓線很粗，會遮住其他內容demo，不是很懂輪廓的覆蓋順序，它居然可以蓋住下一個元素的內容？輪廓本身是另一次元的嗎？會覆蓋內容，但後一個輪廓會覆蓋前一個輪廓】。

相容性：IE8以上。

其他參考：關於外邊距的一些實踐上的細節, 解決盒模型的相容性問題

如何居中div？

水平居中

已知寬度, block元素：

新增margin:0 auto屬性。

div{
	width:200px;
	margin:0 auto;
 }
複製程式碼

已知寬度, 絕對定位的div居中：

div {
	position: absolute;
	width: 300px;
	height: 300px;
	margin: auto; /* 這一步很關鍵 */
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: pink;	/* 方便看效果 */
}
複製程式碼

未知寬度，fit-content：

相容性很差。

div {
    width: fit-content;
    margin: auto;
    background-color: pink;	/* 方便看效果 */
}
複製程式碼

未知寬度，inline-block：

.parent {
    text-align: center;
}
div {
    display: inline-block;
    background-color: pink;	/* 方便看效果 */
}
複製程式碼

未知寬度/已知寬度，relative：

參考：三、浮動實現水平居中的方法
- 優點：相容性強，擴充套件性強；
- 缺點：實現原理較複雜。
需要兩個div，外層left 50%，內層left -50%。

用float或inline-block，使容器大小為內容大小，而非預設的100%。
```
.outter {
    display: inline-block; /* or float: left; */
    position: relative;
    left: 50%;
}
.inner {
    position: relative;
    left: -50%;
}
複製程式碼
```
- left的值為百分比時，為父容器的寬度的百分比(MDN)。

水平垂直居中

確定容器寬高：

相對或絕對定位, 設定外邊距margin。

div {
	position: relative / fixed; /* 相對定位或絕對定位均可 */
	width:500px;
	height:300px;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -250px;  /* 外邊距為自身寬高的一半 */
	background-color: pink; /* 方便看效果 */
 }
複製程式碼

不確定容器寬高：

絕對定位，利用 transform 屬性。

div {
	position: absolute/fixed; /* relative會讓width變成100%，
                                 所以不行
                               */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: pink; /* 方便看效果 */
}

複製程式碼

flex 佈局：

寬高可以確定，也可以不確定。

實際使用時應考慮相容性。

.container {
	display: flex;
	align-items: center; 		/* 垂直居中 */
	justify-content: center;	/* 水平居中 */

}
.container div {
	width: 100px; /* 可省 */
	height: 100px; /* 可省 */
	background-color: pink;	/* 方便看效果 */
}  
複製程式碼

inline-block：

寬高可以確定，也可以不確定。

水平居中：text-align。

垂直居中：父元素line-height與height同值，子元素 vertical-align。

缺點：內層高度超出外層，無法垂直居中，會和父層同頂部(參見demo)。

.container {
    height: 200px; /* 垂直居中 */
    line-height: 200px; /* 垂直居中 */
    text-align: center; /* 水平居中 */
}
.container div {
    display: inline-block; /* 核心：寬度自適應，高度可居中 */
    line-height: 20px; /* 會自動繼承，必須設定不同的值來覆蓋 */
    vertical-align: middle; /* 垂直居中 */
}  
複製程式碼

CSS選擇符有哪些？

id選擇器（ #myid）
類選擇器（.myclassname）
標籤選擇器（div, h1, p）
緊鄰同胞選擇器 h1 + p（選的是h1後緊跟的那個p）
一般同胞選擇器 h1 ~ p（選擇所有跟在h1後的p）[css3]
子選擇器（ul > li）
後代選擇器（li a）
萬用字元選擇器（ * ）
屬性選擇器（a[rel = "external"]）
偽類選擇器（a:hover, li:nth-child）

偽元素 & 偽類：

所有偽元素:

::after
::before
::first-letter
::first-line
::selection
複製程式碼

偽類:

:active, :hover, :visited
:any
:any-link
:checked
:default
:defined
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:focus-visible
:host
:host()
:host-context()
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
複製程式碼

萬用字元選擇器有一個非常有意思的用法，即用它構成非子選擇符，比如：
section * a {font-size:1.3em;}
複製程式碼
任何是 section 孫子元素，而非子元素的 a 標籤都會被選中。至於 a 的父元素是什麼，沒有關係。

哪些屬性可以繼承？

所有元素可繼承
```
visibility

cursor
複製程式碼
```

內聯元素可繼承：

letter-spacing word-spacing

white-space

line-height

color

font font-family font-size font-style font-variant font-weight

text-decoration text-transform

direction
複製程式碼

font-variant：把段落設定為小型大寫字母字型。

text-transform: 控制文字中的字母的大小寫。

塊狀元素可繼承：

//文字塊中首行文字的縮排
text-indent 

text-align
複製程式碼

列表元素可繼承：

list-style
list-style-type
list-style-position
list-style-image
複製程式碼

表格元素可繼承：

/*
    1. separate	預設值。邊框會被分開。
      不會忽略 border-spacing 和 empty-cells 屬性。
    2. collapse	如果可能，邊框會合併為一個單一的邊框。
      會忽略 border-spacing 和 empty-cells 屬性。
    3. inherit	規定應該從父元素繼承 border-collapse 屬性的值。
*/
border-collapse
複製程式碼

不可繼承的樣式：

display

position left right top  bottom z-index

height min-height max-height
width min-width max-width

padding border margin

background

overflow

float clear

vertical-align

/*下面幾個都沒見過*/

table-layout /*表格寬度是否自適應。值：automatic，fixed，inherit*/

page-break-after page-break-before /*列印時強制分頁*/

unicode-bidi /*與direction合用，控制文字方向*/
複製程式碼

CSS優先順序演算法如何計算？

優先順序就近原則，同權重情況下樣式定義最近者為準;
載入樣式以最後載入的定位為準。

優先順序為:

// 同權重下，許可權由高到低: 
1.元素標籤裡（行內樣式/內聯樣式）
2.寫在<style>標籤裡（嵌入樣式）
3.寫在單獨的 CSS 樣式表中（連結樣式）
4.在樣式表中連結其他樣式表：@import url(css/styles2.css)

// 不同權重計算
!important >  id > class > tag

// !important優先於一切
!important 比 內聯優先順序高
複製程式碼

權重計算方法：

// 選擇器的特殊性值表述為4個部分，用0,0,0,0表示。

行間樣式的特殊性是1,0,0,0

ID選擇器的特殊性值，加0,1,0,0。

類選擇器、屬性選擇器或偽類，加0,0,1,0。

元素和偽元素，加0,0,0,1。

通配選擇器 * 對特殊性沒有貢獻，即0,0,0,0。

!important，它沒有特殊性值，但它的優先順序是最高的。
為了方便記憶，可以認為它的特殊性值為1,0,0,0,0。
複製程式碼

more: 詳細的優先順序計算方法

CSS3新增偽類有哪些？

參考：MDN - CSS新特性

偽類	說明
`:last-child`	父元素的最後一個子元素。
`:nth-child(an+b)`	找到所有當前元素的子元素；按照位置先後順序從1開始排序，選擇的結果為第 an+b 個元素的集合(n = 0, 1, 2, ...)。
`:nth-last-child(an+b)`	與`:nth-child(an+b)`類似，只是它從結尾處逆序計數，而不是從開頭處。↪ MDN
`:only-child`	屬於某個父元素的唯一一個子元素，即選擇沒有同胞的所有元素。

`:first-of-type`	父元素下，每個元素型別中，最靠前的那個。
`:last-of-type`	父元素下，每個元素型別中，最靠後的那個。
`:nth-of-type(an+b)`	父元素下，每個元素型別中，第n個。找到當前元素下，同元素型別的所有子元素的集合，對每個集合按照位置先後順序排序，選擇的結果為第 an+b 個元素的集合。
`:nth-last-of-type(an+b)`	基本上和 `:nth-of-type` 一樣，只是它從結尾處逆序計數，而不是從開頭處。
`:only-of-type`	選擇不同於其他同胞元素的tag型別的元素，就是說，這個元素型別的元素在其父元素下，同一級只有這一個。（類比家庭中的男孩和女孩）

`:enabled`	每個啟用的的元素（主要用於表單元素）。
`:disabled`	禁用的元素（主要用於控制表單控制元件的禁用狀態）。

`:checked`	單選框或核取方塊被選中。
`:indeterminate`	表示不確定狀態。 1.`<input type="checkbox">` 元素，其 indeterminate 屬性被 JavaScript設定為 true; 2.`<input type="radio">` 元素, 表單中擁有相同 name值的所有單選按鈕都未被選中時; 3.處於不確定狀態的 `<progress>` 元素

`:target`	`<a>`跳轉`#`錨點，可設定錨點目標的樣式。MDN

`:root`	匹配文件樹的根元素。對於 HTML 來說，`:root` 表示 `<html>` 元素，除了優先順序更高之外，與 html 選擇器相同。
`:empty`	沒有子元素的元素。子元素只可以是元素節點或文字（包括空格）。MDN 註釋不算在內，但註釋周圍有空格就算。
`:not(X)`	匹配不符合引數選擇器`X`描述的元素。 `X`不能包含另外一個否定選擇器。 `:not`偽類的優先順序即為它引數選擇器的優先順序。 `:not`偽類不像其它偽類，它不會增加選擇器的優先順序。 `:not(p)` 將匹配任何非p元素，包括`html`和`body`。(所以用的時候千萬小心，如果設定了什麼color，可能會出現非自己預料的情況，比如全成一樣的顏色。↪ bug demo)

display有哪些值？說明他們的作用。

display	說明
css1
none	元素不顯示，並從文件流中移除。
inherit	從父元素繼承 display 屬性的值。
block	塊型別。預設寬度為父元素寬度，可設定寬高，換行顯示。
inline	行內元素型別。預設寬度為內容寬度，不可設定寬高，同行顯示。
list-item	像塊型別元素一樣顯示，並新增樣式列表標記。

css2
inline-block	預設寬度為內容寬度，可以設定寬高，同行顯示。
table	作為塊級表格來顯示。

flex	彈性元素如何伸長或縮短以適應flex容器中的可用空間。
grid	網格佈局

position的值relative和absolute定位原點是？

position	說明
static	預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right, z-index 宣告）。
inherit	從父元素繼承 position 屬性的值。
absolute	絕對定位。不為元素預留空間，相對於最近的非 static 定位的祖先元素進行定位。
fixed （老IE不支援）	絕對定位。不為元素預留空間，相對於瀏覽器視窗進行定位。元素的位置在螢幕滾動時不會改變。
relative	相對定位。相對於其正常位置進行定位。該關鍵字下，元素先放置在未新增定位時的位置，再在不改變頁面佈局的前提下調整元素位置（因此會在此元素未新增定位時所在位置留下空白）。

相對定位的元素並未脫離文件流，而絕對定位的元素則脫離了文件流。

CSS3有哪些新特性？

圓角（border-radius:8px）
新增各種CSS選擇器、偽類（經常用到 :nth-child）
文字渲染（Text-decoration）

轉化為簡寫屬性，可設定text-decoration-color, text-decoration-style, text-decoration-line三個屬性，預設值為currentcolor solid none。
透明色 & 透明度（opacity）
旋轉（transform）

旋轉 rotate，縮放 scale，傾斜 skew，平移 translate
動畫(animation) & 過渡效果(transition)

陰影（box-shadow, text-shadow）

box-shadow: x-offset y-offset blur-radius spread-radius color;

text-shadow: x-offset y-offset blur-radius color;
複製程式碼

新的佈局方式，如多列布局 multi-columns 、彈性佈局 flexible box 與網格佈局 grid layouts
線性漸變（gradient）
多背景（background-image可以設定多個url或linear-gradient）
媒體查詢(@media MDN) (可以看看這個)
邊框可以設定圖片（border-image）

請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

MDN

什麼是flexbox

CSS3新增佈局。

Flexbox可以把列表放在同一個方向（從上到下排列，從左到右），並讓列表能延伸到佔用可用的空間。

較為複雜的佈局還可以通過巢狀一個伸縮容器（flex container）來實現。

採用Flex佈局的元素，稱為Flex容器（flex container），簡稱"容器"。
它的所有子元素自動成為容器成員，稱為Flex專案（flex item），簡稱"專案"。

常規佈局是基於塊和內聯流方向，而Flex佈局是基於flex-flow流可以很方便的用來做局中，能對不同螢幕大小自適應。

在佈局上有了比以前更加靈活的空間。

具體：www.w3cplus.com/css3/flexbo…

應用場景

水平垂直居中
一邊定寬，一邊自適應
多列等分佈局
聖盃佈局
sticky footer

我在專案中的應用

sticky footer (demo)

如果頁面內容不夠長的時候，footer固定在視窗底部；如果內容足夠長時，footer會被內容向下推。

<div class="detail-flex">
    <div class="detail-content">detail-content</div>
    <div class="detail-footer">detail-footer</div>
</div>
複製程式碼

.detail-flex
    display: flex
    flex-direction: column
    position: fixed
    z-index: 100
    top: 0
    left: 0
    width: 100%
    height: 100%
    overflow: auto
    
    .detail-content
        flex: 1 0 auto
        
    .detail-footer
        flex: 0 0 auto
複製程式碼

用純CSS建立一個三角形的原理是什麼？

不同寬高下的border：詳情請戳demo

基礎

把上、左、右三條邊隱藏掉（顏色設為 transparent）。

div {
  width: 0;
  height: 0; /* div裡沒內容，可不寫 */
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

/* 或者這樣寫 */
div {
  width: 0;
  border: 100px solid transparent;
  border-bottom-color: #343434;
}
複製程式碼

等邊三角形

顯示部分的寬度 = transparent部分的寬度 * √3

√3 ≈ 1.732

div {
  width: 0;
  border: 100px solid transparent;
  border-bottom: 173px solid #343434;
}
複製程式碼

直角三角形

設定兩邊的寬度為0。

/* 填充右下角的三角形 */
div {
  width: 0
  border: 0 solid transparent
  border-left: 100px solid transparent
  border-bottom: 100px solid #343434
}
複製程式碼

帶邊框的三角形

pen demo

兩個重疊。(但是不夠智慧)

<div id="col1"></div>
<div id="col2"></div>
複製程式碼

body, html
  margin: 0
  background-color: #333
#col1, #col2
  width: 0
  border: 100px solid transparent
  border-bottom: 173px solid #fff
#col2
  position: absolute
  left: 0
  top: 2px
  border-bottom-color: #222
  transform: scale(0.98)
複製程式碼

css多列等高如何實現？

參考：八種建立等高列布局

1. 背景圖

優點：

實現方法簡單，相容性強，不需要太多的css樣式就可以輕鬆實現。
缺點：

使用這種方法不適合流體佈局等高列的佈局；

需要更換背景色或實現其他列數的等高列時，都需要重新制作過背景圖。

2. div巢狀+position

demo

原理圖：

優點：

不需要藉助其他東西（javascript,背景圖等）,而是純CSS和HTML實現的等高列布局；

相容所有瀏覽器（包括IE6），並且可以很容易建立任意列數。
缺點：

不像其他方法一樣簡單明瞭，給你理解會帶來一定難度；

複雜的div巢狀，html語義不清晰（你有多少列就需要多少個容器）。

3. 正padding和負margin正負值相抵

demo

原理：

利用padding-bottom|margin-bottom正負值相抵；

設定父容器設定超出隱藏（overflow:hidden），這樣子父容器的高度就還是它裡面的列沒有設定padding-bottom時的高度，當它裡面的任一列高度增加了，則父容器的高度被撐到裡面最高那列的高度，其他比這列矮的列會用它們的padding-bottom補償這部分高度差。
優點：

可實現多列等高佈局；

能實現列與列之間分隔線效果；

結構簡單；

相容所有瀏覽器。
缺點：

若希望每列四周有邊框，則底部（或頂部）邊框無法顯示。
缺點解決辦法：
1. 用和邊框一致的背景圖（我不喜歡這種型別的方法，後續更改很麻煩）
2. 使用div來模仿列的邊框
  
  demo
  
  每列中新增一個div（可以直接用::after偽元素代替），設定定位為absolute；
  
  在列的上一級的wrapper中，定位relative；
  
  這樣，就能讓absolute根據wrapper的大小和位置進行定位了。

4. 邊框 + 絕對定位/float “模擬”

絕對定位 demo， float demo

感覺思路上其實與“2. div巢狀+position”類似，都是在底部設定背景層，再在上面鋪文字層。（我自己改了以下，這樣也行 ↪ demo）

優點：

結構簡單，相容各瀏覽器，容易掌握。
缺點：

受限於邊框+內容最多三欄，所以無法實現三欄以上的效果。

5. 模擬表格佈局

demo

優點：

這是一種非常簡單，易於實現的方法。
缺點：

相容性不好，在ie6-7無法正常執行。

6. flex佈局

優點：

簡單易用，適用於移動端。
缺點：

CSS3新功能，不相容老的瀏覽器。

面試題整理—CSS部分
2019-02-21
面試題CSS
常見前端面試題整理——HTML、CSS篇
2018-08-10
前端面試題HTMLCSS
面試題整理
2024-03-19
面試題
「面試題」20+Vue面試題整理
2020-06-04
面試題Vue
JavaScript面試題整理
2019-03-30
JavaScript面試題
Laravel 面試題整理
2020-11-23
Laravel面試題
Flume面試題整理
2021-11-14
面試題
近期面試題整理
2018-02-01
面試題
css面試題
2019-07-20
CSS面試題
前端面試之路一(HTML+CSS面試整理)
2018-11-30
前端面試HTMLCSS
[面試題]大廠常見面試題整理
2017-12-27
面試題
【面試】面試常見問題整理
2018-03-13
面試
linux面試題整理
2020-07-26
Linux面試題
Java面試題整理《上》
2018-09-20
Java面試題
前端面試題整理
2021-01-03
前端面試題
Spark面試題整理（三）
2021-10-30
Spark面試題
iOS 面試題整理(一)
2017-12-13
iOS面試題
C++ 面試題整理
2014-03-20
C++面試題
前端面試資料整理【css篇】
2022-04-30
前端面試CSS
CSS面試題（二）
2020-10-19
CSS面試題
HashMap常見面試題整理
2019-08-03
HashMap面試題
Vue.js 面試題整理
2019-06-28
Vue.js面試題
Vue常見面試題整理
2018-09-20
Vue面試題
整理kafka常見面試題
2020-11-26
Kafka面試題
面試題整理之Vue篇
2021-11-17
面試題Vue
前端面試題整理--http
2020-10-03
前端面試題HTTP
Android面試問題整理
2018-01-23
Android面試
【PHP】面試題整理PHP部分
2017-06-26
PHP面試題
iOS面試題·自整理·Two
2016-06-26
iOS面試題
面試題：HTML+CSS
2019-12-01
面試題HTMLCSS
css面試題總結
2019-02-19
CSS面試題
Web前端面試題整理2
2021-09-09
Web前端面試題
吐血整理Redis面試題66道
2020-11-19
Redis面試題
那些常見的面試題整理
2021-01-03
面試題
前端面試題整理彙總
2016-11-17
前端面試題
全面整理的C++面試題
2014-05-27
C++面試題
前端面試題 | CSS篇
2019-04-11
前端面試題CSS
前端面試題-CSS Hack
2019-02-16
前端面試題CSS

CSS面試題整理

介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？

如何居中div？

水平居中

水平垂直居中

CSS選擇符有哪些？

哪些屬性可以繼承？

CSS優先順序演算法如何計算？

CSS3新增偽類有哪些？

display有哪些值？說明他們的作用。

position的值relative和absolute定位原點是？

CSS3有哪些新特性？

請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

什麼是flexbox

應用場景

我在專案中的應用

用純CSS建立一個三角形的原理是什麼？

基礎

等邊三角形

直角三角形

帶邊框的三角形

css多列等高如何實現？

1. 背景圖

2. div巢狀+position

3. 正padding和負margin正負值相抵

4. 邊框 + 絕對定位/float “模擬”

5. 模擬表格佈局

6. flex佈局

相關文章