css垂直居中方法盘点

有些css属性虽然经常再用，但是基本概念久而久之却忘了。。。这篇博客就是一个笔记，时常回来看看，争取做到概念与运用都很熟练。

1、固定定位(fixed | absolute)

这两种定位方式都脱离了文档流，并且能够根据top、right、left、bottom属性进行定位。不同的是 fixed 是根据浏览器窗口的左上角为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。而 absolute 参照的位置是离当前元素最近的定位方式为 fixed、absolute、relative 的祖先元素的左上角。

2、浮动：(float:left | right)

CSS中的定位机制有：普通流，浮动，绝对定位(暂时不讨论)

(1)普通流：很多人和文章称之为文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ，但标准里只有另一个词，叫做普通流(normal flow)。现实中大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。

(2)浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（"高度塌陷"现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。解决浮动带来的问题，很多人都已经习惯称之为清除浮动，但叫做闭合浮动比清除浮动更加严谨。

(3)闭合浮动的几种常见方法：

方法一：添加一个空的元素标签：<div class="clear"></div>；CSS：.clear{clear:both;height:0;line-height:0;font-size:0;}。

方法二：浮动元素的父级div元素设置：overflow:hidden | auto。

方法三：伪元素 ::after实现
.clearfix{zoom:1;}
.clearfix::after{content:'';clear:both;display:table;height:0;visibility:hidden;}。

3、css3选择器

这里只是列举一些日常开发中不是很常用，但是很重要的选择器。

(1)nth-child：

页面结构：ul.list1>li*5，这里就不详细写出来了。css如下：

.list1 li:nth-child(odd){
  background:#f2f2f2; /*奇数行的背景色为#f2f2f2*/
}
.list1 li:nth-child(even){
  background:#fff; /*偶数行的背景色为#fff*/
}
.list1 li:nth-child(5){
  background:orange; /*第五行的背景色为orange*/
}

注意： &:nth-child 与 &:nth-of-type 的区别，见下面的栗子：

<section>
　　<h1>Words</h1>
　　<p>hello</p>
　　<p>test</p>
</section>

p:nth-child(odd) { color:#f00; } ：奇结点

p:nth-child(even) { color:#00f; }：偶结点

p:nth-child(2) {color:orange;} ：首先这是一个p标签，然后它是父节点的第二个子元素。hello的颜色为orange。

p:nth-of-type(2) {color:orange;} ：选中父节点的第二个子p标签。test的颜色为orange。

(2)类名通配符

Class^= 匹配类名以指定值开头的每个元素。Class$= 匹配类名以指定值结尾的每个元素。Class*= 匹配类名中包含指定值的每个元素。及下面的例子：

div[class^='box-'] { color:red; }
div[class*='-box'] { color:orange; }
div[class$='-content'] { color:green; }
<div class="box-1">box-1</div><!-- 红色 -->
<div class="main-box">main-box</div><!-- 橙色 -->
<div class="main-content">main-content</div><!-- 绿色 -->

4、transform & transition & animation 简介：

transform：对元素进行变形；

transition：对元素某个属性或多个属性的变化，进行控制（时间等）。但只有两个关键贞。开始，结束。

animation：对元素某个属性或多个属性的变化，进行控制（时间等）。可以设置多个关键贞。

transition 与 animation 实现动画区别：transition 需要触发一个事件，而 animation 在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。

5、::-webkit-scrollbar：浏览器自带滚动条设置(美化/去掉)

::-webkit-scrollbar { display: none; /*隐藏滚动条*/ }

更多详情请参考：MDN  ::-webkit-scrollbar   Styling Scrollbars

　　
6、伪元素 before/after 中的图片大小设置

例如：.box:before{ content:' '; background:url(icon.png); background-size:20px 20px; }

7、postcss：

它能够为 CSS 提供额外的功能；

通过在 PostCSS 这个平台上，我们能够开发一些插件，来处理我们的CSS，比如热门的：autoprefixer；

我们能够使用js来开发插件（这点对前端来说很重要）。

PostCSS本身只是一个API，使用js处理css。