0725-CSS篇
一、重绘与回流
重绘:当元素的背景颜色,边框颜色发生改变时,该元素会进行重绘
回流:当元素的几何属性(宽,高,内外边距)发生改变时,html渲染树会回流,重新渲染元素的结构样式
总结:回流一定会触发重绘,但是重绘不一定会触发回流
二、如何实现三角形
利用border-(方向)来确定三角形的朝向,利用边框大小来确定三角形的大小
三、img标签 alt和title的区别
alt:当图片显示出现问题的时候,用来替换图片的提示文字,当图片显示成功,文字就不显示
title:鼠标移动到图片上时的提示,不管图片是否正常显示,该提示文字都会正常显示
4、flex1
flex1是复合属性,是flex-grow、flex-shrink和flex-basis三种属性的缩写
flex-grow:当父元素大于子元素时,设置flex-grow,子元素会按照flex-grow的比例去扩大,直到撑满整个父盒子大小
flex-shrink:当父元素小于子元素时,设置flex-shrink,子元素会按照flex-shrink的比例去缩小,直到子元素的宽度大小等于父元素的宽度大小
5、link和@import到底有什么区别?
相同点:都是用来引入css的外部样式的
不同点:
- link不仅可以引入css还可以定义ref等链接属性,@import只能引入css
- link的权重高于@import。link属于HTML标签所以不受兼容性的影响
- link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
6、怎么实现右边固定,左边自适应 (2种以上 bfc,或 flex实现)
第一种方法:利用flex布局,给右边的盒子设置宽高,然后左边的盒子设置flex:1
第二张方法:给右边盒子定位,设置宽高,然后给左边的盒子添加overflow:hidden
7、高度为0.5像素
第一种方法:直接写1px 然后通过transform scale(0.5)或zoom(0.5)
第二种方法:背景渐变,一半有颜色,一半没颜色
第三种方法:利用盒子阴影