隨筆
最近出去面了一次試。去之前信心滿滿，去之後灰頭土臉，因為連最簡單的“css居中方式有多少種”、“說說js資料型別”這種入門問題竟然回答的支支吾吾，也怪不得面試官20分鐘就優雅的把我送了出來。
痛定思痛，總結了一些基礎面試題，望壯士你出門迎敵時，不要像我一樣尷尬……
清除浮動方式
1、使用偽類。
也可以在父級標籤最後新增一個div，div中的屬性同偽類。原理其實和偽類是一樣的，都是利用clear：both
.father :after {
clear:both;
content:"";
display:block;
}.father{
zoom:1;
//IE專有屬性，解決ie6、7浮動問題
}複製程式碼2、父級標籤觸發BFC(下面有專門介紹)
.father {
overflow:auto;
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不為visible
前端精選文摘：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動畫，通過關鍵幀控制動畫的每一步，控制更為精確，從而可以製作更為複雜的動畫。