CSS相关知识点

一.伪类选择器

伪类使用单冒号（如:hover、:visited），伪元素使用双冒号

::selection 表示元素选中内容（注意：这个伪类在火狐中需要采用另一种方式编写::-moz-selection）

二.浏览器内核

1.浏览器的内核引擎分类

• WebKit内核: Google Chrome、Safari、傲游3、猎豹浏览器、百度浏览器、opera浏览器等、都是基于Webkit开发的（edge浏览器也支持下面的css语法哦）
• Gecko内核: Firefox 是基于Gecko开发
• Trident内核: IE是基于Trident开发的

2.各浏览器内核的兼容写法

3.webkit内核的浏览器滚动条样式

三.sass语法

1.“&”符号

通常用于选择器中，表示选择某个元素的子元素或特定状态下的元素

2.@minx、@include

当你的代码中需要用到大段重复样式代码的时候，可以使用scss的混合器实现大段样式的复用。混合器使用@mixin标识符定义。

四.flex布局

详情参考：一文吃透 CSS Flex 布局 - 知乎

五. .npmrc文件

详情参考：【深入理解 .npmrc 文件_vue中的npmrc文件-CSDN博客】

六.css总结点

1.inherit、currentColor等

inherit 表示使用父级使用的值。eg:color: inherit;  

currentColor 跟随最接近的颜色属性值。

opacity实现透明效果,作用于元素，以及元素内的所有内容的透明度,设置后可能会发生背景色盖住了文字底色的情况。

box-shadow:

0 2px 5px 0 rgba(0,0,0,.16),

0 2px 10px 0 rgba(0,0,0,.12);

文本溢出省略
.classxxx {
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 使用省略号表示溢出内容 */
}

边框透明色
border: 1px solid transparent;

2.em

16px = 12pt = 1em = 100%em 不像 px 和 pt 那样，它是可以成比例缩放的单位。.5em就是0.5em

3.<pre>

<pre>可定义预格式化文本：被包围在<pre>标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

4.输入框placeholder

input::placeholder {
  color: #999; /* 设置颜色为灰色 */
}