CSS小技巧

使用CSS复位

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

从 html 元素继承 box-sizing （上面代码就不用加box-sizing: border-box；）：

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

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

为 body 元素添加行高

body {  line-height: 1.5;}

垂直居中任何元素

html, body {  height: 100%;  margin: 0;}body {  -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;  display: -webkit-flex;  display: flex;}

逗号分隔列表

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

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

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

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

使用 SVG 图标

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

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

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

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

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

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

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

创造格子等宽的表格

.calendar {  table-layout: fixed;}

利用 Flexbox 去除多余的外边距

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

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

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

固定比例盒子

.container {  height: 0;  padding-bottom: 20%;  position: relative;}.container div {  border: 2px dashed #ddd;    height: 100%;  left: 0;  position: absolute;  top: 0;  width: 100%;}

为破碎图象定义样式

img {    display: block;  font-family: Helvetica, Arial, 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;}

用 rem 来调整全局大小；用 em 来调整局部大小，在根元素设置基本字体大小后 (html { font-size: 100%; }), 使用 em 设置文本元素的字体大小

h2 {   font-size: 2em;}p {  font-size: 1em;}//设置模块的字体大小article {  font-size: 1.25rem;}aside .module {  font-size: .9rem;}

隐藏没有静音、自动播放的影片,避免在加载页面时自动播放

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

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

:root {  font-size: calc(1vw + 1vh + .5vmin);}现在，您可以使用 root embody {  font: 1rem/1.6 sans-serif;}

原文链接