css使用技巧

使用CSS复位

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

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

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

继承box-sizing

从html元素继承box-sizing

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

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

PS: :before和:after 单冒号和双冒号的区别
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）;
:before/:after 的兼容性要比::before/::after好 ， 不过在H5开发中建议使用::before/::after比较好。
想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
在代码顺序上，::after生成的内容也比::before生成的内容靠后；
如果按堆栈视角，::after生成的内容会在::before生成的内容之上。

使用:not()选择器来决定表单是否显示边框

先为元素添加边框

/* 添加边框 */
.nav li {
  border-right: 1px solid #ccc;
}

为最后一个元素去除边框

/* 去掉边框 */
.nav li:last-child {
  border-right: none;
}

不过不要这样做，使用:not()伪类来达到同样的效果

.nav li:not(:last-child) {
  border-right: 1px solid #ccc;
}

当然，也可以用.nav li + li 或者 .nav li:first-child ~li，但是:not() 更加清晰，具有可读性。

. 为body元素添加行高

不必为每一个

, <h*> 元素逐一添加line-height，直接添加到body元素

body {
  line-height: 1.5;
}

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

标题 垂直居中任何元素

能够垂直居中元素的代码

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: ","
}

因最后一项不加逗号，使用:not()伪类
注意：这一方法对于无障碍，特别是屏幕阅读器而言并不理想。而且复制粘贴并不会带走CSS生成的内容，需要注意。

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

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

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

使用:not() 更加简单

li:not(:nth-child(-n+3)) {
  display: none;
}

标题使用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;可以让每个格子保持等宽。

.table {
  table-layout: fixed;
}

标题利用Flexbox去除多余的外边距

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

.list {
  display: flex;
  justify-content: space-between;
}
.list .person {
  flex-basis: 23%;
}

列之间的间隙总是均匀相等
利用属性选择器来选择空链接
当元素没有文本内容，但是有href属性时，显示它的href属性

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

11. 给默认链接加样式

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

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

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

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

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

标题固定比例盒子

要创建有固定比例的一个盒子，需要做的是给DIV设置一个padding

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

20%的padding-bottom使得框等于其宽度的20%的高度。与视口宽度无关，子元素的div将保持其宽高比（100% : 20%）

标题为破碎的图片定义样式

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: "sorry, this image was broken :( ";
  display: block;
  margin-bottom: 10px;
}
img:after {
  content: "(url: "attr(src)")";
  display: block;
  font-size: 10px;
}

标题使用rem来调整全局大小，使用em来调整局部大小

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

h2 {
  font-size: 2em;
}
p {
  font-size: 1em;
}

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

.article {
  font-size: 1.25rem;
}
.module {
  font-size: 1rem;
}

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

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

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

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

现在就可以使用root em

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

标题为更好的移动体验，给表单元素设置字体大小

当触发的下拉列表时，为了避免表单元素在移动浏览器上的缩放，加上font-size

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