前端基礎面試題之CSS篇
最近出去面了一次試。去之前信心滿滿，去之後灰頭土臉，因為連最簡單的“css居中方式有多少種”、“說說js資料型別”這種入門問題竟然回答的支支吾吾，也怪不得面試官20分鐘就優雅的把我送了出來。
痛定思痛，總結了一些基礎面試題，望壯士你出門迎敵時，不要像我一樣尷尬……
清除浮動方式
1、使用偽類。
也可以在父級標籤最後新增一個div，div中的屬性同偽類。原理其實和偽類是一樣的，都是利用clear：both
.father :after { clear:both; content:""; display:block; } .father{ zoom:1;//IE專有屬性，解決ie6、7浮動問題 }
2、父級標籤觸發BFC(下面有專門介紹)
.father :after {
clear:both;
content:"";
display:block;
}
.father{
zoom:1;//IE專有屬性，解決ie6、7浮動問題
}
未知寬高的元素實現水平垂直居中
方法一：父元素dispaly:table,子元素display:cell-table。
優勢：父元素可以動態改變高度。
劣勢：table屬性容易造成多次reflow,IE8以下不支援
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>方法一</title> </head> <style> .parent1{ display: table; height:300px; width: 300px; background-color: #FD0C70; } .parent1 .child{ display: table-cell; vertical-align: middle; text-align: center; color: #fff; font-size: 16px; } </style> <body> <div class="parent1"> <div class="child">hello world-1</div> </div> </body> </html>
方法二：利用空元素或偽類 •下面程式碼中的註釋部分為替代after偽類的另一種寫法，原理一樣
優點：相容性好
缺點：多出來個空元素、麻煩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>未知寬高元素水平垂直居中</title> </head> <style> .wrap { position: absolute; width: 100%; height: 100%; text-align: center; background: #92b922; } .test { background: #de3168; display: inline-block; color: #fff; padding: 20px; } .wrap:after { display: inline-block; content: ''; width: 0px; height: 100%; vertical-align: middle; } /* .vamb{ display: inline-block; width: 0px; height: 100%; vertical-align: middle; } */ </style> <div class="wrap"> <!-- <b class="vamb"></b> --> <div class="test"> 水平垂直居中了吧<br> 兩行文字哦 </div> </div> </html>
方法三：絕對定位+transform
優點：方便，支援webkit核心
缺點：transform相容性差，IE9以下不支援
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知寬高元素水平垂直居中</title>
</head>
<style>
.parent3{
position: relative;
height:300px;
width: 300px;
background: #FD0C70;
}
.parent3 .child{
position: absolute;
top: 50%;
left: 50%;
color: #fff;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent3">
<div class="child">hello world</div>
</div>
</body>
</html>
方法4:flexbox佈局
優點：方便
缺點：相容性不好,IE支援很差
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知寬高元素水平垂直居中</title>
</head>
<style>
.parent4{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height:300px;
background: #FD0C70;
}
.parent4 .child{
color:#fff;
}
</style>
<body>
<div class="parent4">
<div class="child">hello world</div>
</div>
</body>
</html>
BFC
BFC(block formatting context)翻譯為“塊級格式化上下文”，它會生成一個獨立的渲染區域(不影響外面的元素，同時也不受外面元素的影響)，它的生成有以下規則： •內部的box會在垂直方向上一個接一個的放置 •內部box在垂直方向上的距離由margin決定，同屬一個BFC內的相鄰box會發生margin重疊 •每一個內部box的左邊，與BFC的的左邊相接觸，即使存在浮動也是一樣 •BFC的區域不會與float box發生重疊 •計算BFC的高度時，浮動元素也參與計算(上面清除浮動的問題就是這個原理)
觸發BFC的條件： •根元素 •float屬性不為none •position為absolute或者fixed •display為inline-block、table-cell、table-caption、flex、inline-flex •overflow不為hidden
前端精選文摘：BFC 神奇背後的原理 這篇文章說的很清楚，也有相應的原理和例子，可以仔細看看。
實現自適應兩列布局
方法一：右邊元素觸發BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知寬高元素水平垂直居中</title>
</head>
<style>
.father {
background-color: lightblue;
}
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
overflow: auto;
height: 500px;
background-color: lightseagreen
}
</style>
<body>
<div class="father">
<div class='left'>left</div>
<div class='right'>
right
</div>
</div>
</body>
</html>
方法二：margin-left實現 •侷限性：這種方法必須知道左側的寬度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知寬高元素水平垂直居中</title>
</head>
<style>
.father {
background-color: lightblue;
}
.left {
width: 100px;
float: left;
background-color: red;
}
.right {
margin-left: 100px;
background-color: lightseagreen
}
</style>
<body>
<div class="father">
<div class='left'>left</div>
<div class='right'>
right
</div>
</div>
</body>
</html>
三列布局
flex
優點：方便
缺點：還是flex相容性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知寬高元素水平垂直居中</title>
</head>
<style>
.father {
display: flex;
height: 100%;
}
.left,
.right {
flex: 0 1 100px;
background-color: red;
}
.middle {
flex: 1;
height: 100%;
background-color: green;
}
</style>
<body>
<div class="father">
<div class='left'>left</div>
<div class='middle'>middle</div>
<div class='right'>center</div>
</div>
</body>
</html>
負margin佈局(雙飛翼)
優點：市面上使用最多的一個
缺點：麻煩，這是多年前淘寶的老技術了
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>聖盃佈局/雙飛翼佈局</title>
<style>
.mainWrap {
width: 100%;
float: left;
}
.main {
margin: 0 120px;
}
.left,
.right {
float: left;
width: 100px;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -100px;
}
</style>
</head>
<div class="parent" id="parent" style="background-color: lightgrey;">
<div class="mainWrap">
<div class="main" style="background-color: lightcoral;">
main
</div>
</div>
<div class="left" style="background-color: orange;">
left
</div>
<div class="right" style="background-color: lightsalmon;">
right
</div>
</div>
</html>
列舉HTML5新特性 •語意化標籤(nav、aside、dialog、header、footer等) •canvas •拖放相關api •Audio、Video •獲取地理位置 •更好的input校驗 •web儲存(localStorage、sessionStorage) •webWorkers(類似於多執行緒併發) •webSocket
列舉Css3新特性 •選擇器 •邊框(border-image、border-radius、box-shadow) •背景(background-clip、background-origin、background-size) •漸變(linear-gradients、radial-gradents) •字型(@font-face) •轉換、形變(transform) •過度(transition) •動畫(animation) •彈性盒模型(flex-box) •媒體查詢(@media)
transition和animation的區別是什麼？
過渡屬性transition可以在一定的事件內實現元素的狀態過渡為最終狀態，用於模擬一種過渡動畫效果，但是功能有限，只能用於製作簡單的動畫效果；
動畫屬性animation可以製作類似Flash動畫，通過關鍵幀控制動畫的每一步，控制更為精確，從而可以製作更為複雜的動畫。
總結
以上就是我要說的內容，希望以上的內容可以幫助到正在默默艱辛的大家，希望大家在往後的工作與面試中一切順利。
那如何學習才能快速入門並精通呢？
當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。
但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有一套實用的視訊課程用來跟著學習是非常有必要的。
本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q群：866109386，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。
