CSS高频面试题及详细答案（实战向）

CSS高频面试题及详细答案（实战向）一、CSS基础认知题1.说说CSS的优先级规则，以及权重计算方式CSS优先级是用来决定多个样式作用于同一元素时，最终生效样式的规则，权重从高到低分级清晰，不存在进制换算，是逐级对比的规则：优先级从高到低排序：!important>行内样式（style）>ID选择器>类/伪类/属性选择器>标签选择器>通配符选择器>继承样式权重分级（便于记忆和对比）：行内样式：1000ID选择器：0100类、伪类、属性选择器：0010标签、伪元素选择器：0001通配符、后代选择器：0000核心规则：1.权重数值不进位，比如11个类选择器（00110）优先级低于1个ID选择器（0100）；2.权重相同时，后写的样式覆盖先写的；3.!important优先级最高，会直接覆盖所有样式，开发中尽量少用，避免样式难以维护；4.继承的样式权重最低，低于所有手动设置的样式。2.CSS的引入方式有哪些？各自的优缺点一共三种常用引入方式：行内样式、内部样式、外部样式1.行内样式：直接在标签style属性写样式优点：优先级最高、生效快，适合临时微调样式；缺点：结构样式混杂，代码冗余，无法复用，不利于维护。2.内部样式：在head标签内的style标签中书写样式优点：样式集中管理，当前页面可复用，无额外网络请求；缺点：仅当前页面生效，多页面无法共享，大型项目代码臃肿。3.外部样式：通过link标签引入独立.css文件优点：结构样式分离，多页面可复用，代码简洁，可缓存优化加载速度；缺点：需要额外发送网络请求，单页面简单样式场景下略显繁琐。3.什么是CSS继承？哪些属性可以继承，哪些不可以？继承是指子元素会自动继承父元素设置的部分样式，无需重复书写，是CSS的默认特性。可继承属性：文本类、字体类、对齐类、颜色类常见：font系列、text系列、color、line-height、text-align、letter-spacing、word-spacing等不可继承属性：布局类、盒模型类、定位类常见：width、height、margin、padding、border、background、position、float、display、overflow等补充：可通过inherit强制继承样式，initial重置为默认样式。二、盒模型核心面试题1.标准盒模型和IE怪异盒模型的区别？如何切换？两种盒模型的核心区别是元素宽高的计算范围不同：1.标准盒模型（W3C盒模型）width/height仅代表内容区尺寸；元素实际占位宽高=内容宽高+padding+border+margin；默认样式：box-sizing:content-box。2.怪异盒模型（IE盒模型）width/height包含内容区+padding+border；元素实际占位宽高=设置的width/height+margin；样式切换：box-sizing:border-box。实战建议：开发中统一设置*{box-sizing:border-box;}，方便尺寸把控，不会因为内边距、边框撑大元素，减少布局错乱问题。2.说说margin塌陷（合并）问题，以及解决方案margin塌陷是块级元素垂直方向的margin会发生合并，取最大值作为最终间距，水平方向不会塌陷，是浏览器默认布局规则。两种常见场景：1.兄弟元素塌陷：上下两个相邻块级元素，上边距和下边距合并，取最大值；2.父子元素塌陷：父元素没有边框、内边距、行内元素包裹时，子元素的margin-top会穿透父元素，作用到父元素外部。解决方案：1.父子塌陷：给父元素设置border、padding、overflow:hidden、display:inline-block任意一种即可；2.兄弟塌陷：统一只设置单个方向margin（只设下边距/上边距），避免双向margin叠加。三、布局核心面试题（重中之重）1.常见的CSS布局方式有哪些？各自适用场景1.标准流布局：默认布局，块级垂直排列、行内水平排列适用：简单静态页面、文本基础布局，无需复杂排版的场景。2.浮动布局（float）：元素脱离标准流，水平排列适用：传统多列布局、图文环绕；缺点是会造成父元素高度塌陷，需要手动清除浮动。3.弹性布局（Flex）：一维布局模型，适配单行/多行简单排版适用：移动端布局、居中布局、等分列布局、元素自适应对齐，目前最常用的布局方式。4.网格布局（Grid）：二维布局模型，同时控制行和列适用：复杂整体页面布局、卡片网格布局、规整的多行列排版。5.定位布局（position）：精准控制元素位置适用：弹窗、悬浮按钮、图标定位、层级叠加场景。2.浮动为什么会塌陷？如何清除浮动？塌陷原因：浮动元素脱离标准文档流，不再占据文档空间，父元素没有高度自适应内容，导致高度为0，后续布局会错乱。四种常用清除浮动方法（实战常用）：1.伪元素清除法（最推荐）：给父元素添加clearfix类PlainText

.clearfix::after{content:'';display:block;clear:both;visibility:hidden;height:0;}优点：无冗余代码，不污染结构，可全局复用。2.overflow:hidden：给父元素设置overflow:hidden优点：代码极简；缺点：会隐藏溢出元素，不适合需要溢出显示的场景。3.额外标签法：父元素末尾添加空div，设置clear:both缺点：增加冗余DOM结构，不推荐。4.父元素设置高度：固定高度撑开容器，缺点：失去自适应能力。3.Flex布局常用属性及实战用法Flex分为容器属性（父元素）和项目属性（子元素），核心用于快速实现居中、自适应布局。容器常用属性：display:flex：开启弹性布局flex-direction：主轴方向（row水平/column垂直）justify-content：主轴对齐（center居中/space-between两端对齐/space-around均分）align-items：侧轴对齐（center居中/flex-start顶部对齐）flex-wrap：是否换行（wrap自动换行/nowrap不换行）项目常用属性：flex:1：自动均分剩余空间（高频用法）align-self：单独设置当前子元素侧轴对齐方式order：控制子元素排序，数值越小越靠前4.五种position定位的区别static（默认）：标准文档流定位，top/left等定位属性无效。relative（相对定位）：相对于自身默认位置偏移，不脱离文档流，原有位置保留，常用于作为绝对定位父容器。absolute（绝对定位）：相对于最近的非static父级元素定位，脱离文档流，不占据页面空间。fixed（固定定位）：相对于浏览器视口定位，脱离文档流，页面滚动时位置固定，常用于悬浮按钮、顶部导航。sticky（粘性定位）：相对定位+固定定位结合，滚动到阈值时固定，否则跟随文档流，常用于吸顶导航。四、CSS进阶难点面试题1.说说BFC是什么？触发条件及实战作用BFC全称块级格式化上下文，是浏览器的一块独立渲染区域，区域内部元素的布局不会影响外部元素，外部也不会影响内部。常用触发条件：根元素htmloverflow不为visible（hidden/auto/scroll）display:inline-block、flex、gridposition:absolute、fixedfloat不为none实战作用：1.解决margin塌陷问题；2.解决浮动父元素高度塌陷；3.阻止元素被浮动元素覆盖，实现自适应两列布局。2.CSS垂直水平居中的常用方法方法1：Flex居中（最通用，推荐）父元素设置：display:flex;justify-content:center;align-items:center;无需固定宽高，适配所有场景。方法2：绝对定位+transformPlainText

父：position:relative;

子：position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);优点：无需固定子元素宽高，适配性强。方法3：绝对定位+margin负值需要子元素固定宽高，top/left设为50%，margin设置宽高一半的负值，兼容性好，适配旧浏览器。方法4：Grid居中父元素设置：display:grid;place-items:center;代码极简，现代浏览器适配。3.重绘和重排的区别？如何优化性能？重排（回流）：元素的布局、尺寸、位置发生变化，浏览器需要重新计算页面布局，开销最大。触发场景：修改宽高、边距、定位、字体、DOM结构增减等。重绘：元素样式变化但布局不变，浏览器重新绘制样式，开销较小。触发场景：修改颜色、背景、透明度、阴影等。性能优化方案：避免频繁逐个修改样式，统一修改class类名；频繁动画元素开启硬件加速（transform、opacity），这两个属性不会触发重排；脱离文档流的元素修改样式，不会影响整体页面布局；减少DOM操作，批量更新页面结构。4.CSS3新特性有哪些？实战常用的选择器：属性选择器、伪类（nth-child、nth-of-type）、伪元素（::before、::after）盒模型：box-sizing、box-shadow阴影、border-radius圆角变换动画：transform平移/缩放/旋转、transition过渡、animation关键帧动画布局：Flex、Grid、多列布局样式增强：rgba透明、opacity透明度、background渐变、文字阴影text-shadow五、兼容与实战问题1.常见的CSS兼容问题及解决方案1.浏览器前缀兼容部分CSS3属性需要私有前缀适配旧浏览器：-webkit-（Chrome/Safari）、-moz-（Firefox）、-ms-（IE），可通过autoprefixer自动处理。2.IE双边距bugIE6下浮动元素双边距重叠，解决方案：设置display:inline。3.图片下方留白img是行内元素，默认存在基线留白，解决方案：img设置display:block或vertical-align:middle。4.