CSS相关问题

Posted 2021-09-26 前端茅台

1、浏览器是如何解析css选择器的？
浏览器会【从右往左】解析css，这样匹配，性能更好，因为第一步就可能筛选掉大部分数据
2、css选择器有哪些，哪些属性可以继承？
id选择器，类选择器，标签选择器，子选择器，兄弟选择器，相邻选择器，属性选择器，伪类选择器，全局选择器，群选择器。
字体类属性如：font-size，文本系列属性如：text-algin,color等
3、为什么要初始化样式？
浏览器差异，不同的浏览器对标签的默认值是不同的，如果不初始化会出现页面差异。
4、display:none和visible:hidden有什么区别？
display控制元素的显示，当为none时不显示并且不占网页空间；visible为hidden的时候，元素隐藏但依然占据空间，visible具有继承性
5、对BFC规范的理解？
BFC块级格式化上下文，是一个独立的布局环境，容器内的元素和容器外的元素互不干扰。
创建BFC：根元素或包含根元素的元素，浮动元素，绝对定位，overflow：hidden|auto|scroll,display:inline-block | flex | inline-flex | table-cell | table-caption
BFC可以解决高度塌陷，margin塌陷等问题
6、为什么要清除浮动，清除浮动有那些方式？
因为浮动会造成高度塌陷，可以利用BFC清除浮动，底部元素设置clear:both,利用伪元素清除浮动。

// 在父元素上添加此类， 利用伪元素清除浮动
.clearfix:after { 
    content:""; 
    display:table; /*采用此方法可以有效避免浏览器兼容问题*/
    clear:both;
 }

7、设置浮动后，该元素的display值是多少？

display:block;

8、css优化提高性能的方法有哪些？

css压缩，webpack里面可以使用 MiniCssExtractPlugin 插件
减少css嵌套，最好不要套三层以上
css精灵图片
合并css文件，提取公共样式

9、垂直方向元素的百分比是相对容器的高度吗？
子元素的高度百分比是相对于父元素高度
margin-top,padding-top百分比是相对父元素的宽度
10、如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器的频率是60Hz，即1s刷新60次，所以理论上1/60＊1000ms ＝ 16.7ms最佳
11、元素居中方式？
a、文本居中：text-align:center;
b、display:flex方式居中，justify-content:center水平居中，align-item:center垂直居中。
c、absolute + top：50% + left：50% + margin-top:负高度一半 +margin-left:负宽度一半
d、 absolute + top：50% + left：50% + transform: translate(-50%, -50%);
12、盒子模型
标准的盒子模型是:content-box,意思是盒子模型由margin+border+padding+content构成
怪异的盒子模型是:border-box,意思是盒子模型的内容区域包含了 border和padding和内容的width，整个盒子是由margin+内容区域构成