CSS的那些魔幻属性

css中有一些你不注意的冷知识 ，但往往是这些你不注意的冷知识，却阻止我们的项目进度，如果你看了，我相信你也会从中有所受益

为什么此处li标签内的p元素看起来独自撑开了一行

代码如下：

<ul>
    <li class="left">
        <p style="display: inline-block;">这是一个很撑很撑的发的发发发送达方式的地方非地方撤地方胜多负少</p>
    </li>
    <li class="center"></li>
    <li class="right"></li>
</ul>

CSS样式：

li{
        display: inline-block;
        text-align: center;
    }
    .left,.center,.right{
        width:300px;
        height:300px;
    }
    .left{
        background-color: #999;
    }
    .center{
        background-color: #ccc;
    }
    .right{
        background-color: #eee;
    }  

先来一张图，看懂vertical-align的几个属性，理解这张图片，后面就好理解了。

inline-block的vertical-align 属性默认是baseline对齐（深入理解的送福利），也就是英文文字小写字母a,b,c这类字母底部的那条线，因为这些是外国人发明的，所以以英文字母才有针对性。

inline-block拥有vertical-align属性，其默认是基线对齐的，所以这三个inline-box需要基线对齐，而其基准线就是正常流中最后一个line box的基线,如果这个元素是空的，没有内容，那么这个基线就是最后这个元素的margin-bottom线；如果这个元素不为空，那么这个元素的基线就是元素里面内容最后一行文字的基线；所以我们一个一个来套，发现这三个li元素在一行，第一个有文字，其基线为文字底部；最后一个没有文字，其基线为margin-bottom线,考试要考，划重点，可以自己为元素设置margin-bottom试试,这就会造成第一个和二，三个错行的感觉，其实他两是为了基线对齐，所以多敲几十个文字就能明显看出其差别。

所以最简单的解决方案就是为li添加vertical-align: 属性不为baseline，气不气，改变其纵向的对齐方式的默认属性;为啥非弄个折腾人勒。关于vertical-align,如果还想做这方面的深入了解，可以看看张大侠的分析。

img图片撑不满整个div，有空隙

直接上图更直观(箭头所指)

HTML代码：

<divclass="test">        
    <img width="130" height="130" src="https://user-gold-cdn.xitu.io/2017/12/10/160409cc0f090c6f">
</div>

CSS样式：

<style>
        body,div{margin: 0;padding: 0;}
        .test{
            background-color: yellowgreen;
        }
        img{
            width:260px;
            height:260px;
        }
</style>

其实这个问题，如果你单单这样看，和我一样涉世未深的话，是一眼看不出答案的，但是如果你在图片后面多敲两个文字，你就会发现，和上个问题，这又是一个有关于vertical-align属性相关的问题。

<divclass="test">        
    <img width="130" height="130" src="https://user-gold-cdn.xitu.io/2017/12/10/160409cc0f090c6f">
    <span>abcd看文字</span>
</div>

让人恍然大悟的效果图：

这下你应该就懂了，下面的空隙的距离实际上等与1个line-height的底边与baseline之间的间距。仔细观察，图片的底边是和a的下边缘是在一条水平线上的，而不是和‘看’字下边缘一条水平线上的。所以为什么上面说这又是一个和vertical-align属性相关的问题。先说解决方案。

针对于父元素div

• 设置行高足够小,比如.test{line-height:0}，至于这么小吗，其实高度小于top线和baseline线之间的距离的距离就行了，至于到底多小，这和font-size是相关的，其目的就是没有多余的高度拿来给baseline下面的空间用(个人理解);

• 上面说了设置line-height最小和font-size相关，所以，还有的方法，就是直接设置字体大小为0，.test{font-size:0;}，道理你应该懂；

针对于图片div

• 上面说了这是一个和vertical-align属性相关的问题，所以设置vertical-align属性不为baseline也可以解决，比如img{vertical-align:top;}，当然也可以是数字，比如img{vertical-align:-10px;}，这个数值绝对不是正值，其数值应该是大于bottom线和line-height的底边距离的；

• 最后一种，就是vertical-align是一个对块状元素无效的属性，仅针对于内联元素有效的，当然inline-block也有效.所以img{display:block;}也可以解决问题。

也许到这里，你和我一样，有疑惑，为什么vertical-align是一个对块状元素无效的属性，设置img为块级元素，其和div就可以完美在一起，而一个内联元素放在块状元素里，就非得有隔阂。

开始，我也是有这个疑问的，个人理解就是块状元素里面装了一个内联元素，如果块状没有显示的设置高度，其高度是由里面的最高的lineboxes组成的，这个div其实就是有两个lineboxes组成，图片linebox和，其实还有一个linebox就是div自身的innerText('')，这不过这里内容为空，如果你把span去掉，你就更能理解这个隐身的linebox，所以就像是两个内联元素在一起，需要baseline对齐。

所以网上有人说设置img{font-size:0;},是非常错误的,img元素很特殊，他不但是内联元素，他还是一个置换元素（下面会讲），它的高度不是文字内容撑开的，是其置换的图片高度撑开的，所以设置font-size是无效的。

有一种行内元素，又叫置换元素

什么是置换元素呢？

置换元素是指：浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如：浏览器根据标签的src属性显示图片。input元素根据标签的type属性决定显示输入框还是按钮。还有，还有近来很火的canvas。

置换元素有如下共同点：

1. 置换元素一般内置宽高属性，因此可以设置其宽高；

2. 置换元素与一般的行内元素相比，其可以设置margin,padding，height,width等css属性；。