关键词：
前端开发越来越侧重于效率和性能，使用LESS和SCSS资源的预处理器为我们前端CSS编写工作提供了很大的便利。但是也有很多简单的方法可以编写小巧快速的CSS代码，提高开发效率并解决许多常见的问题。
1.使用CSS reset
像normalize.css这样的CSS重置库非常受欢迎，它为您的站点样式提供了一个清爽的选择，能确保浏览器之间更好的一致性。而实际上并不是每个项目都需要这些库中包含的所有规则，我们可以通过一些简单的css规则就能规避浏览器之间的差异。请看下面的盒模型代码：
1 * {
2 box-sizing: border-box;
3 margin: 0;
4 padding: 0;
5 }
2.继承 box-sizing
让 box-sizing 继承 html：
1 html {
2 box-sizing: border-box;
3 }
4 *, *:before, *:after {
5 box-sizing: inherit;
6 }
这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。
3. 使用Flexbox摆脱外边距的各种 hack
当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了：
1 .list {
2 display: flex;
3 justify-content: space-between;
4 }
5
6 .list .person {
7 flex-basis: 23%;
8 }
4.使用 :not() 定义菜单边框
我们要定义菜单列表的边框，然后去掉最后一个菜单的边框，通常做法是：
1 .nav li {
2 border-right: 1px solid #666;
3 }
4 .nav li:last-child {
5 border-right: none;
6 }
而我们现在可以直接使用 :not() 伪类来应用元素，让代码就干净，易读，易于理解了。
1 .nav li:not(:last-child) {
2 border-right: 1px solid #666;
3 }
5.给 body 添加行高
你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可：
1 body {
2 line-height: 1.5;
3 }
6.垂直居中
要将所有元素垂直居中，使用以下代码：
1 html, body {
2 height: 100%;
3 margin: 0;
4 }
5 body {
6 -webkit-align-items: center;
7 -ms-flex-align: center;
8 align-items: center;
9 display: -webkit-flex;
10 display: flex;
11 }
7.使用SVG作为图标
SVG可以适应不同的分辨率，并且在所有的浏览器中都支持，还有什么理由不用呢。
1 .logo {
2 background: url("logo.svg");
3 }
8.等宽的表格单元格
表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：
1 .calendar {
2 table-layout: fixed;
3 }
9.使用属性选择器用于空链接
当a元素没有文本值，但 href 属性有链接的时候显示链接：
1 a[href^="http"]:empty::before {
2 content: attr(href);
3 }
10.图片不存在的替代样式
由于某种原因导致图片加载失败，这时我们使用css来友好的告诉用户图片出状况了。
1 img {
2 display: block;
3 font-family: Helvetica, Arial, sans-serif;
4 font-weight: 300;
5 height: auto;
6 line-height: 2;
7 position: relative;
8 text-align: center;
9 width: 100%;
10 }
11 img:before {
12 content: "We‘re sorry, the image below is missing :(";
13 display: block;
14 margin-bottom: 10px;
15 }
16 img:after {
17 content: "(url: " attr(src) ")";
18 display: block;
19 font-size: 12px;
20 }
11.在表单元素上设置font-size
为了避免移动浏览器（iOS Safari等）在点击<select>下拉菜单时放大HTML表单元素，请将font-size添加到输入样式中：
1 input[type="text"],
2 input[type="number"],
3 select,
4 textarea {
5 font-size: 16px;
6 }
来源:11个提高CSS技巧的小知识，你知道吗？
5个excel实用技巧，帮你大大提高工作效率！
...cel实用的小技巧，学会了可以帮助我们在日常工作中快速提高工作效率！1.快速隐藏单元格数据若是想对单元格中的某些数据隐藏，使用单元格自定义即可。选中单元格数据，点击鼠标右键选择"设置单元格格式"，点击&quo... 查看详情
你应该知道的11个vscode特性和技巧
1.带连字符的字体在处理大型项目时，带有连字的字体使代码更干净、更方便，您可以通过结合连字的特殊字体使您的编辑器体验更好。有几种支持连字的字体可用，但您可以简单地坚持使用经典的FiraCode。要在VSCode... 查看详情
带你了解mysql数据库小技巧
...趣是最好的老师，不论学习什么知识，兴趣都可以极大地提高学习效率。当然学习MySQL5.6也不例外。本文列举37个MySQL数据库小技巧，快来学习吧！37个MySQL数据库小技巧！1、如何快速掌握MySQL?培养兴趣兴趣是最好的老师，不论学... 查看详情
205.jetcache：你需要知道的小技巧(代码片段)
【视频&交流平台】à SpringBoot视频：http://t.cn/R3QepWGà SpringCloud视频：http://t.cn/R3QeRZcà SpringBoot源码：https://gitee.com/happyangellxq520/spring-bootà SpringBoot交流平台：http://4128879 查看详情
提高python代码的可读性，你需要知道这10个技巧(代码片段)
...受欢迎的两大原因，本文介绍20个常用的Python技巧来提高代码的可读性，并能帮助你节省大量时间，下面的技巧将在你的日常编码练习中非常实用。注：文末提供Python技术交流群1.字符串反转字符串反转有很多方法... 查看详情
❤『面试知识集锦100篇』1.面试技巧篇丨hr的小心思，你真的懂吗？
...大数据&Python领域优质创作者。目录一、企业考察要点技巧一：了解自己的专业技能与JD中的匹配点技巧二、把控好企业「味道」技巧三、精彩的自我介绍技巧四、常见问题回答二、经典面试问题【粉丝福利】1、100套小编... 查看详情
前端知识：12个非常实用的javascript小技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧。这些小技巧可能在你的实际工作中或许能帮助你解决一些问题。使用!!操作符转换布尔值有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值，如果存... 查看详情
这10个python性能调优的小技巧，你知道几个？(代码片段)
大家好，今天这篇文章关于Python性能调优的10个小技巧，每天花5-10分钟阅读我的文章，对你技术提升一定会有帮助。喜欢欢迎关注、点赞、收藏。文末提供技术交流群。1多多使用列表生成式替换下面代码：cube_numb... 查看详情
分享4个新手快速晋升ui设计师的小技巧
...知道从何入手。本文就为大家总结一下UI设计学习的的4个技巧，相信对初学者一定非常有用。学习ui设计的小技巧之一：软件学习UI设计要学的东西很多，软件是基础的东西，要想做出好的UI设计就得先熟练掌握UI设计的基础软件... 查看详情
❤『面试知识集锦100篇』1.面试技巧篇丨hr的小心思，你真的懂吗？
作者：不吃西红柿简介：CSDN博客专家、蓝桥签约作者、大数据&Python领域优质创作者。下载链接：https://pan.baidu.com/s/1FZrr2pzh1QHGV12D3yjwBg 提取码：98b31、100套小编购买的简历模板；2、1000套精品PPT模板；3、... 查看详情
chrome35个开发者工具的小技巧(代码片段)
...bugger在线编辑CSS。在这篇文章中，我们将分享一些很酷的技巧，让你能够更好的改进工作流程。通过 console 面板修改页面元素及元素内容：获取元素节点右键 查看详情
你知道这两个c语言小知识吗？(代码片段)
...全局变量二、C语言常量总结前言这两个C语言中需要注意的小知识你都了解了吗一、局部变量和全局变量局部变量和全局变量的区别，通俗的说，就是局部变量在花括号内部，而全局变量在花括号外部，那么这样... 查看详情
掌握这3个实用的word技巧，快速提高工作效率和加班说拜拜！
...天给大家分享3个非常实用的Word技巧，希望能够帮助大家提高工作效率！快速标记文本内容按快捷键"Ctrl+H"弹出查找和替换框，点击"查找"，在"查找内容"框输入标记内容即可。具体操作如下：快速建立各页... 查看详情
4个改变你编程技能的小技巧，一文全懂
字节跳动面试前头条的面试是三家里最专业的，每次面试前有专门的HR和你约时间，确定OK后再进行面试。每次都是通过视频面试，因为都是之前都是电话面或现场面，所以视频面试还是有点不自然。也有人觉得视... 查看详情
关于java性能调优的11个简单技巧
点击上方关注“终端研发部”设为“星标”，和你一起掌握更多数据库知识源 / Java联盟相信大多数的小伙伴都会觉着性能优化是一件很复杂的事，那么是不是呢？优化应用程序获得最佳性能并不是一件容易的事。它... 查看详情
健身教练入门的基础知识你都知道吗？怎么学习才好？
...要学习什么，才能扎根立足呢？一、健身教练的基础入门知识，你都知道吗？作为一个入门级别的健身教练，这时候，我们会感觉自己在 查看详情
你可能不知道的14个javascript调试技巧(代码片段)
...尽管传言JavaScript难以调试，但是如果你掌握了一些调试技巧，那么你将会花费更少的时间来解决这些错误。我们已经列出了14个您可能不知道的调试技巧，但可能要记住，这样下次你需要调试JavaScript代码时就可以马上使用了！... 查看详情
最强大脑-高效记忆方法
....上班时间犯困，打瞌睡怎么办？14.如何通过食补,提高大脑状 查看详情