你不知道的 CSS

本文首发于我的博客：https://smohan.net/blog/6gr77h

CSS的世界是神奇的。

随着各浏览器WEB标准的日趋统一，CSS在WEB世界中扮演的角色也愈发的重要。甚至于在GitHub上出现了You-Dont-Need-JavaScript这样Star近万的优秀开源项目，抛开该项目的实用性不说，项目中的众多的DEMO就已经证明了CSS的强大。

当然，这篇文章不是为了介绍这个项目，而是整理了一些实用的CSS技巧，来解决我们在实际项目开发中遇到的的问题。文章也会长期更新，总结更多的技巧。每个技巧将结合demo或者图示来说明（如果demo无法打开，请自备梯子，原因你懂得🙀）。也许你此刻正在发愁的一个bug可以在这里找到答案😆。

用 ~ / + 兄弟选择器来美化表单元素

css(3)中选择器众多，具体可参考CSS 选择器参考手册。不知什么原因，在很多项目中，实现诸如单选，复选等（类似）功能（包括如图标签选择器）时，为了美化其样式，往往使用JS去实现，实际上，利用 label 标签和css的兄弟选择器完全可以实现类似效果。其兼容性也并不差，至少兼容 IE8 及其以上浏览器了。

选择器解释

1. ~ 选择器：查找某一个元素的后面的所有兄弟元素

2. + 选择器：查找某一个元素的后面紧邻的兄弟元素

实现类某东标签选择器效果

查看demo

.tags-select {
  font-size: 0;
  >.tag-select {
    display: inline-block;
    font-size: 14px;
    margin: 5px;
    position: relative;
    font-weight: normal;
    .name {
      display: block;
      line-height: 20px;
      padding: 8px 10px;
      border: 1px solid #ccc;
      cursor: pointer;




    
    }
    //设置radio不可见
    input[type="radio"] {
      position: absolute;
      opacity: 0;
      z-index: -1;
      //选中
      &:checked+.name {
        border-color: #e3393c;
      }
      //禁用
      &:disabled+.name {
        background: #eee;
        color: #999;
        cursor: not-allowed;
      }
    }
  }
}

 class="tag-select">
   type="radio" name=




    
"bye-type" value="1">
   class="name">官方标配  
 class="tag-select">
   type="radio" name="bye-type" value="2" checked>
   class="name">移动优惠购  
 class="tag-select">
   type="radio" name="bye-type" value="3" disabled>
   class="name">联通优惠购  

利用 label 和选择器实现form元素的美化，展开来就可以写一篇博客了，因此，实现 input[type="radio"] , input[type="checkbox"] 的美化以及switch开关控件，就不贴代码了，具体代码见我的项目 mo-css 。

switch开关

查看demo

radio美化

查看demo

checkbox美化

查看demo

用 font-size：0 来清除间距

inline-block 的元素之间会受空白区域的影响，也就是元素之间差不多会有一个字符的间隙。如果在同一行内有4个25%相同宽度的元素，会导致最后一个元素掉下来（如图）。你可以利用元素浮动 float ，或者压缩html，清除元素间的空格来解决。但最简单有效的方法还是设置父元素的 font-size 属性为 0 。

*{
  box-sizing: border-box;
}
.items {
  font-size: 0;
  > .item {
    display: inline-block;
    width: 25%;
    height: 50px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 50px;




    
    background-color: #eee;
    font-size: 16px; //不要忘了给子元素设置字号
  }
}

 class="items">
  
 class="item">1
  
 class="item">2
  
 class="item">3
  
 class="item">4