很久沒(méi)有寫(xiě)WEB前端的知識(shí)了，一個(gè)能力強(qiáng)的SEOer應(yīng)該了解基本的WEB前端知識(shí)，一些簡(jiǎn)單的HTML代碼是經(jīng)常遇到的，細(xì)胞級(jí)代碼優(yōu)化才是一勞永逸的SEO方案。跟著秀站網(wǎng)學(xué)習(xí)快速建站，掌握骨灰級(jí)極簡(jiǎn)代碼，讓你的網(wǎng)站“飛”起來(lái)。

現(xiàn)在做網(wǎng)站基本上都是自適應(yīng)了，秀站網(wǎng)也推薦大家用這種布局，不僅不會(huì)造成頁(yè)面變復(fù)雜，反而能減少好多工作量。因?yàn)槟銓?xiě)一套模板就行了，PC端移動(dòng)端通過(guò)CSS自適應(yīng)。

比如多個(gè)塊級(jí)元素橫向排列時(shí)會(huì)用float浮動(dòng)布局，想實(shí)現(xiàn)這些元素居中就比較麻煩了，這里介紹display的用法。

display有三種屬性：inline、block、inline-block

inline和block分別是把塊級(jí)元素變成行內(nèi)元素，行內(nèi)元素變成塊級(jí)元素；而inline-block是結(jié)合了塊級(jí)元素和行內(nèi)元素的一些特點(diǎn)。塊級(jí)元素會(huì)占用一行，想實(shí)現(xiàn)塊級(jí)元素橫向布局，一般用浮動(dòng)或者用display:inline屬性。

行內(nèi)元素有很多局限性，不能使用width、height、margin等，想使用的話就可以用display:inline-block。大家會(huì)發(fā)現(xiàn)此時(shí)塊級(jí)元素之間會(huì)有4個(gè)像素的間隙，去掉這個(gè)間隙需要在父級(jí)元素增加font-size:0，兼容所有瀏覽器，舉例：

<p class="father">
    <p class="son"></p>
    <p class="son"></p>
    <p class="son"></p>
</p>
<style>
.father{font-size:0}
.son{display:inline-block;padding:0 3px;margin:0 3px;font-size:14px;}
</style>

ie6/ie7要處理一下

行內(nèi)元素直接使用{dislplay:inline-block;}
塊級(jí)元素：需添加{display:inline;zoom:1;}

一般文字圖片混排用inline-block，如果頁(yè)面整體布局就用float，用偽類(lèi)after、before清除浮動(dòng)即可，如

<p class="father clear">
    <p class="son"></p>
    <p class="son"></p>
    <p class="son"></p>
</p>
<style>
.son{float:left}
.clear:after{clear:both}
</style>