2026年CSS3样式设计专项训练卷一

2026年CSS3样式设计专项训练卷一考试时间：______分钟总分：______分姓名：______一、选择题（每题2分，共30分）1.下列哪个不是CSS3的选择器？A.`div`B.`#id`C.`.class`D.`element:target`2.浏览器按照什么顺序解析CSS选择器，以确定最终应用的样式？A.从右到左B.从下到上C.从左到右D.随机顺序3.`box-sizing:border-box;`属性的作用是？A.将元素的padding和border包含在宽度和高度内B.将元素的padding和border排除在宽度和高度外C.增加元素的外边距D.减少元素的边框宽度4.元素脱离文档流，但其下方元素不顶替的定位方式是？A.`absolute`B.`fixed`C.`relative`D.`float`5.用于创建分布式或网格状布局的CSS3模型是？A.FlexboxB.GridC.FloatD.Position6.以下哪个属性用于改变元素的视觉顺序，但不改变其在文档流中的顺序？A.`display`B.`visibility`C.`order`D.`z-index`7.`flex-grow`属性的值是0时，表示？A.元素不能扩展B.元素总是占用最大空间C.元素宽度为0D.元素高度为08.CSS3中，实现元素沿一条轴移动的效果是？A.过渡(Transition)B.变换(Transform)C.动画(Animation)D.媒体查询(MediaQuery)9.`transform:translate(50px,20px);`表示？A.旋转50度B.沿X轴移动50px，沿Y轴移动20pxC.缩放1.5倍D.沿Y轴移动50px，沿X轴移动20px10.用于在媒体查询中根据不同屏幕尺寸应用不同样式的CSS属性是？A.`@media`B.`@font-face`C.`@import`D.`@keyframes`11.以下哪个媒体特性用于检测设备是否支持触摸屏？A.`color`B.`resolution`C.`orientation`D.`touch`12.`clear:both;`属性的主要作用是？A.清除元素的上边距B.清除元素的左边距C.清除浮动元素，允许其下方元素顶替D.清除元素的阴影13.为文字添加下划线，但不改变其颜色或字体，最合适的CSS伪类是？A.`:hover`B.`:focus`C.`:active`D.`:before`14.`rgba(0,0,255,0.5);`表示？A.红色B.绿色C.蓝色D.半透明的蓝色15.下列哪个CSS属性不属于CSS3新增的背景相关属性？A.`background-size`B.`background-origin`C.`background-clip`D.`background-position`二、填空题（每空2分，共20分）1.CSS选择器`p.text`表示选择`<p>`元素内部class属性为________的子元素。2.CSS盒模型中，元素的宽度和高度默认只包含________和内容区域。3.要使一个元素在水平方向上均匀分布在其父元素内，可以使用Flexbox的`justify-content:________`属性。4.CSS3中，使用________属性可以创建连续的动画效果。5.`flex:1;`的简写形式是`flex-grow:________`,`flex-shrink:1`,`flex-basis:auto`。6.要使一个元素在所有屏幕上都不显示，可以使用`display:________`属性。7.`z-index`属性只能用于定位属性为`absolute`,`fixed`或`relative`的元素。8.CSS3中使用________属性可以设置元素的外边框具有圆角效果。9.媒体查询的基本语法是以`@media________{...}`开头。10.`visibility:hidden;`与`display:none;`的区别在于前者元素仍然占据________，后者不占据。三、判断题（每题1分，共10分，请判断正误并在括号内打√或×）1.`float`属性可以用来实现多列布局。()2.`inline`元素的宽度和高度由其内容决定。()3.`box-sizing:content-box;`是CSS3的默认盒模型，此时元素的宽高只包含内容。()4.Flexbox布局中，父元素必须设置`display:flex;`或`display:inline-flex;`。()5.Grid布局中，每个子元素默认占据一行一列。()6.CSS动画必须使用`@keyframes`规则定义动画名称。()7.过渡效果（Transition）可以自动播放，而动画效果（Animation）需要触发条件才能播放。()8.`position:sticky;`可以使元素在滚动到特定位置时粘附到视口的顶部或底部。()9.`:nth-child(2n)`选择器表示选择每组的第二个子元素。()10.使用`visibility:hidden;`隐藏元素后，该元素仍然可以触发事件。()四、简答题（每题5分，共15分）1.简述CSS3中的BFC（块级格式化上下文）的构成条件及其至少一个作用。2.简要说明Flexbox布局和Grid布局的主要区别，以及各自适用于解决什么类型的问题。3.解释CSS选择器的优先级计算规则，并举例说明如何提高重要样式的优先级。五、实操题（共25分）请根据以下要求，编写相应的CSS代码片段（无需完整的HTML结构，只写出CSS部分即可）。1.（5分）为所有`<p>`标签设置内边距为15px，文字颜色为深灰色（#333），行高为1.5倍。2.（10分）为ID为`container`的元素，使用Flexbox布局：*设置其主轴为水平方向（从左到右）。*子元素之间保持10px的间隔。*第一个子元素（假设其class为`.item1`）占据更多可用空间（`flex-grow:2`）。3.（10分）为ID为`info-box`的元素（假设其形状为矩形），设置以下样式：*背景颜色为浅蓝色（#d9e8f5）。*边框为1pxsolid#a3c6e5。*底部边框和右上角边框为圆角（半径为5px）。4.（10分）为所有`a`标签设置基本链接样式，并添加鼠标悬停（`:hover`）效果：*链接文本颜色为蓝色（#0066cc）。*链接文本在悬停时变为红色（#cc0000），并带有下划线。试卷答案一、选择题1.A解析：`div`是一个元素选择器，是CSS的基础选择器。其他三个选项都是CSS3中常用的选择器。2.C解析：浏览器解析CSS选择器是从左到右的顺序。首先匹配最左边的选择器，然后匹配左边选择器之后的，以此类推，最终确定匹配元素。3.A解析：`box-sizing:border-box;`规则会使得元素的宽度和高度包含其内容、内边距（padding）和边框（border），而不是仅仅包含内容区域。4.D解析：`float`属性会让元素脱离文档流，但其下方元素会顶替其位置。`absolute`和`fixed`定位也会脱离文档流，但下方元素不顶替。`relative`定位不会脱离文档流。5.B解析：CSSGridLayout是一种二维布局系统，设计用来创建复杂的网页布局。Flexbox是一种一维布局模型。6.C解析：`order`属性可以改变Flexbox或Grid中元素的视觉顺序，但其在DOM中的顺序和占位不变。`z-index`用于控制堆叠上下文中的元素堆叠顺序，`display`改变元素显示类型，`visibility`控制元素可见性但不影响布局。7.A解析：`flex-grow`属性指定了元素在Flexbox容器中有多少空间是相对于其他元素而言的。值0表示该元素不会扩展以占用额外空间。8.B解析：`Transform`属性用于在二维或三维空间中旋转、缩放、移动或倾斜元素。`Transition`是指属性值的变化过程，`Animation`是指连续的、定义了关键帧的动画，`MediaQuery`是用于不同媒体条件下的样式应用。9.B解析：`translate(x,y)`函数用于沿着X轴和Y轴移动元素。`50px,20px`表示水平方向移动50像素，垂直方向移动20像素。10.A解析：`@media`是媒体查询的语法关键字，用于根据不同的媒体特性（如屏幕宽度、分辨率等）应用不同的CSS样式。11.D解析：`touch`是媒体特性关键字，用于检测设备是否支持触摸屏。`color`,`resolution`,`orientation`也是媒体特性，但分别用于检测颜色支持、分辨率和设备方向。12.C解析：`clear:both;`用于清除左右浮动，允许其下方元素顶替因浮动产生的空白区域。`clear:left;`或`clear:right;`分别清除左边或右边的浮动。13.D解析：`:before`和`:after`伪元素可以用来在元素内容之前或之后插入内容，并可以对其应用样式。使用`:before`伪元素添加下划线，然后将其颜色设置为透明，是实现仅下划线而不改变文字颜色的一种方法。虽然题目问的是最合适的，但基于选项，`:before`是一个有效的选择。*（注：此题选项设置可能不够理想，实际应用中`text-decoration:underline;`更直接，但若必须从选项选，`:before`是基于伪元素的知识点）*14.D解析：`rgba(r,g,b,a)`是RGBA颜色模式，其中r,g,b分别表示红绿蓝颜色分量（0-255），a表示透明度（0-1）。`0,0,255`对应蓝色，`0.5`表示50%的透明度。15.D解析：`background-position`是CSS2就已经存在的属性，用于设置背景图片的位置。其他三个都是CSS3新增的背景相关属性。二、填空题1.class解析：`p.text`选择器中，`p`是元素选择器，`.`是类选择器，组合起来表示选择`<p>`元素内部class属性为`text`的子元素。2.padding解析：在默认的CSS盒模型（content-box）下，元素的宽度和高度只包含内容（content）区域，不包括内边距（padding）、边框（border）和外边距（margin）。3.space-between解析：`justify-content:space-between;`属性会让容器中的子元素在主轴上均匀分布，第一个子元素靠近容器起始边，最后一个子元素靠近容器结束边。4.@keyframes解析：`@keyframes`规则用于定义动画序列，通过指定不同时间点的样式变化来创建动画效果。动画需要配合`animation`属性来应用和控制。5.1解析：`flex:1;`是`flex-grow:1`,`flex-shrink:1`,`flex-basis:auto`的简写形式。表示该元素可以扩展以填充剩余空间，也可以收缩以适应空间不足。6.none解析：`display:none;`属性会隐藏元素，使其不在页面布局中占据任何空间。`visibility:hidden;`则隐藏元素但保留空间。7.√解析：`z-index`属性确实只能应用于设置了`position`属性值为`absolute`,`relative`,`fixed`或`sticky`的元素。8.border-radius解析：`border-radius`属性用于设置元素边框的圆角程度。可以设置单个值（所有角相同），也可以设置两个或四个值（分别对应不同角）。9.media解析：媒体查询的基本语法是`@media`后跟媒体特性，例如`@mediascreenand(max-width:600px){...}`。10.空间(或位置/占位)解析：`visibility:hidden;`只改变元素的可见性，不改变其在文档流中的空间占用。`display:none;`则完全移除元素，不占据任何空间。三、判断题1.√解析：`float`属性可以使元素脱离文档流，并向左或向右漂浮，常用于实现文本环绕图像或多列布局。2.√解析：`display:inline;`的元素默认只占据内容所需的宽度，高度由内容决定，且不独占一行。3.√解析：`content-box`是CSS盒模型的默认值。在这种模型下，元素的宽度和高度只计算内容（content）的尺寸。4.√解析：要启用Flexbox布局，其父容器必须设置`display`属性值为`flex`或`inline-flex`。5.×解析：Grid布局中，每个子元素默认会占据一行一列，但可以通过`grid-column`和`grid-row`属性来指定子元素跨越的行列数。6.√解析：`@keyframes`规则必须定义一个动画名称，然后在该名称下指定不同关键帧的样式。7.√解析：过渡效果（Transition）通常由属性值的改变触发，并且可以配置为自动播放。动画效果（Animation）需要使用`@keyframes`定义序列，并通过`animation`属性的`animation-play-state`控制播放状态，通常需要特定事件触发。8.√解析：`position:sticky;`属性可以使元素在滚动到特定区域时粘附到视口的边缘（通常是顶部或底部），实现了介于`relative`和`fixed`之间的行为。9.√解析：`:nth-child(2n)`选择器选择其父元素的偶数个子元素（从0开始计数，即第2、4、6...个子元素）。10.√解析：`visibility`属性只控制元素的可见性，不控制其布局。即使元素被设置为`hidden`，它仍然存在于DOM中，并且可以接收和处理事件。四、简答题1.BFC（块级格式化上下文）的构成条件通常包括：*元素的类型是根元素（如`html`）。*元素的`display`属性值为`inline-block`,`flex`,`grid`,`table-caption`,`table-cell`,`table-header-group`,`table-footer-group`,`table-row-group`。*元素的`position`属性值为`absolute`或`fixed`。*元素的`float`属性值为`left`或`right`。*继承或显式设置的`transform`属性值不是`none`。*继承或显式设置的`perspective`属性值不是`none`。BFC至少一个作用是：*内部元素的布局不会受到外部元素（同一BFC内其他元素）的影响，也不会影响外部元素的布局。*可以防止浮动元素对非浮动元素的影响，即清除浮动。*有助于解决一些布局问题，如解决双飞翼布局和幽灵空白块等问题。2.Flexbox布局和Grid布局的主要区别及适用场景：*Flexbox布局是一维布局模型，主要沿着一条主轴（水平或垂直）或交叉轴排列子元素。适合用于需要灵活排列、对齐和分配空间的单一方向布局，如导航栏、侧边栏、卡片布局等。*Grid布局是二维布局模型，可以在行和列两个维度上同时布局元素。适合用于复杂的页面整体布局，如栅格系统、杂志风格布局、仪表盘等。*适用场景：Flexbox适用于组件内部或行/列内部的元素排列。Grid适用于页面的整体结构布局。两者可以结合使用，例如Grid布局作为整体框架，Flexbox布局用于框架内部的组件排列。3.CSS选择器优先级计算规则：*内联样式>ID选择器>类选择器（`class`,`attr`,`pseudo-class`）>元素选择器>通配符选择器（`*`）。*后代选择器、子代选择器、相邻兄弟选择器、属性选择器、伪元素选择器等的计算基于其复杂性和组合方式。具体计算方式较为复杂，涉及到选择器计数和特定选择器的权重。*继承的样式和默认浏览器样式优先级最低。*`!important`规则可以覆盖所有其他优先级，但应谨慎使用。提高重要样式的优先级方法：*使用更具体的选择器，例如将`.class`改为`#id.class`或`div#id.class`。*在CSS规则前使用`!important`（例如`style{color:red!important;}`），但要注意可能带来的维护困难。*将重要的样式放在CSS文件的最后，或者使用`!important`但仅用于最关键的样式。五、实操题1.```cssp{padding:15px;color:#333;line-height:1.5;}```2.```css#container{display:flex;justify-content:space