CSS基础期末考试试题（含详细答案）

CSS基础期末考试试题（含详细答案）考试时长：60分钟满分：100分适用对象：前端入门学习者、网页制作初学者考试说明：试题涵盖CSS基础选择器、样式属性、盒模型、浮动、定位、布局基础等核心知识点，题型全面，侧重基础理论与实际应用。一、单项选择题（共15题，每题3分，共45分）1.在HTML中，引入CSS样式的方式不包括以下哪种？（）A.行内样式  B.内部样式  C.全局样式  D.外部样式2.CSS代码的注释符号是以下哪一项？（）A.//注释  B./*注释*/  C.<!--注释-->  D.#注释3.下列选择器中，优先级最高的是（）A.类选择器  B.标签选择器  C.ID选择器  D.通配符选择器4.设置字体颜色的正确CSS属性是（）A.font-color  B.text-color  C.color  D.font-style5.能够让文本水平居中的属性值是（）A.text-align:center  B.vertical-align:center  C.align:center  D.float:center6.CSS盒模型的核心组成部分不包括（）A.内容区(content)  B.阴影(shadow)  C.内边距(padding)  D.外边距(margin)7.想要清除浮动带来的布局塌陷问题，下列方式错误的是（）A.给父元素设置overflow:hidden  B.给子元素设置float:noneC.伪元素清除浮动  D.父元素设置高度8.下列属于块级元素的是（）A.span  B.a  C.div  D.em9.设置元素圆角的CSS属性是（）A.border-radius  B.border-circle  C.radius  D.border-round10.position属性中，固定定位的取值是（）A.relative  B.absolute  C.fixed  D.static11.想要让元素隐藏但保留原有占位空间，正确的属性设置是（）A.display:none  B.visibility:hidden  C.opacity:0  D.overflow:hidden12.CSS中，设置字体加粗的属性值是（）A.font-style:bold  B.font-weight:bold  C.font-size:bold  D.text-weight:bold13.通配符选择器的写法是（）A.#  B..  C.*  D.@14.下列关于margin和padding说法正确的是（）A.margin是内边距，padding是外边距  B.margin是外边距，padding是内边距C.两者都是内边距  D.两者都是外边距15.flex布局中，实现子元素水平居中的属性是（）A.justify-content:center  B.align-items:center  C.flex:center  D.text-align:center二、填空题（共5题，每题2分，共10分）1.CSS的全称是________________________。2.类选择器以________开头，ID选择器以________开头。3.标准盒模型中，元素的实际宽度=内容宽度+________+________+左右margin。4.浮动布局的属性是________，常用取值有left、right、none。5.position相对定位的属性值是________，其定位参考对象是________自身。三、简答题（共3题，每题7分，共21分）1.简述CSS三种样式引入方式的优缺点。2.简述块级元素和行内元素的核心区别，并各列举3个常用标签。3.简述绝对定位（absolute）和相对定位（relative）的区别。四、代码实操题（共2题，每题12分，共24分）1.基础样式编写请编写完整CSS样式，实现以下效果：设置一个div盒子：宽度300px，高度200px，背景色为浅蓝色，黑色1px实线边框，10px圆角，水平居中，内部文字居中、字体大小16px、字体加粗。2.浮动布局实操编写HTML+CSS代码，实现两列并排布局：左侧盒子宽200px、高300px、红色背景；右侧盒子宽400px、高300px、蓝色背景，两盒子左右并排，清除浮动布局塌陷。参考答案及详细解析一、单项选择题答案及解析1.答案：C解析：CSS样式引入方式分为三种：行内样式、内部样式（嵌入式）、外部样式（链接式），无全局样式的官方分类。2.答案：B解析：CSS单行、多行注释统一使用/*注释内容*/；//是JS注释，<!---->是HTML注释。3.答案：C解析：选择器优先级从高到低：ID选择器>类选择器>标签选择器>通配符选择器。4.答案：C解析：CSS使用color属性设置文字颜色，无font-color、text-color属性；font-style用于设置字体样式（斜体）。5.答案：A解析：text-align:center实现文本水平居中；vertical-align用于垂直对齐，无float:center写法。6.答案：B解析：标准CSS盒模型由内容区、内边距、边框、外边距四部分组成，阴影属于额外美化属性，不属于盒模型核心结构。7.答案：B解析：浮动塌陷是父元素高度自适应为0导致，子元素取消浮动无法修复已产生的塌陷；常用解决方式：父级overflow:hidden、伪元素清除浮动、固定父元素高度。8.答案：C解析：div是典型块级元素；span、a、em均为行内元素。9.答案：A解析：border-radius是CSS标准圆角属性，其余为非法属性名。10.答案：C解析：fixed为固定定位，相对于浏览器窗口定位；relative相对定位、absolute绝对定位、static默认静态定位。11.答案：B解析：visibility:hidden隐藏元素，保留占位空间；display:none彻底隐藏，不占空间；opacity:0透明隐藏，可点击。12.答案：B解析：font-weight用于设置字体粗细，bold为加粗；font-style设置斜体。13.答案：C解析：*为通配符选择器，匹配页面所有元素；.是类选择器，#是ID选择器。14.答案：B解析：margin（外边距）：元素与其他元素之间的距离；padding（内边距）：元素内容与边框之间的距离。15.答案：A解析：flex布局中，justify-content:center实现子元素水平居中；align-items:center实现垂直居中。二、填空题答案1.CascadingStyleSheets（层叠样式表）2..（点）；#（井号）3.左右padding；左右border4.float5.relative；元素原本位置三、简答题详细答案1.CSS三种样式引入方式优缺点（1）行内样式：直接在HTML标签内通过style属性写样式。优点：优先级最高、修改便捷、针对性强；缺点：代码冗余、结构与样式混杂、不利于后期维护、复用性差。（2）内部样式：在HTML页面head标签中通过style标签书写样式。优点：样式与结构初步分离、单页面样式统一、无外部文件依赖；缺点：仅对当前页面生效、多页面无法复用、大型项目代码冗余。（3）外部样式：单独创建.css文件，通过link标签引入页面。优点：样式与结构完全分离、多页面可复用、代码简洁、便于维护优化；缺点：需要额外引入文件、初次加载有轻微请求延迟。2.块级元素与行内元素核心区别及常用标签核心区别：①块级元素独占一行，行内元素不独占一行，可同行排列；②块级元素可设置宽高、内外边距，行内元素宽高无效，仅水平内外边距生效；③块级元素可嵌套行内元素和部分块级元素，行内元素一般只能嵌套文本或行内元素。常用标签：块级：div、p、h1~h6、ul、li；行内：span、a、em、i、strong。3.绝对定位与相对定位的区别①定位参考不同：相对定位（relative）相对于元素自身默认位置定位；绝对定位（absolute）相对于最近的已定位父级元素，若无已定位父级，则相对于浏览器窗口定位。②文档流影响不同：相对定位不脱离标准文档流，保留原有占位空间；绝对定位脱离标准文档流，不保留原有占位，会覆盖普通文档流元素。③使用场景不同：相对定位多用于微调元素位置、作为绝对定位父级容器；绝对定位多用于悬浮弹窗、图标定位、特殊布局排版。四、代码实操题参考答案1.基础样式代码PlainText

<style>

.box{

width:300px;

height:200px;

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

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

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

margin:0auto;/*水平居中*/

text-align:center;/*文字水平居中*/

line-height:200px;/*文字垂直居中*/

font-size:16px;

font-weight:bold;

}

</style>

<divclass="box">测试文本</div>2.两列浮动布局代码（含清浮动）PlainText

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>浮动两列布局</title>

<style>

/*清浮动公共类*/

.clearfix::after{

content:"";

display:block;

clear:both;

}

.left{

width:200px;

height:300px;

background-color:red;

float:left;

}

.right{

width:400px;

height:300px;

bac