修改了垂直居中通用方法，父元素需要添加height;
都是同學，我面試碰到的題，都總結一下，萬一哪次讓我碰到了呢，
後面內容太多，這篇就提一下有什麼，具體內容我會另外寫篇博文，不然寫在一起看起來很費事兒~
1.SEO
seo（Search Engine Optimization）:搜索引擎的優化，具體是指通過網站結構調整、網站內容建設、網站代碼優化、以及站外優化等使網站滿足搜索引擎的收錄排名需求，提高網站前端對於SEO的貢獻。（百度）SEO包含站外SEO和站內SEO兩方面；SEO是指爲了從搜索引擎中獲得更多的免費流量，從網站結構、內容建設方案、用戶互動傳播、頁面等角度進行合理規劃，使網站更適合搜索引擎的索引原則的行爲；使網站更適合搜索引擎的索引原則又被稱爲對搜索引擎優化，對搜索引擎優化不僅能夠提高SEO的效果，還會使搜索引擎中顯示的網站相關信息對用戶來說更具有吸引力。
具體要注意的幾點：
- 合理的title、description、keywords:搜索引擎對於三項的權重逐個減小，
- title要強調重點,重要關鍵詞出現不要超過兩次而且要靠前，不同的頁面要使用不同的title;
- description把頁面內容高度概括，長度合適，不可過分堆砌關鍵詞，不同的頁面要使用不同的description;
- keywords列舉出重要關鍵詞即可;
- (description\keywords屬於的屬性);
- 重要的內容一定不要使用js輸出：爬蟲不會執行js獲取內容；
如果圖片不是單純的裝飾圖片那必須添加alt;
重要內容的HTML房在前面：搜索引擎抓取HTML的順序是從上而下，而且有的搜索引擎對搜索長度是由限制的；爲了避免重要內容被忽略，一定要往前放；
語義化HTML代碼，符合W3C標準規範，可以讓搜索引擎更加容易理解網頁；
提高網站速度：網站加載速度是搜索引擎排序的重要指標；
儘量不要使用iframe標籤：搜索引擎抓取不到
CSS佈局問題
常用的水平居中、垂直居中，雙向居中，多列布局（傳統盒模型佈局和flex佈局）
水平居中
- 子元素是行內元素 text-align：center；
- 子元素是定寬塊狀元素：margin：auto；
- 通用：父元素設置display：flex；justify-content：center；
垂直居中：
- 父元素一定，子元素是行內元素（單行），設置父元素line-height和height相等
- 父元素一定，子元素行內元素（多行）/子元素是塊狀元素，設置父元素display：table-cell；vertical-align：middle；
- 通用：給父元素設置height，display：flex；align-items：center;
水平垂直都居中
- 父元素定寬高、子元素定不定寬高都可以，給父元素設置display：flex；align-items：cnter，子元素設置margin：auto；
.container {
width: 300px;
height: 500px;
display: flex;
align-items: center;
border: 1px solid red;
}
.container div{
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>
</body>
<div class="container">
<div>1d</div>
<div>dd</div>
<div>d</div>
</div>
父元素定高不定寬，子元素可以都不定
雙向居中2
.container {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
border:1px solid red ;
}
.container div{
border: 1px solid red;
}<div class="container">
<div>1ddssssssssssddddd</div>
<div>ddddttttttttttttttttttttttddd</div>
<div>dddduuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu</div>
</div>
垂直居中第二種情況
<style>
.parent,.child{
border: 1px solid red;
}
.parent{
width: 600px;
height: 300px;
display: table-cell;
vertical-align: middle;
}
</style>
<div class="parent">
<span class="child">3333</span>
<span class="child">3333</span>
<span class="child">3333</span>
<span class="child">3333</span>
<span class="child">3333</span>
<span class="child">3333</span>
<span class="child">3333</span>
<span class="child">3333</span>
<span class="child">3333</span>
<span class="child">3333</span>
</div>
多列布局,（雙飛翼佈局，聖盃佈局）
- 三列布局，float+margin：給左邊元素設置float：left，右邊float：right；且左右元素需要設置寬度，然後給中間的元素設置margin：0 右邊盒子寬度 0 左邊盒子寬度；
- 覺得挺好用的就是寬度用百分數表示，父元素也無需定寬（百分數表示都可以），給子元素均設置float：left；然後子元素的寬度加起來是100%就好啦，（這裏要注意如果你有設置邊框之類的記得設置子元素box-sizing：border-box；）
- 用position+float+margin也可以實現
在CSS3中引入了box-sizing屬性,
- content-box：標準盒模型，CSS定義的寬高只包含content的寬高
- border-box：IE盒模型，CSS定義的寬高包括了content，padding和border
- ## position的三個屬性值 ##
- relative：相對於自身原本位置進行偏移，仍然處在標準文檔流中，可以設置z-index屬性
- static：默認值；
- fixed：相對於瀏覽器視口，處於固定狀態，即使滑動滾輪還是在原來位置，脫離文檔流
- absolute：相對於已定位父元素/祖先元素來說，如果沒有則相對於body，脫離文檔流，可設置z-index
BFC塊級格式化上下文
詳細內容我另外開了一篇博文~ ，每一個都試了一下。
特性：
- 內部的Box會在垂直方向，一個接一個地放置。
- Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
- 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
- BFC的區域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
- 計算BFC的高度時，浮動元素也參與計算
怎樣纔會觸發？如下：
- float 除了none以外的值
- overflow 除了visible 以外的值（hidden，auto，scroll ）
- display (table-cell，table-caption，inline-block, flex, inline-flex)
- position值爲（absolute，fixed）
- fieldset元素
- 絕對定位元素(position:absolute 或fixed)
- 行內塊inline-block(元素的display:inline-block)
- 表格單元格(元素的display:table-ceil,HTML表格默認屬性)
- 彈性盒flex boxes(元素地display:flex或inline-flex)
下面的內容我都重新開一篇博文寫，寫在一起太長了，
雙向綁定
事件委託
拖拽
es6
數組去重
new做了什麼
響應式佈局
移動端
rem
深拷貝，淺拷貝
繼承
promise
border三角形
.one{
width: 0px;
height: 0px;
border-top: 200px solid red;
border-right: 200px solid transparent;
border-bottom: 20px solid transparent;
border-left: 200px solid transparent;
}
<div class="one"></div>可以通過改變各邊border的寬度，顏色來做各種圖形
.one{
width: 0px;
height: 0px;
border-top: 100px solid red;
border-right: 100px solid yellow;
border-bottom: 100px solid blue;
border-left: 100px solid purple;
}
梯形
.one{
width: 200px;
height: 0px;
border-top: 200px solid red;
border-right: 200px solid transparent;
border-bottom: 20px solid transparent;
border-left: 200px solid transparent;
}
應用，哇不學不知道 css真的好厲害，下面這個圖，圓角和直角三角形組成的這個圖形就是用上面的border實現的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border</title>
<style>
.one{
width: 500px;
height: 60px;
background-color: pink;
text-align: center;
line-height: 60px;
}
.top{
width: 480px;
border-top: 20px solid transparent;
border-right: 10px solid transparent;
border-bottom: 2px solid pink;
border-left: 10px solid transparent;
}
.bottom{
width: 480px;
border-top: 2px solid #ffc0cb;
border-right: 10px solid transparent;
border-bottom: 2px solid transparent;
border-left: 10px solid transparent;
}
.triangle{
width: 30px;
margin-left: 30px;
margin-top: -5px;
/* height: 20px; */
border-top: 15px solid pink;
border-right: 20px solid #ff000005;
border-bottom: 20px solid transparent;
border-left: 30px solid pink;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="one">冒泡~~~~</div>
<div class="bottom"></div><div class="triangle"></div>
</body>
</html>
