CSS基础重要试题及答案剖析

CSS基础重要试题及答案剖析考试时间：______分钟总分：______分姓名：______一、选择题（请选出唯一正确的答案）1.以下哪种方式引入CSS样式表中，不利于代码的维护和复用？A.内联样式B.嵌入式样式C.外部链接样式D.以上三种方式都利于维护和复用2.在CSS中，用于选择具有特定ID的HTML元素的选择器是？A..classB.#idC.elementD.*3.下列哪个CSS选择器具有最高的优先级？A.元素选择器(如p)B.类选择器(如.intro)C.ID选择器(如#section1)D.伪类选择器(如a:hover)4.`margin:10px15px20px25px;`这个声明表示？A.上右下左的边距分别为10px,15px,20px,25pxB.上左下右的边距分别为10px,15px,20px,25pxC.左右各15px，上下各10px的对称边距D.上下各10px，左右各25px的对称边距5.CSS属性`display:inline-block;`的作用是？A.使元素独占一行，宽度由内容决定B.使元素不换行，宽度由内容决定，但可以设置宽高C.使元素成为块级元素，宽度默认为容器宽度D.使元素隐藏6.元素的`content-box`盒模型下，元素的宽度和高度默认只计算？A.content的宽度和高度B.content+padding的宽度和高度C.content+padding+border的宽度和高度D.content+padding+border+margin的宽度和高度7.下列哪个CSS属性用于控制文本的横向对齐方式？A.text-sizeB.line-heightC.text-alignD.vertical-align8.CSS中，表示红色的十六进制颜色代码是？A.#000000B.#FFFFFFC.#FF0000D.#00FF009.下列哪个CSS属性是用来指定元素的外边框样式？A.border-styleB.border-colorC.border-widthD.border-radius10.使一个元素完全脱离文档流，并且相对于视口固定位置，应使用哪个`position`属性值？A.staticB.relativeC.absoluteD.fixed11.CSS选择器`p:first-child`的含义是？A.选择所有第一个子元素是`<p>`标签的元素B.选择所有在兄弟元素中第一个是`<p>`标签的元素C.选择所有`<p>`标签的第一个子元素D.选择所有作为第一个子元素的`<p>`标签12.`background-image:url("image.jpg");`这条CSS规则中，`url()`函数内的路径可以是？A.绝对路径，如/images/image.jpgB.相对路径，如"../images/image.jpg"或"images/image.jpg"C.以上两者都可以D.只能是当前页面的相对路径二、多选题（请选出所有正确的答案）1.以下哪些属于CSS选择器？A.`div`B.`.class-name`C.`#id-name`D.`input[type="text"]`E.`p:hover`2.以下哪些CSS属性可以用来控制元素的布局方式？A.displayB.positionC.floatD.clearE.visibility3.`padding`属性可以设置多少个值？A.1个（应用于所有四边）B.2个（应用于上下和左右）C.3个（应用于上、左右和下）D.4个（分别应用于上、右、下、左）E.以上都可以根据需要组合4.以下哪些是常用的媒体查询特征（MediaQueryFeature）？A.screen-widthB.screen-heightC.device-widthD.colorE.font-size5.以下哪些CSS属性会影响元素的视觉外观但不改变其在文档流中的布局行为？A.marginB.borderC.paddingD.display:inlineE.visibility:hidden6.以下哪些选择器具有继承性，子元素可以继承父元素的样式？A.字体相关属性(font-family,font-size等)B.颜色相关属性(color,background-color等)C.背景图片(background-image)D.盒模型属性(margin,padding等)E.display属性7.CSS中，`position`属性的`relative`和`absolute`值有何不同？A.`relative`是默认值，元素相对于自身正常位置偏移；`absolute`是脱离文档流，相对于最近的已定位父元素偏移（如果没有则相对于初始包含块）B.两者都会使元素脱离文档流C.`absolute`是默认值，元素相对于自身正常位置偏移；`relative`是脱离文档流D.`relative`会脱离文档流，`absolute`会保留在文档流中8.以下哪些情况会导致CSS选择器的优先级提高？A.使用ID选择器B.使用类选择器C.使用标签选择器，且是HTML文档的根元素（如html）D.连续使用多个相同类型的选择器（如.class.class）E.使用属性选择器三、填空题1.CSS是一种________语言，用于描述HTML文档的________和展示效果。2.为了提高CSS代码的可维护性，推荐使用________或________的方式引入样式表。3.选择一个HTML元素的所有类名为"info"的子元素，选择器写作________。4.CSS盒模型中，元素内容区域外是________，其外侧是________。5.若要使一个`<p>`元素中的第一行文字加粗，可以使用伪类选择器________。6.`border-collapse:collapse;`属性可以使相邻的表格单元格的________合并。7.使用`display:flex;`可以让容器中的子元素按照________方式排列。8.媒体查询使用________关键字来根据不同条件（如屏幕宽度）应用不同的CSS样式。四、简答题1.简述CSS选择器的优先级计算规则（至少列出三种计算方式或影响因素）。2.解释`box-sizing:border-box;`与`box-sizing:content-box;`的区别，并说明在什么场景下使用`border-box`更为合适。3.说明`position:fixed;`与`position:absolute;`在定位行为上的主要区别。五、小实例题假设有一个HTML代码片段如下：```html<divclass="container"><h1>标题</h1><pclass="text">这是一段普通文本。</p><pclass="texthighlight">这是一段需要高亮的文本。</p></div>```请编写CSS代码，实现以下效果：1.所有`.container`的背景色为浅灰色，宽度为80%，居中显示。2.所有`.text`类的段落文字颜色为蓝色，行高为1.5倍。3.所有`.highlight`类的段落文字加粗，并且文字颜色为红色，文字阴影为2px的模糊效果。4.标题`<h1>`元素的外边框为1px实线黑色。试卷答案一、选择题1.A解析思路：内联样式直接写在HTML标签内部，只作用于该标签，不利于代码复用和维护。嵌入式和外部链接样式将CSS集中管理，更利于维护和复用。2.B解析思路：CSS选择器中，ID选择器以`#`开头，且ID在页面中应唯一，因此优先级最高。3.C解析思路：CSS选择器优先级顺序：ID>类>元素>伪类/伪元素>继承/默认值。ID选择器具有最高优先级。4.A解析思路：CSS边距声明可以是一个值（四边相同）、两个值（上下/左右，顺时针）、三个值（上/左右/下）或四个值（上/右/下/左）。给定的声明是四个值，按上右下左顺序解析。5.B解析思路：`display:inline-block;`使元素具有行内元素的特性（不换行，宽度由内容决定）和块级元素的特性（可以设置宽高，有margin和padding，占据空间）。6.A解析思路：`content-box`盒模型下，元素的宽度和高度只计算内容（content）的尺寸。Padding、Border和Margin是额外添加在内容外部的，不包含在宽高内。7.C解析思路：`text-align`属性专门用于控制文本内容在元素内的水平对齐方式，如left,right,center,justify。8.C解析思路：十六进制颜色代码`#FF0000`表示红色，其中FF是红色分量，00是绿色分量，00是蓝色分量。9.A解析思路：`border-style`属性用于定义边框的线型，如solid（实线）、dashed（虚线）等。`border-color`定义颜色，`border-width`定义宽度，`border-radius`定义圆角。10.D解析思路：`position:fixed;`使元素相对于浏览器窗口（视口）固定位置，即使页面滚动，元素也保持在原地。`absolute`是相对于最近的已定位父元素或初始包含块定位。11.D解析思路：`:first-child`伪类选择器选择的是作为其父元素的第一个子元素的指定元素。这里选择的是第一个子元素是`<p>`标签的元素。12.C解析思路：`url()`函数可以接受绝对路径（完整网址）或相对路径（相对于当前文件的位置）。绝对路径确保能找到资源，相对路径更灵活。二、多选题1.A,B,C,D,E解析思路：元素选择器（div）、类选择器（.class-name）、ID选择器（#id-name）、属性选择器（input[type="text"]）和伪类选择器（p:hover）都是有效的CSS选择器。2.A,B,C,D解析思路：`display`控制显示类型（行内、块级等），`position`控制定位方式，`float`控制浮动布局，`clear`控制清除浮动，这些都与元素在页面中的布局位置和方式有关。`visibility`控制可见性，不直接改变布局。3.A,B,C,D,E解析思路：`padding`属性可以接受1到4个值。1个值：四边相同。2个值：上/下，左/右。3个值：上，左/右，下。4个值：上，右，下，左。这些组合方式都是有效的。4.A,B,C,D,E解析思路：这些都是媒体查询中常用的特征（MediaFeatures）。`screen-width`/`device-width`表示屏幕宽度，`color`表示颜色深度，`font-size`表示字体大小，`orientation`表示设备方向等。5.A,B,C,E解析思路：`margin`,`border`,`padding`都是盒子模型的一部分，它们增加元素的总尺寸，但不改变元素在文档流中的位置。`visibility:hidden`使元素不可见，但它在文档流中仍然占据空间（只是不显示内容）。`display:inline`改变元素显示类型为行内，会改变其在流中的行为（不独占一行，宽度由内容决定）。6.A,B,D解析思路：CSS中，字体属性（font-系列）、颜色属性（color,background-color等）、盒模型相关属性（margin,padding,border等）通常会被子元素继承。背景图片（background-image）、`display`属性、`position`属性等一般不继承。7.A解析思路：`relative`是默认值，元素相对于自身正常文档流位置偏移。`absolute`使元素脱离文档流，相对于最近的已定位（`position`不是`static`）父元素或初始包含块（body）进行定位。如果找不到已定位父元素，则相对于视口定位。8.A,B,E解析思路：选择器优先级规则中，ID选择器优先级最高，其次是类选择器，然后是元素选择器。属性选择器和伪类/伪元素选择器优先级低于类和元素。选择器本身的作用域也会影响优先级（如子选择器>父选择器）。连续使用相同类型的选择器（如`.class.class`）会增加其权重，但单个选择器类型本身优先级不变。使用ID选择器会显著提高优先级。三、填空题1.样式，呈现解析思路：CSS（CascadingStyleSheets）全称是层叠样式表，是一种样式表语言，用于描述HTML（或XML）文档的呈现（Presentation）效果。2.嵌入式，外部链接解析思路：为了便于维护和复用，推荐将CSS代码集中写在`<style>`标签中（嵌入式），或者放在单独的`.css`文件中并通过`<link>`标签引入（外部链接）。3.`.info:first-child`解析思路：选择具有特定类名（如.info）的元素，可以使用`.类名`选择器。选择特定位置的子元素，可以使用`:first-child`伪类选择器。4.边框，边距解析思路：CSS盒模型由内容（Content）、内边距（Padding）、边框（Border）和外边距（Margin）组成。Content区域外是Padding，Padding外是Border，Border外是Margin。5.`a:hover`解析思路：`:hover`是伪类选择器，用于选择鼠标悬停在其上的元素。结合元素选择器`a`，`a:hover`用于选择处于悬停状态的`<a>`链接。6.边框解析思路：`border-collapse`属性控制表格中相邻单元格边框的合并行为。`collapse`值表示将相邻单元格的边框合并为一条边框。7.弹性解析思路：`display:flex;`将容器设置为弹性容器（FlexContainer），其子元素称为弹性项目（FlexItem），子元素会按照弹性布局（FlexLayout）的方式进行排列和分配空间。8.@media解析思路：媒体查询（MediaQueries）使用`@media`关键字来编写条件规则，根据不同的媒体特征（如屏幕宽度、分辨率、设备类型等）应用不同的CSS样式。四、简答题1.简述CSS选择器的优先级计算规则（至少列出三种计算方式或影响因素）。解析思路：*选择器类型：优先级从高到低大致为：ID选择器>类选择器（和属性选择器、伪类）>元素选择器>伪元素选择器>继承和默认值。具有继承性的属性（如color,font-size）优先级最低。*具体选择器：在同一层级的选择器中，ID选择器优先级最高。选择器具有越多层级（如`.class.another-class`比`.class`优先级高），优先级越高。行内样式（style="..."）的优先级最高。*层叠规则：如果多个选择器应用于同一个元素，则最后被应用的样式会覆盖之前的样式。但需要注意，具有更高优先级的选择器会覆盖优先级低的选择器。*计算方法：可以通过给选择器分配一个权重值来计算（虽然不常用），ID为1，类和属性/伪类为10，元素为100。选择器叠加时权重相加。行内样式权重为1000。2.解释`box-sizing:border-box;`与`box-sizing:content-box;`的区别，并说明在什么场景下使用`border-box`更为合适。解析思路：*`content-box`(默认)：元素的宽度和高度只计算内容（Content）的尺寸。如果设置了padding或border，它们会增加元素的总宽度和高度，导致元素的最终占据空间大于设定的宽高值。*`border-box`：元素的宽度和高度包含了内容（Content）、内边距（Padding）和边框（Border）的尺寸。即设定的宽高值是元素内容区域加上内边距和边框后的总宽度高度。Margin不包含在内。*`border-box`更合适的场景：*布局一致性：当需要元素的总尺寸（包括padding和border）保持固定时，使用`border-box`更方便。可以简单地设置元素的宽度和高度来控制其整体大小，而不需要额外计算padding和border带来的尺寸增加。*响应式设计：在制作响应式布局时，通常希望元素的可用内容区域（Content+Padding）随视口大小变化而变化，`border-box`更符合这种需求。*统一设置：对于需要统一控制大量元素尺寸的场景，使用`border-box`可以避免因padding和border