前端基礎面試題之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,快速升職加薪,走上人生巔峰。