CSS 面试题及详细答案（真实面试版）

CSS面试题及详细答案（真实面试版）一、CSS基础概念题1.什么是CSS？CSS的作用是什么？答案：CSS全称层叠样式表，是用于修饰和布局网页的样式语言。主要作用是分离网页的结构与样式，HTML负责搭建页面骨架结构，CSS专门负责页面的视觉表现，包括文字样式、颜色、间距、布局、动画、响应式适配等。同时CSS具备层叠特性，多个样式可以作用于同一个元素，根据优先级规则覆盖叠加，让页面样式开发更灵活、可维护，也便于统一整站视觉风格。2.CSS的引入方式有几种？区别是什么？答案：共三种引入方式，优先级从低到高：外部样式表<内部样式表<行内样式（1）外部样式表（link引入）通过link标签引入独立的.css文件，是项目最常用的方式。优点是结构样式完全分离，css文件可复用、方便维护、浏览器可缓存，提升页面加载速度。（2）内部样式表（style标签）在HTML页面head中写入style标签，书写CSS样式。仅作用于当前页面，适合单页面特殊样式，复用性差，大型项目不推荐。（3）行内样式（style属性）直接在HTML标签的style属性中写样式。优先级最高，会覆盖前两种样式，缺点是代码冗余、无法复用、不利于后期维护，仅用于临时覆盖样式场景。3.CSS选择器有哪些？优先级如何计算？答案：常用选择器分类：基础选择器：通配符选择器、标签选择器、类选择器、id选择器、属性选择器。复合选择器：后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器、交集选择器、并集选择器。伪类选择器：hover、active、focus、nth-child、nth-of-type等。伪元素选择器：::before、::after、::first-line、::first-letter等。优先级规则（从低到高）：1.通配符选择器、继承样式：00002.标签选择器、伪元素：00013.类选择器、属性选择器、伪类：00104.id选择器：01005.行内样式：10006.!important：优先级最高，无权重可言，强制覆盖所有样式补充规则：权重位数不进位，多个同级别选择器叠加只计数不进位；样式继承的权重永远低于手动设置的样式。4.什么是CSS继承？哪些属性可以继承，哪些不可以？答案：CSS继承指子元素会默认继承父元素的部分样式属性，无需重复书写，简化代码。可继承属性：字体系列（font-size、font-family、font-weight）、文本系列（color、text-align、line-height、text-indent）、行高、字间距、列表样式等。不可继承属性：盒子模型（width、height、margin、padding、border）、定位（position、top、left）、背景（background）、阴影、过渡、动画、display等。可以通过inherit强制属性继承，initial恢复属性默认值。二、盒子模型核心面试题1.标准盒子模型和IE怪异盒子模型的区别？答案：盒子模型分为标准W3C盒子和IE怪异盒子，核心区别是width、height的计算范围不同，由box-sizing属性控制。（1）标准盒子（box-sizing:content-box，默认值）width、height仅对应内容区（content）宽度高度。元素实际宽度=width+padding+border+margin布局时设置的宽高会被内边距、边框撑大，容易导致布局错乱。（2）怪异盒子（box-sizing:border-box）width、height包含内容区、内边距、边框。元素实际宽度=width+margin设置宽高后，padding和border不会撑大盒子，是目前项目开发的通用写法，布局更稳定。2.margin塌陷是什么？如何解决？答案：margin塌陷也叫外边距合并，是块级元素垂直方向的常见布局问题，水平方向不会塌陷。主要分为两种场景：1.相邻兄弟塌陷：两个上下相邻的块级元素，分别设置上下margin，最终间距会取两者最大值，而非相加。2.父子嵌套塌陷：父元素没有边框、内边距、行内内容时，子元素的上边距会塌陷到父元素上，导致父元素整体下移。解决方案：1.父子塌陷：给父元素设置border、padding、overflow:hidden、display:inline-block；2.兄弟塌陷：统一只设置单个方向margin，或使用padding替代margin做间距。3.行内元素、块级元素、行内块元素的区别？答案：三者通过display属性区分，布局特性差异极大：1.块级元素（display:block）独占一行，默认宽度100%父级宽度；支持width、height、margin、padding；常见标签：div、p、h1-h6、ul、li。2.行内元素（display:inline）同行显示，不独占一行；宽高由内容撑开，不支持width、height；上下margin、padding无效，左右有效；常见标签：span、a、em、i。3.行内块元素（display:inline-block）兼具两者优点：同行显示，不独占一行；同时支持宽高、内外边距；常用于按钮、图标、小卡片布局。三、CSS布局高频面试题1.常见的CSS布局方式有哪些？答案：1.标准文档流布局：默认布局，块级纵向排列、行内横向排列，是所有布局的基础。2.浮动布局（float）：早期主流布局，让元素脱离标准流横向排列，适合简单多列布局；缺点是会产生高度塌陷，需要清除浮动。3.定位布局（position）：通过相对、绝对、固定定位实现元素精准定位，适合悬浮层、弹窗、固定导航、图标定位等场景。4.Flex弹性布局：现代主流一维布局，简单高效，适配移动端，完美解决居中、等分、自适应布局问题，基本替代浮动布局。5.Grid网格布局：二维布局系统，同时控制行和列，适合整页栅格布局、复杂卡片排布，是目前最强大的CSS布局方案。2.浮动塌陷的原因及清除浮动的方法？答案：塌陷原因：父元素未设置高度，子元素全部设置浮动后脱离标准文档流，父元素无法包裹浮动子元素，高度变为0，造成布局塌陷、后续元素上浮错乱。常用清除浮动方法：1.额外标签法：父元素末尾添加空块级标签，设置clear:both；简单但冗余代码多，不推荐。2.overflow:hidden：给父元素设置overflow:hidden；代码简洁，项目常用，缺点是溢出内容会被隐藏。3.伪元素清除法（推荐）：给父元素添加clearfix类，通过::after伪元素清除浮动，无冗余、不影响布局，企业项目通用方案。核心代码：css

.clearfix::after{

content:'';

display:block;

clear:both;

visibility:hidden;

height:0;

}3.position定位属性有哪些？各自特点？答案：position五个常用值：static、relative、absolute、fixed、sticky1.static（默认）：标准文档流定位，无偏移，top/left等属性无效。2.relative（相对定位）：相对于自身默认位置偏移；不脱离文档流，原位置保留，常用于给绝对定位父元素做定位参照。3.absolute（绝对定位）：相对于最近的已定位父级偏移；脱离文档流，原位置不保留，无定位父级则相对于浏览器窗口。4.fixed（固定定位）：始终相对于浏览器视口定位；脱离文档流，页面滚动时元素固定不动，常用于顶部导航、返回顶部按钮。5.sticky（粘性定位）：相对定位+固定定位结合体；滚动页面时，元素在阈值内跟随滚动，超出阈值后固定悬浮，常用于列表吸顶、表格表头固定。4.Flex布局常用属性及居中方案？答案：Flex分为容器属性和项目属性，是移动端首选布局方案。容器常用属性：display:flex;//开启弹性布局flex-direction:row/column;//主轴方向justify-content:center;//主轴居中align-items:center;//侧轴居中flex-wrap:wrap;//自动换行项目常用属性：flex:1;//均分剩余空间align-self:center;//单个项目侧轴居中万能居中代码：css

.box{

display:flex;

justify-content:center;

align-items:center;

}四、CSS进阶高频题（面试加分项）1.伪类和伪元素的区别？答案：伪类（单冒号:）：用于选择元素的特殊状态，不生成新元素，只是给元素不同状态添加样式。常见：:hover、:active、:focus、:nth-child()、:link伪元素（双冒号::）：用于创建虚拟行内元素，页面不存在真实DOM节点，可以插入内容、修饰样式。常见：::before、::after、::first-line、::first-letter核心区别：伪类是改状态，伪元素是造元素；CSS3规范中伪元素统一双冒号，伪类保持单冒号。2.CSS层叠上下文是什么？z-index失效的原因？答案：层叠上下文是页面元素堆叠的层级环境，元素的z-index层级对比，只能在同一个层叠上下文内生效。创建层叠上下文的条件：1.定位元素（relative/absolute/fixed/sticky）2.flex、grid子项3.opacity小于1、transform、filter等属性z-index失效常见原因：1.元素未开启定位（static定位无效）2.父子属于不同层叠上下文，子元素z-index再高也无法超越父级层叠限制3.同级元素层叠优先级受渲染顺序影响3.什么是CSS预处理器？常用的有哪些？优势是什么？答案：CSS预处理器是一种扩展CSS语法的工具，让CSS拥有变量、嵌套、混合、继承、循环等编程特性，最终编译成原生CSS运行。常用预处理器：Sass/SCSS、Less、Stylus，项目中Sass使用率最高。核心优势：1.支持变量，统一管理主题色、字号、间距，方便全局换肤、改样式；2.支持嵌套语法，贴合HTML层级结构，代码可读性更高；3.支持混合、继承、循环，减少重复代码，提升复用性；4.方便模块化拆分样式文件，适配大型项目开发。4.响应式布局的实现方式？答案：响应式布局是一套代码适配电脑、平板、手机不同屏幕尺寸，核心实现方式：1.媒体查询@media：根据不同屏幕宽度设置不同样式，是响应式核心基础。2.百分比布局：宽高使用百分比替代固定像素，适配不同屏幕。3.rem/em布局：rem基于根字体大小，通过动态修改根字体实现整体缩放，适配移动端。4.vw/vh视口单位：vw基于屏幕宽度、vh基于屏幕高度，百分百适配视口，目前主流适配方案。5.Flex/Grid自适应布局：依靠弹性、网格的自适应特性，自动适配屏幕宽度。五、CSS常见bug及兼容问题（实操面试题）1.图片下方留白问题原因及解决？答案：原因：img是行内块元素，默认遵循文本基线对齐，会预留基线间距，导致图片底部出现几像素留白。解决方法：1.设置img{display:block;}（最常用，彻底解决）2.设置img{vertical-align:top/middle;}3.给父元素设置font-size:0;2.行内块元素之间出现空白缝隙的原因及解决？答案：原因：行内块元素换行书写时，浏览器会解析换行符、空格为空白节点，产生缝隙。解决方法：1.父元素设置font-size:0;