- 选择器解析方式是反过来的,从右到左解析,也就是从子元素到父元素,加快浏览器对CSS的解析速度,性能提高。
- 选择器权重 : ID选择器#id{}+100 类 、属性 、 伪类 +10 元素 ‘伪元素’+1 其他选择器 +0
- 权重不进位
- 图片下面有空隙,img按照inline这样的方式对齐,也就是以基线base-line对齐,也就与底线有一定的空隙,解决方案:vertical-align:bottom,让它以底线对齐;方案二:display:block。
- 一行的inline-box 的行高由最大行高那个inline-box决定的,所以设置不同的行高显示相同,行高并不改变其里面的布局,而是把父盒子给撑高了。
- 想要一个元素在父容器中居中,可以设定line-height比本身元素的高度高,这样高出来的高度就会分布在上下两侧,实现垂直居中的效果。
- hsla(x,y,z,k)色相
- 背景渐变:background:linear-gradient(135deg,red,green)
- 多背景叠加:bg:linear-gradient(135deg,red,green),linear-gradient(135deg,red,green)中间加逗号
- 雪碧图:使用同一张图片,主要用background-position去定位大背景图中的小图标。好处:性能优化,减少图片的加载,减少HTTP的请求。
- base64图片:文本格式,适合小图标的使用场景。缺点:体积比原图大1/3,CSS文件增大,增大解码的开销(先转换成图片,再去做后面的操作,增加浏览器的负担,特别是移动端);优点:性能优化,减少HTTP连接数。
- border-img:给边框加背景
- 三角形的制作:
div{ width:0px; height:30px; border-bottom:30px solid red; border-right:20px solid transparent; border-left:20px solid transparent; }
- 滚动条:当行数过多时,使用overflow属性设置显示效果,有4个值,auto自适应(如果行数不够多则没有出现滚动条,行数过多出现滚动条,windows环境下);hiden隐藏(行数过多隐藏掉,只显示部分);visiable(所有行数都可见,撑出父元素的外面),scroll(效果与auto几乎一样,唯一不同是windows环境下,当行数很少时也出现滚动条。)
- 文字折行:overflow-wrap(word-wrap)通用换行控制 ; word-break 针对多字节文字 ;white-space 空白处换行 。使用white-space:nowrap使一个超长的句子不换行。
- CSS Hack:Hack即不合法但生效的写法,主要用于区分不同浏览器,缺点:难理解 难维护 易失效
- 面试真题 > CSS样式(选择器)的优先级:1.计算权重确定 2.!important优先级最高 3.内联样式 4 后写的生效(就近原则)
- 面试真题 > 伪类和伪元素的区别 : 伪类表状态 ; 伪元素是真的有元素 ; 前者单冒号,后者双冒号。
- 面试真题 > 如何美化checkbox? 1.label[for]和id 2.隐藏原生input 3.:checked+label
CSS工作应用知识点与常考面试题总结(一)
猜你喜欢
转载自blog.csdn.net/Best_CXY/article/details/79843049
今日推荐
周排行