今日前端十个知识点——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

你可能感兴趣的:(前端,css)