今日前端十个知识点——CSS篇（二）

1、伪元素和伪类

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成，只在外部显示可见，不会在文档的源代码中找到它们

伪类：将特殊的效果添加到特定选择器上，它是已有元素上添加类别，不会产生新的元素

2、line-height的赋值方式

带单位：固定值，根据父元素的行高传递给子元素；

纯数字（比例）：例如，父级设置行高1.5，子元素字体为18px，则子元素行高为18*1.5=27px

百分比：将计算后的值传给后代

3、css优化和提高性能的方法

css压缩、使用link加载、避免使用通配符、减少页面重绘和重排、避免层级过深、css雪碧图、抽离相同属性

4、预处理器和后处理器

预处理器：如less、sass、stylus。增加了css代码的复用性

后处理器：如postcss，在完成的样式表中根据css规范处理，常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题

5、单行、多行文本溢出

//单行文本溢出
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

//多行文本溢出
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3

6、媒体查询

使用@media查询，可以针对不同的媒体类型定义不同的样式，针对不同的屏幕尺寸设置不同的样式

7、z-index失效的情形

1、父元素position设置为relative,子元素的z-index会失效

2、元素没有position属性或position的属性值为static

3、元素设置了浮动

8、常见css单位

px、百分比、em、rem、vw/vh

9、实现两栏布局

左边一栏宽度固定，右边一栏宽度自适应

1、利用浮动，左边宽度设置为200px，float:left；右边的margin-left设置为200px，宽度设置为auto（撑满整个父元素）

2、利用flex布局：将左边元素设置为固定宽度200px，将右边元素设置为flex:1

3、利用绝对定位，将父级元素设置为相对定位，左边元素设置为absolute定位，并且宽度设置为200px，将右边元素的margin-left的值设置为200px

10、实现三栏布局

左右两栏宽度固定，中间自适应

1、利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向宽度大小的margin的值

2、利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1