CSS基础测试题（含详细答案解析）

CSS基础测试题（含详细答案解析）适用人群：前端初学者、基础岗位面试、日常技能考核考试时长：60分钟满分：100分一、单项选择题（共15题，每题3分，共45分）1.以下不属于CSS引入方式的是？（）A.行内样式B.内部样式C.外部样式D.嵌套样式2.CSS中，以下选择器优先级最高的是？（）A.类选择器B.ID选择器C.标签选择器D.通配符选择器3.设置元素字体加粗的正确属性是？（）A.font-styleB.font-weightC.text-weightD.font-bold4.以下哪个属性可以清除浮动？（）A.floatB.clearC.overflowD.position5.CSS盒子模型中，从内到外的正确顺序是？（）A.内容、内边距、边框、外边距B.内容、边框、内边距、外边距C.内边距、内容、边框、外边距D.内容、内边距、外边距、边框6.想要让元素隐藏但保留占位空间，应使用以下哪种设置？（）A.display:noneB.visibility:hiddenC.opacity:0D.overflow:hidden7.position属性中，相对定位的取值是？（）A.staticB.relativeC.absoluteD.fixed8.以下哪个属性可以实现文本水平居中？（）A.vertical-align:middleB.text-align:centerC.margin:0autoD.float:center9.CSS3中，实现元素圆角效果的属性是？（）A.border-shadowB.border-radiusC.border-styleD.border-circle10.弹性布局中，设置主轴对齐方式的属性是？（）A.align-itemsB.justify-contentC.flex-directionD.flex-wrap11.以下哪个单位是相对于父元素字体大小的？（）A.pxB.emC.remD.vw12.超链接未访问时的伪类选择器是？（）A.:hoverB.:activeC.:linkD.:visited13.想要让块级元素水平居中，正确的写法是？（）A.text-align:centerB.margin:0autoC.float:middleD.position:center14.overflow:hidden;无法实现的效果是？（）A.隐藏溢出内容B.清除浮动C.隐藏元素占位D.裁剪超出区域内容15.CSS3过渡效果的核心属性是？（）A.transformB.transitionC.animationD.translate二、填空题（共5题，每题3分，共15分）1.CSS的全称是________________________。2.盒子模型中，内边距属性是________，外边距属性是________。3.弹性布局开启属性是________。4.rem单位是相对于________的字体大小。5.定位属性中，固定定位的取值是________，绝对定位的取值是________。三、简答题（共3题，每题8分，共24分）1.简述CSS三种引入方式的优缺点及使用场景。2.简述浮动的作用、副作用，以及三种常用的清除浮动方法。3.说说position中static、relative、absolute、fixed四种定位的区别。四、实操应用题（共1题，16分）请写出完整CSS代码，实现以下效果：1.创建一个宽300px、高200px的盒子；2.盒子背景色为浅蓝色，黑色1px实线边框，10px圆角；3.盒子内文字水平、垂直居中，字体大小16px、加粗、灰色；4.鼠标悬浮盒子时，背景色变为深蓝色，添加0.3秒平滑过渡效果。详细答案解析一、单项选择题答案及解析1.D解析：CSS标准引入方式分为行内样式、内部样式（内嵌样式）、外部样式三种，无嵌套样式这一官方分类，嵌套属于预处理器（Sass/Less）的写法。2.B解析：选择器优先级排序：ID选择器>类选择器>标签选择器>通配符选择器，优先级越高，样式权重越大，越优先生效。3.B解析：font-weight用于设置字体粗细，常用值：normal（常规）、bold（加粗）；font-style用于设置字体倾斜，无text-weight、font-bold属性。4.B解析：clear属性专门用于清除浮动带来的布局影响；overflow可间接清除浮动，但并非专用属性，float是设置浮动，position是设置定位。5.A解析：标准CSS盒子模型层级从内到外：内容区（content）→内边距（padding）→边框（border）→外边距（margin）。6.B解析：visibility:hidden隐藏元素内容，但保留元素原有占位空间；display:none彻底隐藏且不占位；opacity:0透明但可点击、占位。7.B解析：relative为相对定位，相对于自身默认位置偏移；static是默认定位，无偏移；absolute绝对定位；fixed固定定位。8.B解析：text-align:center用于设置行内内容（文字、图片、行内元素）水平居中；margin:0auto用于块级元素整体居中。9.B解析：border-radius是CSS3圆角专属属性；border-shadow为阴影属性，无border-circle属性。10.B解析：justify-content控制弹性盒子主轴元素对齐方式；align-items控制侧轴对齐方式；flex-direction设置主轴方向，flex-wrap设置是否换行。11.B解析：em相对于父元素字体大小；rem相对于根元素html字体大小；px是固定像素，vw相对于视口宽度。12.C解析：:link未访问链接；:visited已访问链接；:hover鼠标悬浮；:active鼠标点击激活。13.B解析：块级元素水平居中需设置margin:0auto；text-align:center仅居中内部文字，无法居中块级元素本身。14.C解析：overflow:hidden可隐藏溢出内容、清除浮动、裁剪溢出区域，元素本身占位空间不会消失，无法实现隐藏占位的效果。15.B解析：transition是过渡属性，实现简单的状态平滑切换；animation是关键帧动画，transform是变形属性，translate是位移函数。二、填空题答案及解析1.CascadingStyleSheets（层叠样式表）2.padding、margin3.display:flex解析：给父元素设置display:flex，即可开启弹性布局，控制子元素排列。4.html根元素5.fixed、absolute三、简答题答案解析1.CSS三种引入方式优缺点及使用场景（1）行内样式：直接在标签style属性中写样式优点：优先级最高、上手简单、修改针对性强；缺点：代码冗余、结构样式混杂、不利于维护、无复用性。场景：临时修改单个元素样式、快速调试测试。（2）内部样式：在html页面style标签中编写样式优点：样式和结构初步分离、无额外请求、编写便捷；缺点：仅当前页面生效，无法多页面复用，页面复杂后代码臃肿。场景：单页面简单项目、页面专属特殊样式、demo测试页面。（3）外部样式：单独创建.css文件，通过link引入页面优点：样式结构完全分离、代码可多页面复用、便于统一维护、优化页面加载；缺点：需要额外文件，少量样式时略显繁琐。场景：正式项目、多页面网站、企业级开发（主流使用方式）。2.浮动的作用、副作用及清除浮动方法（1）作用：让块级元素脱离标准文档流，实现元素横向排列（多列布局、图文环绕）。（2）副作用：子元素设置浮动后，父元素无法识别子元素高度，导致父元素高度塌陷；后续标准流元素会向上错位，布局混乱。（3）常用清除浮动方法：①伪类清除法（推荐）：给父元素添加clearfix伪类，兼容性好、无冗余代码，项目最常用；②overflow清除法：给父元素设置overflow:hidden，简单便捷，适合简单布局；③空标签清除法：在浮动子元素末尾添加空div，设置clear:both，原理简单但会增加冗余标签，不推荐大规模使用。3.四种定位方式的区别（1）static（默认定位）：标准文档流默认状态，无偏移、无层级，top/left等偏移属性无效；（2）relative（相对定位）：相对于自身默认位置偏移，不脱离标准流，保留原有占位，常用于微调元素位置、作为绝对定位父级容器；（3）absolute（绝对定位）：相对于最近的已定位父级元素偏移，无已定位父级则相对于浏览器窗口，完全脱离标准流，不保留占位；（4）fixed（固定定位）：相对于浏览器视口固定，脱离标准流，不随页面滚动而移动，常用于悬浮按钮、顶部导航、底部弹窗。四、实操应用题参考答案css

/*盒子样式*/

.box{

width:300px;

height:200px;

background-color:#def3ff;/*浅蓝色背景*/

border:1pxsolid#000;/*黑色实线边框*/

border-radius:10px;/*圆角*/

font-size:16px;

font-weight:bold;

color:#666;/*灰色文字*/

/*文字水平垂直居中*/

display:flex;

justify-content:center;

align-items:center;

/*过渡效果*/

transition:all0.3sease;

}

/*鼠标悬浮样式*/

.bo