1. 說(shuō)一說(shuō)你平時(shí)寫(xiě)代碼遵守的編碼規(guī)范
我是借鑒騰訊AlloyTeam團(tuán)隊(duì)代碼規(guī)范 再結(jié)合公司以前定制的方案 編寫(xiě)自己的代碼。
代碼不僅要能夠運(yùn)行實(shí)現(xiàn)功能，產(chǎn)品出來(lái)后還有不斷的更新迭代 維護(hù)的很長(zhǎng)一段過(guò)程 公司都是團(tuán)隊(duì)工作 規(guī)范化后
review 代碼的時(shí)候就在心中有一套規(guī)范去查看代碼 能夠節(jié)省debug 查閱代碼 溝通中產(chǎn)生的時(shí)間成本
2. 垂直居中有幾種實(shí)現(xiàn)方式，給出代碼范例
開(kāi)始好奇
margin: 0 auto 可以 使塊級(jí)元素水平居中 ·margin：auto 0 應(yīng)該能使塊級(jí)元素垂直居中，然而不行
例子1
不行的原因
CSS2的標(biāo)準(zhǔn)：計(jì)算高度時(shí)如果 margin-top 或 margin-bottom 的值為 auto, 則他們值為0
開(kāi)始思考
既然 auto不能用，于是自己這是 利用calc計(jì)算出元素居中的距離 向下移動(dòng) 50% 在少移動(dòng)自身高度一半 居中
例子2
CSS2的標(biāo)準(zhǔn)：如果使用百分比作為 margin-top的值，則百分比的基準(zhǔn)是父元素的 寬度 寬度 寬度 是不是很蒙蔽
解決問(wèn)題？
記得我們目的是讓 元素向下移到居中的高度 margin-top是按父元素的寬度算 但是還有定位 的 top/bottom 是按父元素的高度算
例子三
真的解決問(wèn)題？
設(shè)計(jì)說(shuō)，幫忙在居中元素里面增加點(diǎn)內(nèi)容，內(nèi)容不固定 高度也可能會(huì)超過(guò)你設(shè)定的元素 你減去的元素高度是不固定的 這樣就無(wú)法計(jì)算你要移動(dòng)的高度了 所以沒(méi)有真的解決問(wèn)題（當(dāng)然上面也是一個(gè)固定場(chǎng)景解決垂直居中的方法）
再次陷入深深的思考
在css屬性里找呀找 找呀找 找呀找
找到一個(gè)屬性名 為 vertical-align， 而且它還有個(gè)值 是 vertical-align: middle！ 用了用 然而并沒(méi)卵用
查看文檔： vertical-align是用來(lái)指定行內(nèi)元素 和 table-cell 的垂直對(duì)齊方式；
嘗試： 將元素轉(zhuǎn)化為table 父元素加上 display: table, 為子元素 加上 display: table-cell 來(lái)將他們變成表格的樣式， 在為子元素加上 vertical-align: middle
例子4
居中了 而且也跟子元素的實(shí)際高度無(wú)關(guān) 兼容性還好， 但是父元素的寬度變小了 原因是 table 本質(zhì)上也是 inline 元素， 因此現(xiàn)在變成inline的父元素， 他的寬度將與子元素的寬度相同。 到時(shí)也可以在父元素加上 width: 100% 來(lái)強(qiáng)制指定寬度 （使用inline-block注意解決間隙問(wèn)題）
另一個(gè)問(wèn)題是子元素的高度變得和父元素一樣高了。這對(duì)讀者而言也許是問(wèn)題，也許不是，就要自己考慮了
擁抱CSS3
之前我們用過(guò) position： relative + top： calc（50% - height/2）的方法， 但是這種方法的缺點(diǎn)是需要知道子元素的高度， 但有了 transform 我們就可以用 translateY（-50%）來(lái)達(dá)到 -height/2 的 目的 而不需要知道居中元素的高度
真正的解決問(wèn)題了么
<div class="container">
<div class="vertical">
<p id="p1"> A paragraph 1 </p>
<p id="p2"> A paragraph 2 </p>
</div>
</div>
如上 HTML 文件，我們?yōu)榱司又?p1 和 p2，而為它們加了一個(gè)層包裹層 .vertical。雖然也不是什么難事，但在某些情形下，我們是不能修改文檔的結(jié)構(gòu)的，其中一種可能是文檔的內(nèi)容是動(dòng)態(tài)生成的。也就是，我們希望在現(xiàn)有的文檔結(jié)構(gòu)下，讓某些內(nèi)容垂直居中，這也許是最后一個(gè)痛點(diǎn)了。
那么下面我們就來(lái)看看最終的殺器：flexbox。
真正解決問(wèn)題（依然有兼容煩擾， 可以降級(jí)選擇以上能夠兼容方法）
解決問(wèn)題三行代碼， 足矣。。。。
代碼題
代碼
