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的值文章来源：https://www.toymoban.com/news/detail-821135.html
2、利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1文章来源地址https://www.toymoban.com/news/detail-821135.html
到了这里，关于今日前端十个知识点——CSS篇（二）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
