我脑中飘来飘去的 CSS 魔幻属性

最近看到一篇20个CSS高级技巧汇总的汇总，感触很深，不过我想，与技巧相比，有些常见css布局难题，有时候更加让我们的日常开发变得踌躇沮丧吧。

在写这一篇文章之前，自己还写过一篇：我所不注意的那些CSS冷知识，但却阻止了我做项目的速度，如果你看了，我相信你也会受益的。

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

这是我在segmentfault上看到的一个问题，以前自己遇到过，所以就很热情洋溢的去回答了一下，难道遇到个自己会的，示例代码是这样的：

    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;
    }  
    HTML:
    
        
class="left">
            
"display: inline-block;">1
  
        
        
class="center">




    
        
class="right">
      

大概就是这样子，其实文和图有点不对应，代码中第一个模块他只写了一个“1”,我为了现象更加明显，且好说明为什么，就打了一大段文字，现在我们来说说为什么。先来一张图，看懂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，有空隙

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

相关css和html：

    
        body,div{margin: 0;padding: 0;}
        .test{
            background-color: yellowgreen;
        }
        img{
            width:260px;
            height:260px;
        }
    
    
    
 class="test">
         width="130" height="130" src="http://img2.jintiankansha.me/get3?src=http://user-gold-cdn.xitu.io/2017/12/10/160409cc0f090c6f">