伪元素:在内容元素的前后插入额外的元素或样式,但是这些元素实际上并不在文档中生成,只在外部显示可见,不会在文档的源代码中找到它们
伪类:将特殊的效果添加到特定选择器上,它是已有元素上添加类别,不会产生新的元素
带单位:固定值,根据父元素的行高传递给子元素;
纯数字(比例):例如,父级设置行高1.5,子元素字体为18px,则子元素行高为18*1.5=27px
百分比:将计算后的值传给后代
css压缩、使用link加载、避免使用通配符、减少页面重绘和重排、避免层级过深、css雪碧图、抽离相同属性
预处理器:如less、sass、stylus。增加了css代码的复用性
后处理器:如postcss,在完成的样式表中根据css规范处理,常做的是给css属性添加浏览器私有前缀,实现跨浏览器兼容性的问题
//单行文本溢出
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
//多行文本溢出
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3
使用@media查询,可以针对不同的媒体类型定义不同的样式,针对不同的屏幕尺寸设置不同的样式
1、父元素position设置为relative,子元素的z-index会失效
2、元素没有position属性或position的属性值为static
3、元素设置了浮动
px、百分比、em、rem、vw/vh
左边一栏宽度固定,右边一栏宽度自适应
1、利用浮动,左边宽度设置为200px,float:left;右边的margin-left设置为200px,宽度设置为auto(撑满整个父元素)
2、利用flex布局:将左边元素设置为固定宽度200px,将右边元素设置为flex:1
3、利用绝对定位,将父级元素设置为相对定位,左边元素设置为absolute定位,并且宽度设置为200px,将右边元素的margin-left的值设置为200px
左右两栏宽度固定,中间自适应
1、利用绝对定位,左右两栏设置为绝对定位,中间设置对应方向宽度大小的margin的值
2、利用flex布局,左右两栏设置固定大小,中间一栏设置为flex:1