CSS 高级技巧汇总

在我们平时写代码的时候没有没有掌握一些CSS技巧呢？ 今天给大家分享一个《CSS 高级技巧汇总让你的代码简洁高效》。大家务必掌握这些小技巧，会让你非常高效率的写出网页的。

◆使用 :not() 在菜单上应用/取消应用边框

先给每一个菜单项添加边框

<span style="color: #008000;">/*</span><span style="color: #008000;"> add border </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.nav li </span>{<span style="color: #ff0000;">
     border-right</span>:<span style="color: #0000ff;"> 1px solid #666</span>;
}

 

……然后再除去最后一个元素……

<span style="color: #800000;">/</span><span style="color: #008000;">/*</span><span style="color: #008000;"> remove border </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.nav li:last-child </span>{<span style="color: #ff0000;">
     border-right</span>:<span style="color: #0000ff;"> none</span>;
}

 

……可以直接使用 :not() 伪类来应用元素：

<span style="color: #800000;">.nav li:not(:last-child) </span>{<span style="color: #ff0000;">
     border-right</span>:<span style="color: #0000ff;"> 1px solid #666</span>;
}

 

这样代码就干净，易读，易于理解了。

当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）：

<span style="color: #800000;">..nav li:first-child ~ li </span>{<span style="color: #ff0000;">
     border-left</span>:<span style="color: #0000ff;"> 1px solid #666</span>;
}

 

◆给 body添加行高

你不需要分别添加 line-height 到每个

，等。只要添加到 body 即可：

<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
   line-height</span>:<span style="color: #0000ff;"> 1</span>;
}

 

这样文本元素就可以很容易地从 body 继承。

◆所有一切都垂直居中

要将所有元素垂直居中，太简单了：

<span style="color: #800000;">html, body </span>{<span style="color: #ff0000;">
   height</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
   margin</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
body </span>{<span style="color: #ff0000;">
   -webkit-align-items</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
   -ms-flex-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
   align-items</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
   display</span>:<span style="color: #0000ff;"> -webkit-flex</span>;<span style="color: #ff0000;">
   display</span>:<span style="color: #0000ff;"> flex</span>;
}

看，是不是很简单。

注：在IE11中要小心flexbox。

◆逗号分隔的列表

让HTML列表项看上去像一个真正的，用逗号分隔的列表：

<span style="color: #800000;">ul > li:not(:last-child)::after </span>{<span style="color: #ff0000;">
   content</span>:<span style="color: #0000ff;"> ","</span>;
}

 

对最后一个列表项使用 :not() 伪类。

◆使用负的 nth-child 选择项目

在CSS中使用负的 nth-child 选择项目1到项目n。

<span style="color: #800000;">li </span>{<span style="color: #ff0000;">
   display</span>:<span style="color: #0000ff;"> none</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> select items 1 through 3 and display them </span><span style="color: #008000;">*/</span><span style="color: #800000;">
li:nth-child(-n+3) </span>{<span style="color: #ff0000;">
   display</span>:<span style="color: #0000ff;"> block</span>;
}

 

就是这么容易。

◆对图标使用SVG

我们没有理由不对图标使用SVG：

<span style="color: #800000;">.logo </span>{<span style="color: #ff0000;">
   background</span>:<span style="color: #0000ff;"> url("logo.svg")</span>;
}

 

SVG对所有的分辨率类型都具有良好的扩展性，并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。

◆优化显示文本

有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：

<span style="color: #800000;">html </span>{<span style="color: #ff0000;">
   -moz-osx-font-smoothing</span>:<span style="color: #0000ff;"> grayscale</span>;<span style="color: #ff0000;">
   -webkit-font-smoothing</span>:<span style="color: #0000ff;"> antialiased</span>;<span style="color: #ff0000;">
   text-rendering</span>:<span style="color: #0000ff;"> optimizeLegibility</span>;
}

 

注：请负责任地使用 optimizeLegibility。此外，IE /Edge没有 text-rendering 支持。

◆对纯CSS滑块使用 max-height

使用 max-height 和溢出隐藏来实现只有CSS的滑块：

<span style="color: #800000;">.slider ul </span>{<span style="color: #ff0000;">
   max-height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
   overlow</span>:<span style="color: #0000ff;"> hidden</span>;
}<span style="color: #800000;">
.slider:hover ul </span>{<span style="color: #ff0000;">
   max-height</span>:<span style="color: #0000ff;"> 1000px</span>;<span style="color: #ff0000;">
   transition</span>:<span style="color: #0000ff;"> .3s ease</span>;
}

 

◆继承 box-sizing

让 box-sizing 继承 html：

<span style="color: #800000;">html </span>{<span style="color: #ff0000;">
   box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;
}<span style="color: #800000;">
*, *:before, *:after </span>{<span style="color: #ff0000;">
   box-sizing</span>:<span style="color: #0000ff;"> inherit</span>;
}

 

这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。

◆表格单元格等宽

表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：

<span style="color: #800000;">.calendar </span>{<span style="color: #ff0000;">
   table-layout</span>:<span style="color: #0000ff;"> fixed</span>;
}

 

◆用Flexbox摆脱外边距的各种hack

当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了：

<span style="color: #800000;">.list </span>{<span style="color: #ff0000;">
   display</span>:<span style="color: #0000ff;"> flex</span>;<span style="color: #ff0000;">
   justify-content</span>:<span style="color: #0000ff;"> space-between</span>;
}<span style="color: #800000;">
.list .person </span>{<span style="color: #ff0000;">
 flex-basis</span>:<span style="color: #0000ff;"> 23%</span>;
}

 

现在，列表分隔符就会在均匀间隔的位置出现。

◆使用属性选择器用于空链接

当 元素没有文本值，但 href 属性有链接的时候显示链接：

<span style="color: #800000;">a[href^="http"]:empty::before </span>{<span style="color: #ff0000;">
   content</span>:<span style="color: #0000ff;"> attr(href)</span>;
}

 

相当方便。

◆支持这些高级技巧在Chrome、Firefox、Safari、Edge的当前版本，以及IE11中都能有效工作。