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