代理加盟 2019全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: 秀站網 > 站長學院 > SEO資訊 >

CSS去除display:inline-block的間距

來源:未知 發布時間:2019-03-30熱度:我要評論
很久沒有寫WEB前端的知識了,一個能力強的SEOer應該了解基本的WEB前端知識,一些簡單的HTML代碼是經常遇到的,細胞級代碼優化才是一勞永逸的SEO方案。跟著九蜘蛛學習快速建站,掌握骨灰級極簡代碼,讓你的網站飛起來。 現在做網站基本上都是自適應了,九蜘蛛也推薦大家...

織夢模板免費下載,無需注冊無需充值

很久沒有寫WEB前端的知識了,一個能力強的SEOer應該了解基本的WEB前端知識,一些簡單的HTML代碼是經常遇到的,細胞級代碼優化才是一勞永逸的SEO方案。跟著秀站網學習快速建站,掌握骨灰級極簡代碼,讓你的網站“飛”起來。

現在做網站基本上都是自適應了,秀站網也推薦大家用這種布局,不僅不會造成頁面變復雜,反而能減少好多工作量。因為你寫一套模板就行了,PC端移動端通過CSS自適應。

浮動布局

比如多個塊級元素橫向排列時會用float浮動布局,想實現這些元素居中就比較麻煩了,這里介紹display的用法。

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

inline和block分別是把塊級元素變成行內元素,行內元素變成塊級元素;而inline-block是結合了塊級元素和行內元素的一些特點。塊級元素會占用一行,想實現塊級元素橫向布局,一般用浮動或者用display:inline屬性。

行內元素有很多局限性,不能使用width、height、margin等,想使用的話就可以用display:inline-block。大家會發現此時塊級元素之間會有4個像素的間隙,去掉這個間隙需要在父級元素增加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要處理一下

行內元素直接使用{dislplay:inline-block;}
塊級元素:需添加{display:inline;zoom:1;}

一般文字圖片混排用inline-block,如果頁面整體布局就用float,用偽類after、before清除浮動即可,如

<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>

本文地址:http://www.yxrxyy.live/seo/1298.html

責任編輯:秀站網

    相關閱讀

    發表評論

    評論列表(條)

      北京28是什么彩票