面试题0725-css篇

59 阅读2分钟

0725-CSS篇

一、重绘与回流

重绘:当元素的背景颜色,边框颜色发生改变时,该元素会进行重绘

回流:当元素的几何属性(宽,高,内外边距)发生改变时,html渲染树会回流,重新渲染元素的结构样式

总结:回流一定会触发重绘,但是重绘不一定会触发回流

二、如何实现三角形

利用border-(方向)来确定三角形的朝向,利用边框大小来确定三角形的大小

CSS画三角形.png

三、img标签 alt和title的区别

alt:当图片显示出现问题的时候,用来替换图片的提示文字,当图片显示成功,文字就不显示

title:鼠标移动到图片上时的提示,不管图片是否正常显示,该提示文字都会正常显示

img中alt和title的区别.png

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)

第二种方法:背景渐变,一半有颜色,一半没颜色

第三种方法:利用盒子阴影