共计 4919 个字符，预计需要花费 13 分钟才能阅读完成。
摘要：本文涵盖了 20 个 CSS 技巧，能够解决许多工作中常见的问题，让你也成为一个 CSS 高手。
本文涵盖了 20 个 CSS 技巧，能够解决许多工作中常见的问题，让你也成为一个 CSS 高手。
1、应用 CSS 重置（reset）
css 重置库如 normalize.css 曾经被应用很多年了，它们能够为你的网站款式提供一个比拟清晰的规范，来确保跨浏览器之间的一致性。
大多数我的项目并不需要这些库蕴含的所有规定，能够通过一条简略的规定来利用于布局中的所有元素，删除所有的 margin、padding 扭转浏览器默认的盒模型。
*{box-sizing:border-box;margin:0;padding:0}
应用 box-sizing 申明是可抉择，如果你应用上面继承的盒模型模式能够跳过它。
2、继承盒模型
让盒模型从 html 继承：
html {box-sizing: border-box;} *, *:before, *:after {box-sizing: inherit;}
3、应用 flexbox 布局来防止 margin 的问题（Get Rid of Margin hacks width Flexbox）
当你多少次试着去设计栅格布局如：组合或者图片画廊，如果应用浮动的形式，那么就须要去革除浮动和重置外边距来使其分解成所须要行数。为了防止nth-、first-、last-child 问题，能够应用flexbox 的space-between 属性值
.flex-container{display:flex;justify-content:space-between;}.flex-container .item{flex-basis:23%;}
4、应用:not() 解决 lists 边框的问题
在 web 设计中，咱们通常应用：last-child nth-child 选择器来笼罩原先申明应在父选择器上的款式。比如说一个导航菜单，通过应用 borders 来给每个链接 Link 创立宰割符，而后再在加上一条规定 解除最初一个link 的border
.nav li {border-right: 1px solid #666;}.nav li:last-child {border-right: none;}
这是一种很凌乱的形式，它不仅强制浏览器以一种形式渲染，而后又通过特定的选择器来撤销它。这样笼罩款式是不可避免的。然而，最重要的是，咱们能够通过应用：not伪类(pseudo-class) 在你想申明的元素上仅仅只应用一种款式：
.nav li:not(:last-child) {border-right: 1px solid #666;}
下面就是，除了最初一个 li 以外，所有的 .nav li 都加上了 border 款式，是不是很简略！
当然，你也能够应用 .nav li+li或者 .nav li:first-child ~li , 然而 ：not是更有语义化（semantic）和容易了解的。
5、body 上退出 line-height 款式
导致低款式效率（inefficient stylesheets）的一件事就是一直的反复申明。最好是做下我的项目布局和组合规定，这样 CSS 会更晦涩。实现这一点，就须要咱们了解级联（cascade）, 以及如何在通用选择器写的款式能够继承在其余中央。
行间距（line-height）能够作为给你的整个我的项目设置的一个属性，不仅能够减小代码量，而且能够让你的网站的款式给一个规范的外观
body {line-height: 1.5;}
请留神，这里的申明没有单位，咱们只是通知浏览器 让它渲染行高是 渲染字体大小的 1.5 倍
6、垂直居中任何元素 (vertical-center anything)
在没有筹备应用 CSSGrid 布局的时候，设置垂直居中布局的全局规定是一个很好的形式，能够为优雅（elegantly）的设置内容布局奠定一个根底
html, body {height: 100%; margin: 0;} body {-webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex;}
7、应用 SVG icons
SVG 应用于所有分辨类，并且所有浏览器也都反对。所以能够将.png .jpg .gif 等文件 抛弃。FontAwsome5 中 也提供了 SVG 的图标字体。设置 SVG 的格局就跟其余图片类型一样：
.logo {background: url("logo.svg"); }
舒适提醒：如果将 SVG 用在可交互的元素上比如说 button，SVG 会产生无奈加载的问题。能够通过上面这个规定来确保 SVG 能够拜访到（确保在 HTML 中已设置适当的 aria 属性）
.no-svg .icon-only:after {content: attr(aria-label); }
8、应用“OWL 选择器”
应用通用选择器（universal selector）* 和相邻的兄弟选择器（adjacent sibling selector）+ 能够提供一个弱小的的 CSS 性能，给紧跟其余元素中的文档流中的所有元素设置对立的规定
* + * {margin-top: 1.5rem;}
这是一个很棒的技巧，能够帮你创立更加平均的类型跟间距。在下面的列子中，跟在其余元素前面的元素，比如说 H3 前面的 H4，或者一个段落之后的一个段落，他们之间至多 1.5rems 的间距（大概为30px）
9、统一的垂直构造（Consistent Vertical Rhythm）
统一的垂直节奏提供了一种视觉美学，使内容更具可读性。如果 owl 选择器过于通用，请在元素内应用通用选择器（*）为布局的特定局部创立统一的垂直节奏：
.intro > * {margin-bottom: 1.25rem;}
10、对更丑陋的换行文本应用 box-decoration-break
假如您心愿对换行到多行的长文本行利用对立的间距、边距、突出显示或背景色，但不心愿整个段落或题目看起来像一个大块。Box Decoration Break 属性容许您仅对文本利用款式，同时放弃填充和页边距的完整性。
如果要在悬停时利用突出显示，或在滑块中设置子文本款式以具备突出显示的外观，则此性能尤其有用：
.p {display: inline-block;box-decoration-break: clone;-o-box-decoration-break: clone;-webkit-box-decoration-break: clone;}
内联块申明容许将色彩、背景、页边距和填充利用于每行文本，而不是整个元素，克隆申明确保将这些款式平均地利用于每行。
11、等宽表格单元格
表格可能很难解决，所以尝试应用 table-layout：fixed 来放弃单元格相等宽度：
.calendar {table-layout: fixed;}
12、强制应用属性选择器显示空链接
这对于通过 CMS 插入的链接特地有用，CMS 通常不具备类属性，并帮忙您在不影响级联的状况下对其进行特定款式设置。例如，<a>元素没有文本值，但 href 属性有一个链接：
a[href^="http"]:empty::before {content: attr(href); }
13、款式“默认”链接
说到链接款式，您能够在简直每个样式表中找到一个通用的 A 款式。这迫使您为子元素中的任何链接编写额定的笼罩和款式规定，并且在应用像 WordPress 这样的 CMS 时，可能会导致您的主链接款式比按钮文本色彩更容易呈现问题。
尝试这种较少烦扰的形式为“默认”链接增加款式
a[href]:not([class]) {color: #999; text-decoration: none; transition: all ease-in-out .3s;}
14、比率框
要创立具备固有比率的框，您须要做的就是将顶部或底部填充利用于 div
.container {height: 0; padding-bottom: 20%; position: relative;} .container div {border: 2px dashed #ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}
应用 20%进行填充使得框的高度等于其宽度的 20%。无论视口的宽度如何，子 div 都将放弃其纵横比（100%/ 20%= 5：1）。
15、格调破碎的图像
这个技巧不是对于代码缩减，而是对于细化设计细节的。破碎的图像产生的起因有很多，要么不雅观，要么导致凌乱（只是一个空元素）。用这个小小的 CSS 创立更好看的成果：
img {display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 300; height: auto; line-height: 2; position: relative; text-align: center; width: 100%;}img:before {content: "We're sorry, the image below is missing :("; display: block; margin-bottom: 10px;} img:after {content:"(url: "attr(src)")"; display: block; font-size: 12px; }
16、应用 rem 进行全局大小调整；应用 em 进行部分大小调整
在设置根目录的根本字体大小后，例如 html 字体大小：15px；，能够将蕴含元素的字体大小设置为rem:
article {font-size: 1.25rem;} aside {font-size: .9rem;}
而后将文本元素的字体大小设置为em
h2 {font-size: 2em;} p {font-size: 1em;}
当初，每个蕴含的元素都变得分区化，更易于款式化、更易于保护和灵便。
17、暗藏未静音的自动播放视频
当您解决无奈从源代码轻松管制的内容时, 这对于自定义用户样式表来说是一个很好的技巧。这个技巧将帮忙您防止在加载页面时自动播放视频中的声音烦扰访问者，并再次提供了精彩的：not（）伪选择器：
video[autoplay]:not([muted]) {display: none;}
18、灵活运用 root 类型
响应布局中的字体大小应该可能主动调整到视区，从而保留编写媒体查问的工作，以解决字体大小。能够应用 :not 和视区单位，依据视区高度和宽度计算字体大小：
:root {font-size: calc(1vw + 1vh + .5vmin); }
当初，您能够应用根 em 单位，该单位基于:not：
body {font: 1rem/1.6 sans-serif;}
联合下面的 rem/em 技巧以取得更好的管制。
19、在表单元素上设置字体大小，以取得更好的挪动体验
为了防止挪动浏览器（iOS Safari 等）在点击 <select> 下拉列表时放大 HTML 表单元素，请在增加 font-size 款式：
input[type="text"], input[type="number"], select, textarea {font-size: 16px;}
20、CSS 变量
最初，最弱小的 CSS 级别来自于 CSS 变量，它容许您申明一组公共属性值，这些值能够通过样式表中任何地位的关键字重用。你可能有一套色彩在整个我的项目中应用，以放弃一致性。
在 CSS 中重复反复这些色彩值不仅是件烦人的事件，而且还容易出错。如果某个色彩在某个时刻须要扭转，你就不得不去寻找和替换，这是不牢靠或不疾速的，当为最终用户构建产品时，变量使得定制变得容易得多。例如：
:root {--main-color: #06c;--accent-color: #999;}h1, h2, h3 {color: var(--main-color);}a[href]:not([class]),p,footer span{color: var(--accent-color);}
本文分享自华为云社区《20 个 CSS 疾速晋升技巧》，原文作者：加油 O 幸福。
点击关注，第一工夫理解华为云陈腐技术~