2022面试题CSS

大大的周 02-07 4524

1、CSS选择器的权重优先级第一等：!important 第二等：行内样式style 第三等：Id选择器第四等：类、伪类和属性选择器第五等：标签选择器和伪元素选择器第六等：继承、通配符

2、标准盒模型和怪异盒模型的区别

标准盒模型宽高包含content+padding+boder怪异盒模型宽高只包含content 标准盒模型转换为怪异盒模型 box-sizing: border-box

3、CSS中的BFC

什么是BFC BFC就是块级格式上下文是页面盒模型布局中的一种CSS渲染模式，相当于一个独立容器，里面的元素和外部的元素互不影响 BFC的特性内部的盒子会按照垂直方向一个个排列同一个BFC下的相邻块级元素会发生外边距折叠，创建新的BFC包含其中一个元素可以避免（解决外边距重叠）设置了BFC的区域不会和浮动元素重叠（解决浮动元素覆盖）当BFC中有浮动元素时，该浮动元素的高度也会被计算其中（解决高度塌陷）如何触发BFC 设置float浮动设置overflow: hiddenposition的值设为absolute或fixeddisplay: table|flex|grid

4、如何设置三栏布局

方法一：flex布局两边设置固定宽度，中间设置flex：1<style> .box { display: flex; } .left { background: palegreen; width: 100px; height: 200px; } .right { background: palegreen; width: 100px; height: 200px; } .center { height: 200px; flex: 1; background: pink; } </style> <body> <div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </body> 方法二：浮动布局左右两栏设置浮动，中间设置margin，中间的div布局放在最后<style> .left { float: left; background: rgba(0, 0, 0, .1); width: 100px; height: 200px; } .right { float: right; background: palegreen; width: 100px; height: 200px; } .center { height: 200px; margin: 0 100px; background: pink; } </style> <body> <div class="box"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div> </body> 方法三：定位布局父元素设置position: relative，左右两栏设置绝对定位，中间设置margin，中间的div布局可以放在任意位置<style> .box { position: relative; } .left { position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, .1); width: 100px; height: 200px; } .right { position: absolute; right: 0; top: 0; background: palegreen; width: 100px; height: 200px; } .center { height: 200px; margin: 0 100px; background: papayawhip; } </style> 方法四：浮动布局+BFC<style> .left { float: left; background: rgba(0, 0, 0, .1); width: 100px; height: 200px; } .right { float: right; background: palegreen; width: 100px; height: 200px; } .center { height: 200px; overflow: hidden; background: pink; } </style>

5、盒子水平垂直居中的方法

方法一： flex

.fater { display: flex; align-item: center; justify-content: center;

方法二：利用margin与定位

.fater { position: relative; } .child { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }

方法三：利用position定位实现

.fater { position: relative; } .child { position: absolute: top: 50%; left: 50%; transform: translate(-50%, -50%) // 未知宽高 margin-top: -50px; // 已知宽高为100 margin-left: -50px; // 已知宽高为100 }

6、移动端适配

方法一：设置页面视口viewport<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 方法二：配置rem单位方法三：利用媒体查询

7、对重绘和重排的理解

重绘当元素的外观、背景、颜色等改变，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观就叫重绘重排当渲染树一部分或者全部因为大小或者边距而改变，需要渲染树重新计算的过程叫做重排重绘不一定需要重排，重排必然会导致重绘如何避免重绘和重排在元素的显示上尽量使用opacity代替visibility（重绘）元素定位时使用tranform代替top、left（重排）尽量不使用table布局，因为一个小的改动会造成整个table重新布局（重排）减少直接操作DOM元素（重排）为元素添加类，样式都在类中改变（重绘）

8、display、visibility、opacity之间的区别

display: none是将DOM元素设置为隐藏，该隐藏是不占位的visibility: hidden也是将DOM元素设置为隐藏，但是该隐藏仅仅是看不见而已，还是占位的opacity: 0是将透明度设置为0，仅仅是看不见而已，还是占位的

9、rgba和opacity的区别

rgba和opacity都可以实现透明效果，但最大的不同是opacity作用于元素以及元素内的所有内容，而rgba只作用于元素的颜色或其背景色

10、如何用css画一个三角形

首先画一个正常的四边形div，然后将他的宽高设置为0再将boeder-top去掉最后再将border-right和border-left设置成透明，这样就得到了一个三角形