關於inline-block佈局須要注意幾點事項

時間 2019-11-18

標籤關於 inline block 佈局須要注意幾點事項简体版

原文原文鏈接

　　以前在網上看到一個關於CSS基本佈局的一個教學網站，內容很簡潔，http://learnlayout.com/。有一小節是講關於inline-block佈局須要注意的幾點事項，引用之。html

　　Inline-block : Few things that you need keep in mindapp

　　You can also use inline-block for layouts. There are a few things to keep in mind:wordpress

　　•inline-block elements are affected by the vertical-align property, which you probably want set to top佈局

　　•You need to set the width of each columnpost

　 •There will be a gap between the columns if there is any whitespace between them in the HTML網站

　　翻譯過來就是咱們使用inline-block元素進行網頁佈局的時候，須要注意幾點url

　　1.inline-block元素受vertical-align屬性影響，你可能須要設置成vertical-align: top。作好inline-block佈局，瞭解這一點及其內在的緣由很是重要，vertical-align的對inline level元素影響可謂是無處無在，咱們能夠動手作一個demo頁面，spa

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <title>inline-block佈局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            margin-top: 10px;
            background-color: orange;
        }
        .inner{
            display: inline-block;
            width: 200px;
            height: 100px;
            background-color: lightblue;
        }
    </style>  
</head>
<body>
    <div class="wrapper">
        <div class="inner"></div></div>
</body>
</html>

效果見http://codepen.io/CoolHector/pen/RabYmy，我把解決方式都註釋掉了。在這裏會發現，class爲inner的div的並未徹底佔據父元素wrapper的高度，而是有一個間隙（這裏是垂直間隙），形成這個間隙的緣由就是由於inline-level 的元素會受到vertical-align這個屬性的影響，儘管咱們並未去顯式地設置這個屬性。這是由於vertical-align的默認屬性爲baseline，即基線對齊（基線爲英文字母x的下邊緣，而字母x的高度又受到了line-height的影響），只要是inline level元素就會受到默認基線對齊的vertical-align的影響。張鑫旭老師對此解釋的至關明瞭，參看http://www.zhangxinxu.com/wordpress/?p=4925 。這裏我就再也不贅述了。翻譯

去除這個間隙的方法就是給inner這個元素添加除baseinle以外的對齊（bottom,middle,top）,注意vertical-align只做用於inline-level元素且inherit爲no，即不會繼承給子元素，因此不要給任何塊狀元素設置該屬性，沒有任何意義。再者就是將line-height值設爲極小值，此時文本的基線上移，從而達到消除間隙的目的。code

　　2.咱們須要設置inline-block元素的寬度。//由於inline-block元素具備收縮性（引用張鑫旭老師的形容，比較形象化），同float，絕對定位元素表現類似（這裏不談這二者是脫離文檔流），收縮性的表現是元素不設置寬度，寬度由內容區決定（content area）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>"收縮性"屬性</title>
    <style>
        .test{
            background-color: orange;
            /*position: absolute;*/
            /*float: left;*/
            /*display: inline-block;*/
        }
    </style>
</head>
<body>
    <div class="test">Lorem ipsum dolor sit amet</div>    
</body>
</html>

　　3.咱們使用inline-block元素佈局還有一點要注意的就是元素間可能出現一個空格大小的間隙，這個間隙是因爲html源代碼中，換行符/空格致使的，解決方法有不少，我通常是在inline-block元素之間加HTML註釋。假設下面li的display設置爲inline-block。爲消除間隙，我在li標籤之間使用了註釋符，固然這種方法會使代碼變得冗長。

    <ul>
       <li></li><!--
    --><li></li><!--
    --><li></li>
    </ul>

　　由於這篇文章是歪果仁寫的，因此歪果仁確定不會想到，在地球的另外一邊的咱們還須要注意一點就是對IE6,7的兼容，我木有作過具體項目，可是知道好比攜程這樣的網站到如今還須要考慮到對IE6的兼容實現。衆所周知，在IE6,7並不能識別display: inline-block，可是這樣設置卻會觸發haslayout。這又分爲兩種狀況，第一種，對inline level元素而言，咱們就能夠不須要再作hack了，由於觸發了haslayout，從而能夠設置寬高，同時自己又是行內顯示。第二種就是對block元素設置display: ineline-block，可是並不會改變該元素的默認displa爲block的表現，因此咱們在這裏須要作一下hack兼容，即*display: inline。

參考

張鑫旭 CSS深刻理解vertical-align和line-height的基友關係 : http://www.zhangxinxu.com/wordpress/?p=4925

穆乙關於Block Formatting Context－－BFC和IE的hasLayout : http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html