CSS的一些案例和坑

display: inline-block的坑

（一）先看了个例子

<style type="text/css">
  ul{
    width: 300px;
    height: 50px;
  }
  li{
    width: 50px;
    height: 50px;
    background: blue;
    display: inline-block; 
  }
</style>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>

运行代码效果：

可以看到给li设置display: inline-block后元素排成了一行，但是每个之间出现间距；

如果将代码这样写

<style type="text/css">
  ul{
    width: 300px;
    height: 50px;
  }
  li{
    width: 50px;
    height: 50px;
    background: blue;
    display: inline-block; 
  }
</style>
<body>
  <ul>
    <li></li><li></li><li></li><li></li><li></li>
  </ul>
</body>

运行代码效果：

如果将li不换行写成一行，css样式代码没有更改，间距就消失了；

参看W3C对display属性值的解释：

　inline : 默认。此元素会被显示为内联元素，元素前后没有换行符。

　block ：此元素将显示为块级元素，此元素前后会带有换行符。

　inline-block : 行内块元素。

　个人理解出现这样坑的原因：inline-block将元素显示为行内块元素时，block会让元素前后带有换行符，但因为已经inline内联所以元素前后会出现间距；

（二）填坑

方法一：在ul中设置一个font-size属性，但是此方法在Safari浏览器无效；

<style type="text/css">
  ul{
    width: 300px;
    height: 50px;
   font-size: 0;
  }
  li{
    width: 50px;
    height: 50px;
    background: blue;
    display: inline-block; 
  }
</style>

方法二：margin-left设为负值调整间距

<style type="text/css">
  ul{
    width: 300px;
    height: 50px;
  }
  li{
    width: 50px;
    height: 50px;
    background: blue;
    display: inline-block; 
   margin-left: -4px;
  }
</style>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>

CSS经典案例：实现垂直水平居中

话不多说上代码

<style type="text/css">
div{
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
}
</style>
<body>
  <div></div>
</body>

position:absolute将div元素绝对定位，是以div元素的左顶点相对于父级元素（目前父级元素为浏览器窗口）的左顶点定位，所以要让div元素实现真正的垂直水平居中就需要让元素的中心位置点相对父级元素绝对定位，这时就需要将margin-left，margin-top值设为负的高宽的一半，使中心位置点到原来的左上角点，这样就实现div元素的垂直水平居中。