CSS 前端面试题及详细答案（初级-中级）

CSS前端面试题及详细答案（初级-中级）适用人群：前端初级、中级面试/实习生面试/基础技能自测题库说明：题目贴合企业真实面试高频考点，覆盖选择、判断、简答、布局实操，答案侧重原理说明和实战细节，无冗余话术，适配面试答题场景。一、单项选择题（每题3分，共30分）1、以下不属于CSS选择器权重优先级的是（）A、行内样式B、类选择器C、标签选择器D、浏览器默认样式答案：D详细解析：CSS权重优先级从高到低排序：!important>行内样式>ID选择器>类、伪类、属性选择器>标签、伪元素选择器>通配符>继承样式>浏览器默认样式。浏览器默认样式无权重优先级，是页面最基础的默认样式。2、CSS中position属性的默认值是（）A、relativeB、absoluteC、staticD、fixed答案：C详细解析：static是所有元素定位的默认值，代表常规文档流定位，设置top、left、right、bottom、z-index属性均无效。relative相对自身默认位置定位，absolute脱离文档流相对父级定位元素定位，fixed脱离文档流相对浏览器视口定位。3、以下哪个属性可以实现元素水平居中（块级元素）（）A、text-align:centerB、margin:0autoC、float:centerD、padding:0auto答案：B详细解析：margin:0auto适用于设置固定宽度的块级元素水平居中；text-align:center仅用于行内、行内块元素居中，无法让块级元素本身居中；float无center取值，padding不支持auto取值。4、CSS3中flex布局的默认主轴方向是（）A、columnB、rowC、row-reverseD、column-reverse答案：B详细解析：flex-direction默认值为row，主轴水平从左到右，侧轴垂直从上到下。column为垂直主轴，多用于纵向列表布局。5、清除浮动最推荐、最稳定的方式是（）A、给父元素设置heightB、clear:both伪类清除浮动C、overflow:hiddenD、br标签清除答案：B详细解析：伪类清除浮动（:after）是企业开发主流方案，无副作用、不遮挡元素、不限制父元素高度。overflow:hidden会隐藏溢出元素，有功能局限性；固定高度适配性差，无法适配动态内容；br标签属于冗余结构，不推荐使用。6、z-index属性生效的必要条件是（）A、元素设置宽度高度B、元素脱离文档流或设置相对定位C、元素为行内元素D、元素设置浮动答案：B详细解析：z-index仅对设置了relative、absolute、fixed、sticky定位的元素生效，普通文档流中的static定位元素，z-index无效。7、以下哪个选择器权重最高（）A、.box.listB、#nav.itemC、div.boxD、.box答案：B详细解析：ID选择器权重远高于类选择器和标签选择器。#nav.item包含ID选择器，权重最高，其余选项仅为类、标签组合，权重更低。8、CSS中line-height设置为1.5和150%的区别是（）A、无区别B、1.5继承比例，150%继承计算值C、150%继承比例，1.5继承计算值D、兼容性不同答案：B详细解析：纯数字1.5为倍数继承，子元素会根据自身字体大小重新计算行高；150%为百分比值，会先根据父元素字体大小计算出固定行高，子元素直接继承固定数值，容易导致子元素行高错乱。9、opacity:0和visibility:hidden的核心区别是（）A、无区别B、opacity占位，visibility不占位C、opacity不占位，visibility占位D、兼容性差异答案：C详细解析：opacity:0元素完全透明，保留页面占位，可触发点击、鼠标事件；visibility:hidden元素隐藏，保留占位（纠正：二者均占位，核心区别为事件触发），修正核心考点：opacity透明但可交互，visibility隐藏且无法交互；display:none才是彻底不占位、无交互。10、CSS3border-radius设置50%实现圆形的前提是（）A、元素为行内元素B、元素宽高相等C、元素设置浮动D、元素开启flex布局答案：B详细解析：border-radius:50%是基于元素宽高的百分比圆角，只有宽高数值完全相等时，才能生成标准圆形；宽高不等时，会生成椭圆形。二、判断题（每题2分，共20分）1、CSS中!important优先级最高，可以无限制使用。（）答案：错误解析：!important优先级最高，但开发中禁止滥用，会打乱样式权重规则，导致后期样式覆盖、调试困难，仅紧急覆盖第三方样式时少量使用。2、flex布局中，子元素默认不会超出父容器。（）答案：错误解析：flex子元素默认flex-shrink:1，会自动收缩；但子元素内容过长、设置固定宽度时，仍会溢出父容器，需配合overflow处理。3、text-align:center可以让图片、按钮等行内块元素居中。（）答案：正确解析：text-align作用于父元素，可控制子代行内元素、行内块元素水平居中，图片、input、button均为行内块特性元素。4、绝对定位元素会脱离标准文档流，不占据页面空间。（）答案：正确解析：absolute、fixed定位元素彻底脱离文档流，不占用常规页面布局空间，下方元素会向上占位。relative定位不脱离文档流，保留原有空间。5、margin可以叠加，padding不会叠加。（）答案：正确解析：垂直方向相邻块级元素margin会发生合并叠加，取最大值；padding属于元素内部间距，无叠加规则。水平margin不会叠加。6、CSS样式中，id选择器可以重复使用。（）答案：错误解析：HTML规范中id为唯一标识，页面不允许重复id，CSS虽能匹配重复id，但不符合规范，坚决禁止使用。7、flex:1可以让子元素平分父元素剩余空间。（）答案：正确解析：flex:1是简写属性，等价于flex-grow:1、flex-shrink:1、flex-basis:0，多个子元素设置flex:1时，会均等瓜分父容器剩余空间，是自适应布局常用写法。8、overflow:hidden只能隐藏溢出内容，不能清除浮动。（）答案：错误解析：overflow:hidden可以触发BFC块级格式化上下文，实现清除浮动、解决margin塌陷问题，但会隐藏溢出元素，存在使用局限。9、行内元素可以设置宽高和上下margin、padding。（）答案：错误解析：纯行内元素（span、a）无法设置宽高，上下margin、padding不生效，仅左右内外边距生效；需转为行内块或块级元素才可设置宽高。10、CSS3过渡transition需要触发事件才会生效。（）答案：正确解析：transition是状态过渡动画，默认无动画效果，需要通过hover、点击、JS改变属性值触发状态变化，才能实现平滑过渡。三、简答题（每题10分，共30分）1、简述CSS盒子模型的组成，以及标准盒模型和怪异盒模型的区别？详细答案：（1）盒子模型组成：所有块级元素由四部分构成，从内到外依次为内容区content、内边距padding、边框border、外边距margin。（2）标准盒模型（box-sizing:content-box）：元素整体宽度=内容宽度+padding+border，设置的width仅代表内容区宽度，内边距和边框会撑大元素整体尺寸，是浏览器默认盒模型。（3）怪异盒模型（box-sizing:border-box）：元素整体宽度=设置的width，padding和border会向内压缩内容区，不会撑大盒子整体尺寸，开发中最常用，适配自适应布局。2、什么是BFC？BFC的作用有哪些？详细答案：BFC即块级格式化上下文，是浏览器的独立渲染区域，内部元素的布局、浮动不会影响外部元素，外部样式也不会干扰内部。常用触发条件：元素设置overflow不为visible、开启flex/grid布局、设置绝对定位、display:inline-block等。核心作用：①清除浮动，解决父元素高度塌陷；②解决垂直方向margin合并塌陷问题；③实现左右自适应两栏布局，阻止元素被浮动元素覆盖。3、简述flex布局常用核心属性及作用？详细答案：Flex布局分为父容器属性和子元素属性，是移动端、自适应布局主流方案：1、父容器常用属性：-display:flex：开启弹性布局；-flex-direction：设置主轴方向（横向/纵向）；-justify-content：主轴对齐方式（居中、两端对齐、均分等）；-align-items：侧轴单行对齐方式；-flex-wrap：设置子元素是否自动换行。2、子元素常用属性：-flex-grow：元素放大比例，默认0不放大；-flex-shrink：元素缩小比例，默认1自动缩小；-flex-basis：元素基础宽度；-align-self：单独设置单个子元素的侧轴对齐方式。四、实操编程题（20分）题目：使用纯CSS实现一个宽高200px的圆形盒子，水平垂直居中在页面中，灰色背景、鼠标悬浮变色、带平滑过渡效果。详细参考答案代码：css

/*页面全局居中布局*/

body{

margin:0;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

background-color:#fff;

}

/*圆形盒子样式*/

.circle{

width:200px;

height:200px;

background-color:#ccc;

border-radius:50%;

/*开启0.3秒平滑过渡*/

transition:background-color0.3sease;

}

/*悬浮变色效果*/

.circle:hover{

background-color:#40