CSS 高级技巧汇总-html教程-PHP中文网

CSS 高级技巧汇总

php中文网

发布： 2016-06-08 08:47:52

原创

1567人浏览过

在我们平时写代码的时候没有没有掌握一些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>;
}

登录后复制

YIXUNCMS中秋专版2.0.4

系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应

查看详情

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

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

相当方便。