提升你css技能的css开发技巧

很久没整理博客了 进来啰嗦两句   继续抄别人的博客  

1、resize实现图片对比

 

resize的语法以下：

 

    resize：none | both | horizontal | vertical

 

案例效果以下图 **(鼠标移到左下角白色区域，往右侧拖动，实现图片对比效果)**：

 

 

我应用到了resize的以下代码：

 

    resize: horizontal;

 

能够水平拉伸！

 

 

 2、:not()的应用技巧

 

咱们平时在书写导航栏分割线的时候，最后一个标签是没有分割线的，咱们通常的写法以下：

 

    /* 先给全部添加右侧边框 */

    .nav li {

      border-right: 1px solid #666;

    }

    /* 再去除最后一个边框 */

    .nav li:last-child {

      border-right: none;

    }

 

运用:not()以后以下书写：

 

    .nav li:not(:last-child) {

      border-right: 1px solid #666;

    }

 

还能够用咱们以前的~[波浪选择器][4]来实现，不明白的能够点击进入，查看第8条！

 

    .nav li:first-child ~ li {

      border-left: 1px solid #666;

    }

 

咱们在用逗号分隔的列表，最后一个让他没有逗号，写法以下：

 

    ul > li:not(:last-child)::after {

      content: ",";

    }

 

not的应用，让咱们方便了很多，节省了一些代码！

 

 3、任意元素垂直居中

 

关于css垂直居中，我以前写过几篇文章：[css固定宽高DIV内部元素垂直居中的方法][5] 和 [css的div垂直居中的方法][6] ，今天咱们在body中，初始化定义一下，就可让任意元素垂直居中，代码以下：

 

    html, body {

      height: 100%;

      margin: 0;

    }

    

    body {

      -webkit-align-items: center;  

      -ms-flex-align: center;  

      align-items: center;

      display: -webkit-flex;

      display: flex;

    }

 

固然，这个有必定的兼容问题！不过现代浏览器是没有问题的！

 

 4、表格单元格等宽

 

用以下代码可让表格单元格等宽

 

    .haorooms{

      table-layout: fixed;

    }

 

 

 5、使用Flexbox摆脱各类Margin Hacks

 

实现侧栏时，咱们再也不须要各类nth-、first-和last-child等设置margin，可使用Flexbox轻松实现均匀分布！代码以下：

 

    .list {

      display: flex;

      justify-content: space-between;

    }

    

    .list .person {

      flex-basis: 23%;

    }

 

6、给空链接使用属性选择符

 

这个我上一篇文章应用过了，就是使用before或者after的[content的attr属性][7]！

 

具体能够看：http://www.haorooms.com/post/content_attr

 

咱们还能够给空a标签添加属性，代码以下：

 

    a[href^="http"]:empty::before {

      content: attr(href);

    }

 

 

 7、初始化box-sizing

 

从html中继承box-sizing属性，这样的话，后期维护比较方便。

 

    html {

      box-sizing: border-box;

    }

    

    *, *:before, *:after {

      box-sizing: inherit;

    }

 

 

 8、在nth-child中使用负数

 

nth-child中使用负数，能够选择小于等于某个数的值，例如：

 

    li:nth-child(-n+4){background:red}

 

小于等于4的li，显示为红色！

 

还能够以下应用：

 

    li {

      display: none;

    }

    

    li:nth-child(-n+3) {

      display: block;

    }

 

上面代码的含义是，咱们让前三个li显示（小于等于3的）,其余的li都隐藏！

 

关于nth-child的应用，我以前也写过文章，具体请看：http://www.haorooms.com/post/css3_nth-child

 

 

 9、文本显示优化

 

    html {

      -moz-osx-font-smoothing: grayscale;

      -webkit-font-smoothing: antialiased;

      text-rendering: optimizeLegibility;

    }

 

上面代码可让字体在咱们的设备中最优显示！

 

 

10、border的应用技巧！

 

关于border，我前面的文章已经介绍过其对于[对话框][8]的书写。http://www.haorooms.com/post/css_dhk

 

border的应用仍是蛮普遍的！我以前在慕课网的课程 html5左侧导航，讲了[三道杠][9]的书写！，是运用了box-shadow，关于文章，具体请看：http://www.haorooms.com/post/box_shadow_css  

 

可是呢，这个是css3的属性，今天给你们讲运用border书写三道杠，兼容性很好！代码以下：

 

    width:40px;height:7px;

    color: #999;

    border-top:18px  double;

    border-bottom: 6px solid;

 

 

运用border的double属性，能够轻松绘制三道杠，兼容性很好！而且，你们注意的是：border-color能够继承color，咱们只要修改color的值，就能够修改border-color的值！

 

 11、vertical-align 属性

 

vertical-align 只在行内元素，或者inline、inline-block等中才起做用。当咱们在某个div中使用垂直居中是无论用的，我以前的文章写了利用vertical-align，[垂直居中][10]的办法，具体请看：http://www.haorooms.com/post/div_guding_inner_center

 

除此以外，vertical-align 还支持数值和百分比！

 

咱们能够以下写：

 

    .haorooms{vertical-align:-2px;}

    .haorooms{vertical-align:-10%;}

 

这个负值和 margin-bottom相似，可是呢，vertical-align能够将父级元素撑大！

 

12、margin重叠解决方案列举

 

 一、父级元素bfc ，不懂bfc的情看我以前的文章：http://www.haorooms.com/post/css_BFC_bgdiv

 

 二、父级元素给一个padding

 

三、父级元素给一个border

 

四、子元素前面加任意一个空的内联元素，（例如：span、nbsp等等）

 

 

​ 十3、父元素font-size:0的做用

 

display：inline-block的元素之间会有一个字符的间隙，这个间隙致使了最后一个会掉下来。解决方案通常有以下几种：

 

一、给父元素设置font-size：0px；

 

二、取消掉换行符，如这样：

 

    <span>aaaa</span><span>aaaa</span><span>aaaa</span>

 

连续。

 

或者以下：

 

    <div class="space">

        <a href="##">惆怅</a><!--

        --><a href="##">淡定</a><!--

        --><a href="##">热血</a>

    </div>

    

    <div class="space">

        <a href="##">惆怅</a

        ><a href="##">淡定</a

        ><a href="##">热血</a>

    </div>

 

可是这种方式不推荐

 

三、使用margin负值。

 

四、使用浮动。

 

五、另外还有使用letter-spacing、word-spacing等方法。

 

固然最好的解决方案就是设置font-size:0

 

 父元素 font-size:0 例子：

 

html:

 

    <div class="box">

      <div>1</div>

      <div>2</div>

      <div>3</div>

    </div>

 

css:

 

    .box{

      width: 90px;

      height: 60px;

      border: 1px solid #ccc;

    }

    .box div{

      display: inline-block;

      box-sizing: border-box;

      font-size: 14px;

      width: 30px;

      border: 1px solid ;

    }

 

理论上box下面的三个div都是30px，恰好在一行显示，可是实际效果是这样：

 

 

 

 

这就是上文说到的缘由，咱们在box下添加font-size:0;再看看效果