Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md

README.md

light bulb icon

CSS 专业技巧 Awesome

一个帮你提升 CSS 技巧的收藏集。

对于其他收藏集合可以查看 @sindresorhus 创建的收藏集合 Awesome Lists.

目录

专业技巧

  1. 使用CSS复位
  2. 继承 box-sizing
  3. 使用unset而不是重置所有属性
  4. 使用 :not() 选择器来决定表单是否显示边框
  5. 为 body 元素添加行高
  6. 為表單元素設置:focus
  7. 垂直居中任何元素
  8. 逗号分隔的列表
  9. 使用负的 nth-child 来选择元素
  10. 使用 SVG 图标
  11. 使用 “形似猫头鹰” 的选择器
  12. 使用 max-height 来建立纯 CSS 的滑块
  13. 创造格子等宽的表格
  14. 利用 Flexbox 去除多余的外边距
  15. 利用属性选择器来选择空链接
  16. 给 “默认” 链接定义样式
  17. 一致的垂直节奏
  18. 内在比例盒
  19. 为破碎图象定义样式
  20. 用 rem 来调整全局大小;用 em 来调整局部大小
  21. 隐藏没有静音、自动播放的影片
  22. 使用选择器 :root 来控制字体弹性
  23. 为更好的移动体验,为表单元素设置字体大小
  24. 使用指针事件來控制鼠标事件

使用CSS复位

CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

现在元素的 margin 和 padding 已为0,box-sizing可以管理您的CSS盒模型布局。

演示

注意:如果你遵循接下来继承 box-sizing讲解的这个技巧, 你不需要在以上代码中添加 box-sizing 属性。

回目录

继承 box-sizing

html 元素继承 box-sizing

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

如此在插件或其它组件里改变 box-sizing 变得简单。

回目录

使用unset而不是重置所有属性

重置元素的属性时,不需要重置每个单独的属性:

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

你可以用all简写來指定所有元素的属性。 将该值设置为unset会将元素的属性更改为其初始值:

button {
  all: unset;
}

注意: 所有速记在IE11中不被支持,目前正在考虑Edge的支持。 IE11不支持unset

回目录

使用 :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;
}

当然,你也可以使用 .nav li + li,但是 :not() 更加清晰,具有可读性。

演示

回目录

body 元素添加行高

不必为每一个 <p><h*> 元素逐一添加 line-height,直接添加到 body 元素:

body {
  line-height: 1.5;
}

文本元素可以很容易地继承 body 的样式。

演示

回目录

為表單元素設置:focus

有視力的鍵盤用戶依靠焦點來確定鍵盤事件在頁面中的位置。 使表單元素的焦點脫穎而出,然後與瀏覽器的默認實現保持一致:

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: .05em;
}

演示

回目录

垂直居中任何元素

不!这绝不是黑魔法,真的可以垂直居中任何元素:

html,
body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

...還有CSS Grid:

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

这还不够?垂直方向,水平方向?任何元素,任何时间,任何地点?CSS-Tricks 有篇好文 讲到了各种居中的技巧。

注意: IE11 对 flexbox 的支持有点 bug

演示

回目录

逗号分隔列表

使列表的每项都由逗号分隔:

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

因最后一项不加逗号,可以使用 :not() 伪类。

注意: 这一技巧对于无障碍,特别是屏幕阅读器而言并不理想。而且复制粘贴并不会带走CSS生成的内容,需要注意。

回目录

使用负的 nth-child 来选择元素

使用负的 nth-child 可以选择 1 至 n 个元素。

li {
  display: none;
}

/* 选择第 1 至第 3 个元素并显示出来 */
li:nth-child(-n+3) {
  display: block;
}

或许你已经掌握了如何使用 :not()这个技巧,试下这个:

/* 选择除前3个之外的所有项目,并显示它们 */
li:not(:nth-child(-n+3)) {
  display: none;
}

如此简单!

演示

回目录

使用 SVG 图标

没有理由不使用 SVG 图标:

.logo {
  background: url("logo.svg");
}

SVG 在所有分辨率下都可以良好缩放,并且支持所有 IE9 以后的浏览器,丢掉你的 .png, .jpg, 或 .gif-jif-whatev 文件吧。

注意: 针对仅有图标的按钮,如果 SVG 没有加载成功的话,以下样式对无障碍有所帮助:

.no-svg .icon-only::after {
  content: attr(aria-label);
}

回目录

使用 “形似猫头鹰” 的选择器

这个名字可能比较陌生,不过通用选择器 (*) 和 相邻兄弟选择器 (+) 一起使用,效果非凡:

* + * {
  margin-top: 1.5em;
}

在此示例中,文档流中的所有的相邻兄弟元素将都将设置 margin-top: 1.5em 的样式。

更多 “形似猫头鹰” 的选择器,可参考 A List Apart 上面 Heydon Pickering 的文章

演示

回目录

使用 max-height 来建立纯 CSS 的滑块

max-height 与 overflow hidden 一起来建立纯 CSS 的滑块:

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

鼠标移入滑块元素时增大它的 max-height 值,便可以显示溢出部分。

回目录

创造格子等宽的表格

table-layout: fixed 可以让每个格子保持等宽:

.calendar {
  table-layout: fixed;
}

无痛的 table 布局。

演示

回目录

利用 Flexbox 去除多余的外边距

与其使用 nth-first-, 和 last-child 去除列之间多余的间隙,不如使用 flexbox 的 space-between 属性:

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

列之间的间隙总是均匀相等。

回目录

利用属性选择器来选择空链接

<a> 元素没有文本内容,但有 href 属性的时候,显示它的 href 属性:

a[href^="http"]:empty::before {
  content: attr(href);
}

相当简便。

演示

回目录

给 “默认” 链接定义样式

给 “默认” 链接定义样式:

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

通过 CMS 系统插入的链接,通常没有 class 属性,以上样式可以甄别它们,而且不会影响其它样式。

回目录

一致垂直节奏

通用选择器 (*) 跟元素一起使用,可以保持一致的垂直节奏:

.intro > * {
  margin-bottom: 1.25rem;
}

一致的垂直节奏可以提供视觉美感,增强内容的可读性。

回目录

固定比例盒子

要创建具有固定比例的一个盒子,所有你需要做的就是给 div 设置一个 padding:

.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%的padding-bottom使得框等于其宽度的20%的高度。与视口宽度无关,子元素的div将保持其宽高比(100%/ 20%= 5:1)。

演示

回目录

为破碎图象定义样式

只要一点CSS就可以美化破碎的图象:

img {  
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

以添加伪元素的法则来显示用户信息和URL的引用:

img::before {  
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img::after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

了解更多关于这类样式的技巧 Ire Aderinokun原帖.

回目录

rem 来调整全局大小;用 em 来调整局部大小

在根元素设置基本字体大小后 (html { font-size: 100%; }), 使用 em 设置文本元素的字体大小:

h2 { 
  font-size: 2em;
}

p {
  font-size: 1em;
}

然后设置模块的字体大小为 rem:

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: .9rem;
}

现在,每个模块变得独立,更容易、灵活的样式便于维护。

回目录

隐藏没有静音、自动播放的影片

这是一个自定义用户样式表的不错的技巧。避免在加载页面时自动播放。如果没有静音,则不显示视频:

video[autoplay]:not([muted]) {
  display: none;
}

再次,我们利用了 :not() 的优点。

回目录

使用选择器:root来控制字体弹性

在响应式布局中,字体大小应需要根据不同的视口进行调整。你可以计算字体大小根据视口高度的字体大小和宽度,这时需要用到:root:

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

现在,您可以使用 root em

body {
  font: 1rem/1.6 sans-serif;
}

演示

回目录

为更好的移动体验,为表单元素设置字体大小

当触发<select>的下拉列表时,为了避免表单元素在移动浏览器(IOS Safari 等等)上的缩放,加上font-size

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

💃

回目录

使用指针事件來控制鼠标事件

指针事件允許您指定鼠标如何与其触摸的元素进行交互。 要禁用按钮上的默认指针事件,例如:

.button-disabled {
  opacity: .5;
  pointer-events: none;
}

就这么简单。

回目录

支持情况

这些技巧适用于最新版的 Chrome, Firefox, Safari, Opera, Edge, 以及 IE11。