Web CSS 期末-笔试真题（含详细答案解析）

WebCSS期末/笔试真题（含详细答案解析）适用场景：前端基础考核、期末测试、企业入门笔试试卷总分：100分考试时长：60分钟说明：试题无偏题怪题，聚焦CSS核心基础、布局、样式、兼容性高频考点，答案解析通俗易懂，适合自测和阅卷使用。一、单项选择题（共15题，每题2分，共30分）1.以下哪个不是CSS的基本选择器？（）A.标签选择器B.类选择器C.后代选择器D.ID选择器2.CSS中，设置字体加粗的正确属性是（）A.font-styleB.font-weightC.text-boldD.font-size3.下列CSS单位中，属于相对单位的是（）A.pxB.cmC.remD.mm4.CSS中，设置元素背景颜色的属性是（）A.colorB.bg-colorC.background-colorD.background5.给元素设置圆角效果的属性是（）A.border-radiusB.border-roundC.radiusD.corner6.以下哪个属性可以清除浮动？（）A.floatB.clearC.overflowD.display7.CSS中，z-index属性的作用是（）A.设置元素宽度B.控制元素层级堆叠顺序C.设置透明度D.控制定位方式8.下列哪个值不是display属性的合法值？（）A.blockB.inlineC.centerD.flex9.text-align:center的作用是（）A.让元素自身居中B.让元素内部文本居中C.让块级元素水平居中D.让元素垂直居中10.position:absolute定位的参照物是（）A.浏览器窗口B.父级元素C.最近的已定位祖先元素D.屏幕11.CSS中，设置元素透明度的属性是（）A.opacityB.transparentC.filterD.visibility12.盒子模型中，元素实际宽度的计算公式是（）A.width+paddingB.width+border+paddingC.widthD.width+margin13.想要让盒子的padding、border不撑大盒子尺寸，需要设置（）A.box-sizing:border-boxB.box-sizing:content-boxC.resize:noneD.overflow:hidden14.flex布局中，justify-content属性控制的是（）A.交叉轴对齐方式B.主轴对齐方式C.元素换行方式D.元素排列方向15.以下选择器优先级最高的是（）A.类选择器B.ID选择器C.标签选择器D.通配符选择器二、填空题（共10空，每空2分，共20分）1.CSS的全称是________________________。2.CSS引入的三种方式：行内样式、__________、__________。3.盒子模型的四大组成部分：内容、__________、__________、外边距。4.position的四个常用属性值：static、relative、__________、__________。5.文本溢出显示省略号，需要搭配overflow:hidden、__________、__________三个属性使用。6.flex布局中，设置元素垂直居中的交叉轴属性是________________。7.清除浮动最常用、兼容性最好的写法是给父元素设置________________。三、简答题（共4题，每题5分，共20分）1.简述行内元素、块级元素、行内块元素的区别。2.说说标准盒子模型和IE怪异盒子模型的区别。3.简述relative和absolute定位的区别。4.什么是浮动？浮动会产生什么问题？常用的清除浮动方法有哪些？四、代码实操题（共3题，共30分）1.基础样式编写（10分）编写CSS样式，实现一个div盒子效果：宽度300px，高度200px，背景色浅蓝色，黑色1px实线边框，10px圆角，水平居中，内部文字居中、字体大小16px、加粗。2.单行文本省略效果（10分）写出完整CSS代码，实现单行文本超出容器自动隐藏，显示省略号的效果。3.Flex居中布局（10分）利用flex布局，实现父盒子内部子元素水平、垂直双向居中，写出核心CSS代码。完整答案及详细解析一、单项选择题答案与解析1.答案：C解析：CSS基础选择器包含标签、类、ID、通配符选择器；后代选择器属于复合选择器，不属于基础选择器。2.答案：B解析：font-weight控制字体粗细（bold加粗、normal常规）；font-style控制字体倾斜，无text-bold属性。3.答案：C解析：rem是相对于根字体大小的相对单位；px、cm、mm均为绝对单位。4.答案：C解析：background-color专门设置背景色；background是复合属性，可简写背景所有样式，color是文字颜色。5.答案：A解析：border-radius是CSS标准圆角属性，无border-round、corner等属性。6.答案：B解析：clear属性专门用于清除浮动带来的布局影响；overflow:hidden可间接清除浮动，但clear是专属属性。7.答案：B解析：z-index仅作用于已定位元素，用于控制元素上下堆叠层级，数值越大层级越高。8.答案：C解析：display常用值：block、inline、inline-block、flex、none等，无center值。9.答案：B解析：text-align是文本对齐属性，只控制元素内部文字、行内元素居中，无法让块级元素自身居中。10.答案：C解析：absolute绝对定位脱离标准文档流，参照物是最近设置过定位（relative/absolute/fixed）的祖先元素，无则参照浏览器窗口。11.答案：A解析：opacity控制元素整体透明度（0-1）；transparent是透明色值，visibility控制元素显示隐藏（保留占位）。12.答案：B解析：默认标准盒子模型，元素实际占用宽度=width（内容宽）+padding（内边距）+border（边框），margin不占用自身尺寸，属于外部间距。13.答案：A解析：box-sizing:border-box怪异盒模型，padding和border会内嵌到设置的width/height中，不会撑大盒子；content-box是默认标准盒模型。14.答案：B解析：justify-content：主轴对齐；align-items：交叉轴对齐。15.答案：B解析：选择器优先级排序：ID选择器>类选择器>标签选择器>通配符选择器。二、填空题答案1.CascadingStyleSheets（层叠样式表）2.内部样式、外部样式3.内边距（padding）、边框（border）4.absolute、fixed5.white-space:nowrap、text-overflow:ellipsis6.align-items7.overflow:hidden三、简答题标准答案1.行内、块级、行内块元素区别①块级元素：独占一行，可设置宽高、内外边距，默认宽度100%，常见div、p、h1；②行内元素：不独占一行，并排显示，无法设置宽高、上下边距，宽高由内容决定，常见span、a、em；③行内块元素：兼具两者特点，不独占一行、可并排，同时可以设置宽高和内外边距，常见img、input。2.标准盒模型与怪异盒模型区别①标准盒模型（box-sizing:content-box）：width/height仅代表内容区域尺寸，元素实际尺寸=内容+内边距+边框；②怪异盒模型（box-sizing:border-box）：width/height是盒子整体尺寸，内边距、边框会向内压缩内容区域，不会撑大盒子整体大小，开发中更常用。3.relative和absolute定位区别①relative（相对定位）：相对于自身默认位置偏移，不脱离标准文档流，原有位置保留，不会影响周边布局；②absolute（绝对定位）：相对于最近已定位祖先元素偏移，完全脱离文档流，不保留原有占位，会覆盖下方元素。4.浮动原理、问题及清浮方法浮动是让元素脱离标准文档流，向左/向右并排排列的布局方式，早期用于页面并排布局。产生的问题：父元素高度塌陷、后续标准流元素布局错乱、文字环绕异常。常用清浮方法：①父元素设置overflow:hidden；②结尾加空div设置clear:both；③伪元素清浮（最推荐，无冗余标签）。四、代码实操题标准答案1.基础盒子样式PlainText

.box{

width:300px;

height:200px;

background-color:#def3ff;

border:1pxsolid#000;

border-radius:10px;

margin:0auto;/*块级元素水平居中*/

text-align:center;

font-size:16px;

font-weight:bold;

}2.单行文本省略代码PlainText

.text{

width:300px;/*必须设置固定宽度*/

white-space:nowrap;/*禁止文字换行*/

overflow:hidden;/*超出部分隐藏