前言

说到css开发技巧，其实我前面所有关于css的文章，都是css的一些小的技巧！感兴趣的可以查看： 还有值得一提的是，我之前关于css，分别写了css常用效果总结 ，还有一些 css的不常用效果总结，其实呢，这些都是相对的。有些效果我们在开发中不常用，但是有的项目也可能会用到！例如，最近做了一个小的项目，用到了css的resize属性。其实我本来不想用这个属性的，因为这个属性不兼容IE浏览器，但是呢，我这个项目却恰恰不需要兼容IE，是内部系统！那我先以resize属性介绍，作为本文的开头吧，虽然resize应用算不上css开发技巧！

一、resize实现图片对比

resize的语法如下：

resize：none | both | horizontal | vertical

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

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

resize: horizontal;

可以水平拉伸！

二、: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; }

还可以用我们之前的~波浪选择器来实现，不明白的可以点击进入，查看第8条！

.nav li:first-child ~ li { border-left: 1px solid #666; }

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

ul > li:not(:last-child)::after { content: ","; }

not的应用，让我们方便了不少，节省了一些代码！

三、任意元素垂直居中

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

html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }

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

四、表格单元格等宽

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

.haorooms{ table-layout: fixed; } 五、使用Flexbox摆脱各种Margin Hacks

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

.list { display: flex; justify-content: space-between; } .list .person { flex-basis: 23%; } 六、给空连接使用属性选择符

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

具体可以看：

我们还可以给空a标签添加属性，代码如下：

a[href^="http"]:empty::before { content: attr(href); } 七、初始化box-sizing

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

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } 八、在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的应用，我之前也写过文章，具体请看：

九、文本显示优化 html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

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

十、border的应用技巧！

关于border，我前面的文章已经介绍过其对于对话框的书写。

border的应用还是蛮广泛的！我之前在慕课网的课程 html5左侧导航，讲了三道杠的书写！，是运用了box-shadow，关于文章，具体请看：

但是呢，这个是css3的属性，今天给大家讲运用border书写三道杠，兼容性很好！代码如下：

width:40px;height:7px; color: #999; border-top:18px double; border-bottom: 6px solid;

运用border的double属性，可以轻松绘制三道杠，兼容性很好！并且，大家注意的是：border-color可以继承color，我们只要修改color的值，就可以修改border-color的值！

十一、vertical-align 属性

vertical-align 只在行内元素，或者inline、inline-block等中才起作用。当我们在某个div中使用垂直居中是不管用的，我之前的文章写了利用vertical-align，垂直居中的办法，具体请看：

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

我们可以如下写：

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

这个负值和 margin-bottom类似，但是呢，vertical-align可以将父级元素撑大！

十二、margin重叠解决方案列举

1、父级元素bfc ，不懂bfc的情看我之前的文章：

2、父级元素给一个padding

3、父级元素给一个border

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

十三、父元素font-size:0的作用

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

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

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

<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>

但是这种方式不推荐

3、使用margin负值。

4、使用浮动。

5、另外还有使用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;再看看效果