【面試說】字節(jié)跳動最愛考的前端面試題：CSS 基礎(chǔ)
注意：每道題前面出現(xiàn)的 (xx) 數(shù)字代表這道題出現(xiàn)的頻次，此 CSS 基礎(chǔ)是基于 30+ 篇前端面經(jīng)整理出的問題和對應(yīng)的回答、參考鏈接等。文章內(nèi)容為拿到 Offer 的本人整理。
（2）寫代碼：css div 垂直水平居中，并完成 div 高度永遠(yuǎn)是寬度的一半（寬度可以不指定）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.outer {
width: 400px;
height: 100%;
background: blue;
margin: 0 auto;
display: flex;
align-items: center;
}
.inner {
position: relative;
width: 100%;
height: 0;
padding-bottom: 50%;
background: red;
}
.box {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<div class="box">hello</div>
</div>
</div>
</body>
</html>
參考鏈接
https://github.com/cttin/cttin.github.io/issues/2
請你講一講 CSS 的權(quán)重和優(yōu)先級
權(quán)重
從0開始，一個行內(nèi)樣式+1000，一個id選擇器+100，一個屬性選擇器、class或者偽類+10，一個元素選擇器，或者偽元素+1，通配符+0
優(yōu)先級
權(quán)重相同，寫在后面的覆蓋前面的 使用 !important達(dá)到最大優(yōu)先級，都使用!important時，權(quán)重大的優(yōu)先級高
參考鏈接
https://zhuanlan.zhihu.com/p/41604775
問：介紹 Flex 布局，flex 是什么屬性的縮寫：
彈性盒布局，CSS3 的新屬性，用于方便布局，比如垂直居中 flex屬性是 flex-grow、flex-shrink和flex-basis的簡寫
參考鏈接
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
問：CSS 怎么畫一個大小為父元素寬度一半的正方形？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
width: 400px;
height: 600px;
background: red;
}
.inner {
width: 50%;
padding-bottom: 50%;
background: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
CSS實(shí)現(xiàn)自適應(yīng)正方形、等寬高比矩形
width 設(shè)置百分比 padding 撐高 如果只是要相對于 body 而言的話，還可以使用 vw 和 vh 偽元素設(shè)置 margin-top: 100%撐高
雙重嵌套，外層 relative，內(nèi)層 absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
padding-top: 50%;
height: 0;
background: #ccc;
width: 50%;
position: relative;
}
.inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">hello</div>
</div>
</body>
</html>
padding 撐高畫正方形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
width: 400px;
height: 600px;
background: blue;
}
.inner {
width: 100%;
height: 0;
padding-bottom: 100%;
background: red;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
相對于視口 VW VH
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.inner {
width: 1vw;
height: 1vw;
background: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
偽元素設(shè)置 margin-top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.inner {
width: 100px;
overflow: hidden;
background: blue;
}
.inner::after {
content: "";
margin-top: 100%;
display: block;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
參考鏈接
http://www.fly63.com/article/detial/2104
（2）問：實(shí)現(xiàn)兩欄布局的方式：
左 float，然后右 margin-left（右邊自適應(yīng)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
height: 500px;
}
.aside {
width: 300px;
float: left;
background: yellow;
}
.main {
background: aqua;
margin-left: 300px;
}
</style>
</head>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
</html>
右 float，margin-right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
height: 500px;
}
.aside {
width: 300px;
float: right;
background: yellow;
}
.main {
background: aqua;
margin-right: 300px;
}
</style>
</head>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
</html>
BFC + float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
height: 500px;
}
.aside {
width: 300px;
float: left;
background: yellow;
}
.main {
overflow: hidden;
background: aqua;
}
</style>
</head>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
</html>
float + 負(fù) margin
<head>
<style>
.left {
width: 100%;
float: left;
background: #f00;
margin-right: -200px;
}
.right {
float: left;
width: 200px;
background: #0f0;
}
</style>
</head>
<div class="left"><p>hello</p></div>
<div class="right"><p>world</p></div>
圣杯布局實(shí)現(xiàn)兩欄布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* div {
height: 500px;
} */
/* .box {
overflow: hidden;
} */
/* .container {
padding: 0 300px 0 200px;
border: 1px solid black;
} */
html,
body {
height: 100%;
}
div {
height: 100%;
}
.container {
display: flex;
}
.content {
flex: 1 1;
order: 2;
background: #f00;
}
.left {
float: left;
width: 100%;
background: #0f0;
}
.right {
float: left;
width: 300px;
margin-left: -300px;
background: #00f;
}
</style>
</head>
<body>
<div class="container">
<div class="left">你好</div>
<div class="right">我好</div>
</div>
</body>
</html>
flex 實(shí)現(xiàn)兩欄布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* div {
height: 500px;
} */
/* .box {
overflow: hidden;
} */
/* .container {
padding: 0 300px 0 200px;
border: 1px solid black;
} */
html,
body {
height: 100%;
}
div {
height: 100%;
}
.container {
display: flex;
}
.content {
flex: 1 1;
order: 2;
background: #f00;
}
.left {
flex: 0 0 200px;
background: #0f0;
}
.right {
flex: 1 1;
background: #00f;
}
</style>
</head>
<body>
<div class="container">
<div class="left">你好</div>
<div class="right">我好</div>
</div>
</body>
</html>
參考鏈接：https://juejin.im/post/5e8d5268f265da480f0f9c6e#heading-8
position + margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* div {
height: 500px;
} */
/* .box {
overflow: hidden;
} */
/* .container {
padding: 0 300px 0 200px;
border: 1px solid black;
} */
html,
body {
height: 100%;
}
div {
height: 100%;
}
.container {
display: flex;
position: relative;
}
.content {
flex: 1 1;
order: 2;
background: #f00;
}
.left {
position: absolute;
width: 300px;
background: #0f0;
}
.right {
width: 100%;
margin-left: 300px;
background: #00f;
}
</style>
</head>
<body>
<div class="container">
<div class="left">你好</div>
<div class="right">我好</div>
</div>
</body>
</html>
手寫題：實(shí)現(xiàn)一個兩欄三列的布局，并且要求三列等高，且以內(nèi)容最多的一列的高度為準(zhǔn)。
實(shí)現(xiàn)三列布局的方式
position + margin-left + margin-right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
height: 500px;
}
.box {
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
background: green;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 200px;
background: red;
}
.middle {
margin-left: 200px;
margin-right: 200px;
background: black;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>
通過 float + margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
height: 500px;
}
.left {
float: left;
width: 200px;
height: 200px;
background: green;
}
.right {
float: right;
width: 200px;
height: 200px;
background: red;
}
.middle {
margin-left: 210px;
margin-right: 210px;
background: black;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
</body>
</html>
圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
padding: 0 300px 0 200px;
border: 1px solid black;
}
.content {
float: left;
width: 100%;
background: #f00;
}
.left {
width: 200px;
background: #0f0;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 300px;
background: #00f;
float: left;
margin-left: -300px;
position: relative;
right: -300px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">中間內(nèi)容</div>
<div class="left">左側(cè)區(qū)域</div>
<div class="right">右側(cè)區(qū)域</div>
</div>
</body>
</html>
雙飛翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
height: 100%;
}
div {
height: 100%;
}
.main {
float: left;
width: 100%;
background: #f00;
}
.main .content {
margin-left: 200px;
margin-right: 300px;
}
.left {
width: 200px;
background: #0f0;
float: left;
margin-left: -100%;
}
.right {
width: 300px;
background: #00f;
float: left;
margin-left: -300px;
}
</style>
</head>
<body>
<div class="main">
<div class="content">hello world</div>
</div>
<div class="left">你好</div>
<div class="right">王鵬浩</div>
</body>
</html>
flex 布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
height: 100%;
}
div {
height: 100%;
}
.container {
display: flex;
}
.content {
flex: 1 1;
order: 2;
background: #f00;
}
.left {
flex: 0 0 200px;
order: 1;
background: #0f0;
}
.right {
flex: 0 0 300px;
order: 3;
background: #00f;
}
</style>
</head>
<body>
<div class="container">
<div class="content">hello world</div>
<div class="left">你好</div>
<div class="right">王鵬浩</div>
</div>
</body>
</html>
參考鏈接
https://segmentfault.com/a/1190000003942591 https://blog.csdn.net/crystal6918/article/details/55224670 https://blog.csdn.net/zhoulei1995/article/details/80161240
問：CSS 動畫有哪些？
animation
animation、transition、transform、translate 這幾個屬性要搞清楚：
animation：用于設(shè)置動畫屬性，他是一個簡寫的屬性，包含6個屬性 transition：用于設(shè)置元素的樣式過度，和animation有著類似的效果，但細(xì)節(jié)上有很大的不同 transform：用于元素進(jìn)行旋轉(zhuǎn)、縮放、移動或傾斜，和設(shè)置樣式的動畫并沒有什么關(guān)系 translate：translate只是transform的一個屬性值，即移動，除此之外還有 scale 等
參考資料
https://juejin.im/post/5b137e6e51882513ac201dfb#heading-2
（3）問：用css2和css3分別寫一下垂直居中和水平居中
CSS2
水平居中：
div + margin: auto; span + text-align
垂直居中
使用 position 然后 left/top 和 margin 的方式垂直居中（已知寬高和未知寬高） 使用 position + margin 使用 display: table-cell;
已知寬高，進(jìn)行水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
position: relative;
width: 400px;
height: 600px;
background: blue;
}
.inner {
position: absolute;
width: 200px;
height: 300px;
background: red;
left: 50%;
top: 50%;
margin: -150px 0 0 -100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
寬高未知，比如 內(nèi)聯(lián)元素，進(jìn)行水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
width: 400px;
height: 600px;
/* background: blue; */
border: 1px solid red;
background-color: transparent;
position: relative;
}
.inner {
position: absolute;
background: red;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="outer">
<span class="inner">我想居中顯示</span>
</div>
</body>
</html>
絕對定位的 div 水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
width: 400px;
height: 600px;
/* background: blue; */
border: 1px solid red;
background-color: transparent;
position: relative;
}
.inner {
position: absolute;
background: red;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 200px;
height: 300px;
margin: auto;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">我想居中顯示</div>
</div>
</body>
</html>
圖片和其他元素使用 display: table-cell; 進(jìn)行垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
width: 400px;
height: 600px;
/* background: blue; */
border: 1px solid red;
background-color: transparent;
display: table-cell;
vertical-align: middle;
}
.inner {
background: red;
width: 200px;
height: 300px;
border: 1px solid blue;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">我想居中顯示</div>
</div>
</body>
</html>
CSS3
垂直、水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
width: 400px;
height: 600px;
display: flex;
/* 垂直居中 */
align-items: center;
/* 水平居中 */
justify-content: center;
border: 1px solid red;
background-color: transparent;
}
.inner {
background: red;
width: 200px;
height: 300px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">我想居中顯示</div>
</div>
</body>
</html>
（2）問：visibility 和 display 的差別（還有opacity)
visibility 設(shè)置 hidden 會隱藏元素，但是其位置還存在與頁面文檔流中，不會被刪除，所以會觸發(fā)瀏覽器渲染引擎的重繪 display 設(shè)置了 none 屬性會隱藏元素，且其位置也不會被保留下來，所以會觸發(fā)瀏覽器渲染引擎的回流和重繪。 opacity 會將元素設(shè)置為透明，但是其位置也在頁面文檔流中，不會被刪除，所以會觸發(fā)瀏覽器渲染引擎的重繪
問：opacity 可以有過渡效果嘛？
可以設(shè)置過渡效果
問：BFC 與 IFC 區(qū)別
BFC 是塊級格式上下文，IFC 是行內(nèi)格式上下文：
內(nèi)部的 Box 會水平放置 水平的間距由 margin，padding，border 決定
參考鏈接：
https://juejin.im/entry/5938daf7a0bb9f006b2295db https://zhuanlan.zhihu.com/p/74817089
問：BFC會與float元素相互覆蓋嗎？為什么？舉例說明
不會，因?yàn)?BFC 是頁面中一個獨(dú)立的隔離容器，其內(nèi)部的元素不會與外部的元素相互影響，比如兩個 div，上面的 div 設(shè)置了 float，那么如果下面的元素不是 BFC，也沒有設(shè)置 float，會形成對上面的元素進(jìn)行包裹內(nèi)容的情況，如果設(shè)置了下面元素為 overflow：hidden；屬性那么就能夠?qū)崿F(xiàn)經(jīng)典的兩列布局，左邊內(nèi)容固定寬度，右邊因?yàn)槭?BFC 所以會進(jìn)行自適應(yīng)。
參考鏈接
https://zhuanlan.zhihu.com/p/25321647
問：了解box-sizing嗎？
box-sizing 屬性可以被用來調(diào)整這些表現(xiàn):
content-box是默認(rèn)值。如果你設(shè)置一個元素的寬為100px，那么這個元素的內(nèi)容區(qū)會有100px 寬，并且任何邊框和內(nèi)邊距的寬度都會被增加到最后繪制出來的元素寬度中。border-box告訴瀏覽器：你想要設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的。也就是說，如果你將一個元素的width設(shè)為100px，那么這100px會包含它的border和padding，內(nèi)容區(qū)的實(shí)際寬度是width減去(border + padding)的值。大多數(shù)情況下，這使得我們更容易地設(shè)定一個元素的寬高。
（2）什么是 BFC
BFC（Block Formatting Context）格式化上下文，是 Web 頁面中盒模型布局的 CSS 渲染模式，指一個獨(dú)立的渲染區(qū)域或者說是一個隔離的獨(dú)立容器。
形成 BFC 的條件
五種：
浮動元素，float 除 none 以外的值 定位元素，position（absolute，fixed） display 為以下其中之一的值 inline-block，table-cell，table-caption overflow 除了 visible 以外的值（hidden，auto，scroll） HTML 就是一個 BFC
BFC 的特性：
內(nèi)部的 Box 會在垂直方向上一個接一個的放置。 垂直方向上的距離由 margin 決定 bfc 的區(qū)域不會與 float 的元素區(qū)域重疊。 計算 bfc 的高度時，浮動元素也參與計算 bfc 就是頁面上的一個獨(dú)立容器，容器里面的子元素不會影響外面元素。
（2）問：了解盒模型嗎？
CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、實(shí)際內(nèi)容（content）四個屬性。CSS盒模型：標(biāo)準(zhǔn)模型 + IE模型
標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding
低版本IE盒子模型：寬度=內(nèi)容寬度（content+border+padding），如何設(shè)置成 IE 盒子模型:
box-sizing: border-box;
參考鏈接
https://zhuanlan.zhihu.com/p/74817089
問：說一下你知道的position屬性，都有啥特點(diǎn)？
static：無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不會被應(yīng)用。relative：對象遵循正常文檔流，但將依據(jù)top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。absolute：對象脫離正常文檔流，使用top，right，bottom，left等屬性進(jìn)行絕對定位。而其層疊通過z-index屬性定義。fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點(diǎn)進(jìn)行定位，當(dāng)出現(xiàn)滾動條時，對象不會隨著滾動。而其層疊通過z-index屬性定義。sticky：具體是類似 relative 和 fixed，在 viewport 視口滾動到閾值之前應(yīng)用 relative，滾動到閾值之后應(yīng)用 fixed 布局，由 top 決定。
問：兩個div上下排列，都設(shè)margin，有什么現(xiàn)象？
都正取大 一正一負(fù)相加
問：為什么會有這種現(xiàn)象？你能解釋一下嗎
是由塊級格式上下文決定的，BFC，元素在 BFC 中會進(jìn)行上下排列，然后垂直距離由 margin 決定，并且會發(fā)生重疊，具體表現(xiàn)為同正取最大的，同負(fù)取絕對值最大的，一正一負(fù)，相加
BFC 是頁面中一個獨(dú)立的隔離容器，內(nèi)部的子元素不會影響到外部的元素。
問：清除浮動有哪些方法？
不清楚浮動會發(fā)生高度塌陷：浮動元素父元素高度自適應(yīng)（父元素不寫高度時，子元素寫了浮動后，父元素會發(fā)生高度塌陷）
clear清除浮動（添加空div法）在浮動元素下方添加空div,并給該元素寫css樣式：{clear:both;height:0;overflow:hidden;} 給浮動元素父級設(shè)置高度 父級同時浮動（需要給父級同級元素添加浮動） 父級設(shè)置成inline-block，其margin: 0 auto居中方式失效 給父級添加overflow:hidden 清除浮動方法 萬能清除法 after偽類 清浮動（現(xiàn)在主流方法，推薦使用）
.float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}
參考鏈接
https://juejin.im/post/5cc59e41e51d456e62545b66 https://segmentfault.com/a/1190000013325778 https://juejin.im/post/5ca80d366fb9a05e3345dccf#heading-16 https://juejin.im/post/5e8d5268f265da480f0f9c6e#heading-33 https://juejin.im/post/5cc59e41e51d456e62545b66#heading-75 https://juejin.im/post/5a0c184c51882531926e4294#heading-50 https://juejin.im/post/5ce607a7e51d454f6f16eb3d#heading-34 https://juejin.im/post/5e8b163ff265da47ee3f54a6#heading-12
歡迎關(guān)注「前端雜貨鋪」，一個有溫度且致力于前端分享的雜貨鋪
關(guān)注回復(fù)「加群」，可加入雜貨鋪一起交流學(xué)習(xí)成長
喜歡本文，點(diǎn)個“在看”告訴我
評論
圖片
表情