css技巧

1、not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式：

.nav li:not(:last-child){border-right:1pxsolid#666;}

2、行间距（line-height）可以作为给你的整个项目设置的一个属性，不仅可以减小代码量，而且可以让你的网站的样式给一个标准的外观

body{line-height:1.5;}

3、垂直居中任何元素 

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

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

4、使用SVG icons  .logo{background:url("logo.svg");}

！温馨提示：如果将SVG用在可交互的元素上比如说button，SVG 会产生无法加载的问题。可以通过下面这个规则来确保SVG可以访问到（确保在HTML中已设置适当的aria属性）

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

5、使用 “OWL选择器”使用通用选择器（universal selector）* 和相邻的兄弟选择器（adjacent sibling selector）+ 可以提供一个强大的的CSS功能，给紧跟其他元素中的文档流中的所有元素设置统一的规则

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

6、一致的垂直结构在元素内使用通用选择器（*）为布局的特定部分创建一致的垂直节奏：

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

7、对更漂亮的换行文本使用 box-decoration-break，假设您希望对换行到多行的长文本行应用统一的间距、边距、突出显示或背景色，但不希望整个段落或标题看起来像一个大块。Box Decoration Break属性允许您仅对文本应用样式，同时保持填充和页边距的完整性。如果要在悬停时应用突出显示，或在滑块中设置子文本样式以具有突出显示的外观，则此功能尤其有用：

.p{display: inline-block;box-decoration-break: clone;-o-box-decoration-break: clone;-webkit-box-decoration-break: clone;}

8、等宽表格单元格，表格可能很难处理，所以尝试使用table-layout：fixed来保持单元格相等宽度：

.calendar{table-layout: fixed;}

9、强制使用属性选择器显示空链接；例如，<a>元素没有文本值，但href属性有一个链接：

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

10、样式“默认”链接这迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，可能会导致您的主链接样式比按钮文本颜色更容易出现问题。 尝试这种较少干扰的方式为“默认”链接添加样式：

a[href]:not([class]) {color:#999;text-decoration: none;transition: all ease-in-out .3s;}

11、比率框，要创建具有固有比率的框，您需要做的就是将顶部或底部填充应用于div：

.container{height:0;padding-bottom:20%;position: relative;} 

 .containerdiv{border:2pxdashed#ddd;height:100%;left:0;position: absolute;top:0;width:100%;}

ps：使用20％进行填充使得框的高度等于其宽度的20％。无论视口的宽度如何，子div都将保持其纵横比（100％/ 20％= 5：1）。

12、风格破碎的图像，这个技巧不是关于代码缩减，而是关于细化设计细节的。破碎的图像发生的原因有很多，要么不雅观，要么导致混乱（只是一个空元素）。用这个小小的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;}

13、使用rem进行全局大小调整；使用em进行局部大小调整，在设置根目录的基本字体大小后，例如html字体大小：15px；，可以将包含元素的字体大小设置为rem:

article{font-size:1.25rem;}     aside{font-size: .9rem;} 然后将文本元素的字体大小设置为em：h2{font-size:2em;}     p{font-size:1em;}

14、隐藏未静音的自动播放视频 video[autoplay]:not([muted]) {display: none;}

15、灵活运用root类型 :root{font-size:calc(1vw + 1vh + .5vmin);}

16、在表单元素上设置字体大小，以获得更好的移动体验

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

17、CSS变量  :root{--main-color:#06c;--accent-color:#999;}