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

CSS高频面试题及详细答案（实战版）一、CSS基础核心题1、CSS的引入方式有哪几种？区别是什么？答案：三种引入方式，各自使用场景和优先级不同行内样式：直接在标签上写style属性。优先级最高，权重最大，但是耦合性强、不利于维护，一般只用于临时微调样式，不适合全局使用。内部样式：在html页面head标签内写style标签。仅作用于当前页面，样式和页面绑定，复用性差，适合单页面简单样式开发。外部样式：单独创建.css文件，通过link引入。实现结构和样式分离，可多页面复用，便于统一维护、优化加载，是项目开发主流方式。优先级排序：行内样式>内部样式=外部样式（后写覆盖先写）2、CSS选择器有哪些？优先级规则是什么？常用选择器：通配符选择器、标签选择器、类选择器、id选择器、后代选择器、子代选择器、相邻兄弟选择器、伪类选择器、伪元素选择器、属性选择器。优先级权重规则（从低到高）：通配符、继承样式：权重0标签选择器、伪元素：权重1类、属性、伪类选择器：权重10id选择器：权重100行内样式：权重1000!important：最高优先级，覆盖所有样式（项目中慎用）补充规则：权重叠加不进位；权重相同的情况下，后定义的样式覆盖先定义的。3、什么是CSS继承？哪些属性可以继承，哪些不可以？CSS继承指子元素会默认继承父元素的部分样式，无需重复设置，用来简化代码。可继承属性：字体系列（font-size、font-family、font-weight）、文本系列（color、text-align、line-height、text-indent）、光标cursor、visibility等。不可继承属性：盒子模型（width、height、margin、padding、border）、定位（position、top、left）、浮动、background、display、z-index等。手动控制继承：设置inherit强制继承，initial恢复默认样式。二、盒子模型核心面试题4、标准盒模型和怪异盒模型的区别？如何切换？标准盒模型（W3C盒模型）：width、height只代表内容区尺寸。元素实际宽度=width+padding+border+margin。日常开发默认是标准盒模型。怪异盒模型（IE盒模型）：width、height包含内容区+padding+border。元素实际宽度=width+margin。设置padding、border不会撑大盒子整体尺寸。切换方式：box-sizing:content-box：标准盒模型（默认）box-sizing:border-box：怪异盒模型（项目通用，推荐全局设置）5、margin塌陷是什么？如何解决？margin塌陷是垂直方向外边距合并的问题，水平方向不会塌陷。主要分为两种场景：1、相邻元素塌陷：上下两个块级元素，上方元素的margin-bottom和下方元素的margin-top会合并，取最大值，而非相加。2、父子元素塌陷：父元素没有边框、内边距、浮动、overflow等隔离条件时，子元素的margin-top会穿透父元素，导致父元素整体下移。解决方案：父元素设置overflow:hidden（最常用，不影响样式）父元素设置border或padding父元素开启浮动、绝对定位统一使用padding代替margin做间距三、浮动与清除浮动6、浮动的作用和副作用？如何清除浮动？浮动作用：最初用于文字环绕图片，现在主要用于实现横向布局、多列并排。浮动副作用：元素脱离标准文档流，父元素高度塌陷、后续标准流元素位置错乱、页面布局错位。常用清除浮动方法：伪类清除（推荐）：给父元素添加clearfix类，通过::after伪类清除浮动，代码复用性强，无副作用。

.clearfix::after{

content:'';

display:block;

clear:both;

visibility:hidden;

height:0;

}父元素设置overflow:hidden；简单快捷，适合大多数布局场景额外空div设置clear:both；冗余标签多，不推荐项目使用四、定位布局面试题7、position有哪些值？各自特点？static（默认）：标准文档流定位，没有偏移效果，top/left/right/bottom/z-index全部失效。relative相对定位：相对于自身默认位置偏移，不脱离文档流，原位置保留，常用于作为绝对定位父级参照物。absolute绝对定位：相对于最近的非static定位父级偏移，完全脱离文档流，原位置不保留，宽高默认由内容撑开。fixed固定定位：相对于浏览器窗口定位，脱离文档流，页面滚动时元素位置固定，常用于导航栏、返回顶部按钮。sticky粘性定位：结合相对和固定定位特点，默认跟随文档流滚动，到达设置阈值后固定在屏幕中，常用于表头吸顶。8、z-index生效条件是什么？z-index用于控制元素层叠顺序，数值越大层级越高，优先显示。生效必要条件：元素必须设置非static的position属性（relative/absolute/fixed/sticky）。静态定位下z-index无效。补充：层叠上下文会限制z-index，父元素层级低时，子元素再高的z-index也无法超越更高层级的父元素。五、Flex弹性布局（高频重点）9、Flex布局的优势？和浮动布局的区别？Flex优势：语法简洁、适配性强、天然支持居中、自适应布局简单、不存在高度塌陷问题、移动端首选布局方案。和浮动的区别：浮动是半脱离文档流，存在布局塌陷、错位问题，需要手动清除浮动；Flex是弹性布局，完全由容器控制子元素排布，无副作用。浮动适合简单传统PC多列布局；Flex适合自适应、居中、等分、不等分布局。浮动垂直居中实现复杂；Flex一行代码即可实现水平垂直居中。10、Flex常用属性有哪些？分别作用于父容器和子项？父容器属性：display:flex；开启弹性布局flex-direction：设置主轴方向（行/列、正向/反向）justify-content：主轴对齐方式（居中、两端对齐、均分）align-items：侧轴单行对齐方式flex-wrap：是否自动换行align-content：多行侧轴对齐方式子项属性：flex-grow：放大比例，默认0（不放大）flex-shrink：缩小比例，默认1（自动缩小）flex-basis：元素基础尺寸，优先级高于widthflex：复合属性，常用flex:1自动均分剩余空间align-self：单独设置自身侧轴对齐方式order：控制排列顺序，数值越小越靠前六、Grid网格布局11、Grid布局的特点？和Flex的适用场景区别？Grid特点：二维布局系统，同时控制行和列，适合规整的网格布局、卡片布局、整体页面排版，是目前最强大的CSS布局方案。场景区别：Flex是一维布局，只能控制单行或单列，适合线性排布、内容自适应、居中对齐。Grid是二维布局，同时管控行列，适合整体页面栅格、多行列规整布局。七、CSS样式与进阶特性12、display:none和visibility:hidden的区别？display:none：完全隐藏元素，脱离文档流，不占空间，不响应事件，页面重排重绘，频繁切换性能差。visibility:hidden：视觉隐藏，元素保留原有位置和空间，不脱离文档流，不响应事件，只会重绘不会重排，性能更好。13、CSS重排和重绘的区别？如何优化？重绘：元素样式改变但尺寸、位置不变，浏览器重新绘制样式，比如修改color、background。开销较小。重排（回流）：元素尺寸、位置、布局发生改变，浏览器重新计算整个页面布局，比如修改宽高、margin、定位。开销极大。优化方案：集中修改样式，不要逐行多次修改使用class统一替换样式，避免频繁操作行内样式频繁变动的元素脱离文档流（绝对定位、固定定位）开启GPU加速（transform、opacity不会触发重排）14、transform、transition、animation的区别？transform变换：静态样式属性，用来实现平移、缩放、旋转、倾斜，无动画效果，不会触发重排。transition过渡：简单动画，实现样式的平滑过渡，需要触发条件（hover、点击、js修改），适合单次简单动画。animation动画：自定义关键帧动画，可设置循环、延时、速度曲线、暂停，支持复杂、持续、自动播放的动画效果。八、CSS兼容与实战问题15、常见的CSS兼容问题及解决方案IE双边距bug：浮动元素margin双倍显示，解决方案：设置display:inline-block。图片默认间隙：行内块图片底部有空白缝隙，解决方案：父元素设置font-size:0或图片设置display:block。Flex低版本兼容：老旧浏览器需要加前缀-webkit-，尽量使用成熟布局写法。百分比高度失效：父元素未设置高度时，子元素百分比高度无效，解决方案：给父级固定高度或设置html/body100%高度。16、如何实现单行、多行文本溢出省略？单行文本溢出：PlainText

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;多行文本溢出（通用两行）：PlainText

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

overflow:hidden;九、经典手写布局面试题17、如何实现元素水平垂直居中？（至少三种）方法一：Flex居中（最常用）PlainText

.parent{

display:flex;

justify-content:center;

align-items:center;

}方法二：绝对定位+transform（不定宽高通用）PlainText

.box{

position:absolute;