css 面试题整理

css 面试题整理

以下是CSS面试题整理：
CSS选择器优先级：
内联样式具有最高优先级。ID选择器优先级高于类选择器、属性选择器和伪类选择器。类选择器、属性选择器和伪类选择器优先级相同，低于ID选择器但高于标签选择器和伪元素选择器。标签选择器和伪元素选择器优先级最低。使用!important标志可以提升属性的优先级。Flexbox布局：
使用display: flex;来启用Flexbox布局。justifycontent: center;和alignitems: center;可以实现元素的水平垂直居中。margin: auto可以兼容旧版浏览器实现居中。position + translate技术可用于IE9及以上版本的居中。position + calc提供精准的定位策略。BFC和IFC：
BFC是元素垂直排列的独立区域，通过overflow、position、float和特定的display规则开启。IFC是行级的秩序，遵循内联元素的规则。position属性：
absolute定位使元素脱离文档流。fixed定位使元素固定在浏览器窗口。relative定位使元素相对于其正常位置进行偏移。static是元素的默认定位方式。inherit使元素沿用父元素的定位方式。CSS3 Flex布局的灵活性：
Flex布局颠覆了传统布局，子元素的float和verticalalign失效。通过调整容器的属性，如主轴方向、换行规则、对齐方式等，实现布局自由。了解order、flexgrow、flexshrink等属性，以及alignself的使用。清除浮动和固定底部栏：
使用:after伪元素和激活BFC来清除浮动。处理固定底部栏的策略是布局设计中的重要环节。ElementUI样式问题：
为非根元素修改样式或使用/deep/选择器穿透子组件，解决ElementUI样式不生效的问题。折叠穿透：
通过上层div的pointerevents设置，实现鼠标穿透到下层元素的效果。动态高度：
使用固定宽度和动态margin、图片自动缩放、百分比和vmin单位等实现高度随宽度变化的视觉效果。盒模型：
了解contentbox、borderbox和inherit的选择，以及它们如何影响浏览器计算元素尺寸。Less与Sass：
Less对初学者友好，Sass功能强大，各有优点。伪元素与伪类：
伪元素和伪类用于选择性地呈现元素的不同状态。CSS单位：
掌握相对单位和绝对单位的使用，是前端设计中的必备知识。2025-04-25