选择器的优先级：

!important
内联样式,权重1000
id选择器，权重100
类选择器，伪类选择器(li:last-child)，属性选择器，权重10
标签选择器、伪元素选择器(li:after)，权重1
子选择器，兄弟选择器，后代选择，通配符选择器,权重0

display、visibility和opacity

display:none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
visibility:hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
opacity:0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。

Transitions和Animations

Transitions只能通过指定属性的开始值与结束值，然后在这两者之间进行平滑过渡的方式来实现动画的效果，因此不能实现较复杂的动画效果；
而Animations功能可以通过定义多个关键帧以及每个关键帧中元素的属性值来实现复杂的动画效果。

标准盒模型和怪异盒模型

box-sizeing:content-box表示标准盒模型（默认值）
box-sizeing:border-box表示IE盒模型（也就是怪异盒模型）

@import

减少使用@import,而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

1px 像素问题

设备像素比 = 物理像素/逻辑像素。物理像素如10801920，逻辑像素如7501280。css中写的像素就是逻辑像素 dpr,即device pixel ratio,设备像素比

移动端 1px 像素问题及解决办法: 因为css中写的像素值，是逻辑像素值，一个逻辑像素值可能含有2个或3个物理像素。

解决办法：

媒体查询，-webkit-min-device-pixel-ratio设备像素比为2时，设置0.5px,为3时设置0.33px
transform: scaleY(0.33333);变换

像素单位

px、rem、em、vw、vh、vmin、vmax

vmin：vw和vh中的较小值
vmax：vw和vh中的较大值

水平垂直居中

1、使用flex布局

.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}

2、

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 自身 height 的一半 */
    margin-left: -50px;    /* 自身 width 的一半 */
}

3、

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

清除浮动的方式

在最后一个元素后面添加伪元素，clear:both
父元素overflow:hidden或者overflow:auto，构成一个BFC区域

BFC块格式化上下文 独立的布局环境，不会影响容器外的布局

创建BFC的条件

根元素：body
元素设置浮动：float 除 none 以外的值
overflow 值为visible以外的值，如：hidden、auto、scroll
元素设置绝对定位：position (absolute、fixed)
display 值为：inline-block、table-cell、table-caption、flex等
display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC

BFC可以解决margin重叠问题

伪类和伪元素

单冒号(:)用于CSS3伪类;
双冒号(::)用于CSS3伪元素。

flex布局

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为 0 1 auto
设置flex-item宽度时，优先用flex-basis，尽量不要用width，flex-basis优先级更高。
flex-grow指定在有剩余空间时，item的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink指定在空间不足时，item的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex计算

剩余空间计算方式

剩余空间：x
假设有三个flex item元素，flex-grow 的值分别为a, b, c
每个元素可以分配的剩余空间为： a/(a+b+c) * x，b/(a+b+c) * x，c/(a+b+c) * x
计算每个元素宽度：width + 每个元素可以分配的剩余空间

溢出空间计算方式

三个flex item元素的width: w1, w2, w3
三个flex item元素的flex-shrink：a, b, c
计算总压缩权重：
sum = a * w1 + b * w2 + c * w3
计算每个元素压缩率：
S1 = a * w1 / sum，S2 =b * w2 / sum，S3 =c * w3 / sum
计算每个元素宽度：width - 压缩率 * 溢出空间

Flexbox属性缩写陷阱

不写flex的时候，相当于flex: initial;默认值
flex: initial; === flex: 0 1 auto;
flex: none; === flex: 0 0 auto;
flex: auto; === flex: 1 1 auto;
flex: number; === flex: number 1 0%;（如flex:1; === flex: 1 1 0%;）
flex: 2 1 0; === flex: 2 1 0px;
flex: 100px; === flex: 1 1 100px;
flex: 0px; === flex: 1 1 0px;
flex: 0%; === flex: 1 1 0%;
flex: 0; === flex: 0 1 0%;
flex: 100px 0; === flex: 0 1 100px;
flex: 100px 2 1; === flex: 2 1 100px;
flex: 200 1 2;(无效的值，flex-basic的值除了0以外，必须带有px单位。正确的写法为flex:200 1 2px)

注意的地方：

flex-basic值为auto时，表示宽度值是自动计算的，为内容本身的宽度。
但这个auto只在没写flex，或者flex为initial、none、auto这三个值时，或者手动指定flex-basic: auto;/felx: 1 1 auto的情况下生效。
如果在flex缩写中只设置了flex-grow或felx-shrink的值，那么flex-basic的值会变为0%;
利用flex做手机端动态tab的左右滑动效果，不需要再动态的计算出父元素ul的宽度，如下：

ul{
     overflow-x: auto;
     overflow-y: hidden;
     display: flex;
     padding-right: 1em;
     >li{
         flex: 1 0 auto;
         padding: 0 .5em;
         height: vw(88);//自定义的scss方法,将88px转换成对应的vw单位数值
     }
}

参考

前端学习笔记-css篇