CSS笔试题整合---不断更新

TON_G-T

已于 2022-05-01 15:49:33 修改

阅读量5.2k

点赞数 4

文章标签： css html 前端

于 2022-05-01 15:40:44 首次发布

本文链接：https://blog.csdn.net/qq_45923489/article/details/124522904

版权

第一套（50题）

1、那个HTML5元素用于显示已知范围内的标量测量？D

A、<gauge> B、<range> C、<measure> D、<meter>

<meter>标签定义一致范围内或分数值内的标量测量，也被称为guage(尺度）。例如：磁盘用量、查询结果的相关性等.

注：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。

2、在 HTML 中，样式表按照应用方式可以分为三种类型，其中不包括（D ）

A、内嵌样式表 B、行内样式表 C、外部样式表文 D、类样式表
没有类样式表

3、下面 CSS3 新增伪类中不正确的一个是？B

A、p:first-of-type B、p:only-of-child C、p:nth-child(2) D、:disabled

:only-child 选择器匹配属于其父元素的唯一子元素的每个元素。等效的选择器还可以写成 :first-child:last-child

4、在 W3C 标准盒模型中，默认情况下块元素的总宽度为：A

A、content B、content+2*padding C、content+2*padding+2*border

D、content+2*padding+2*border+2*margin

标准盒子模型＝ margin + border + padding + width （width = content ）

IE盒子模型＝ margin + width（width = border + padding + content ）

5、对于 <div id="myid" class="myclass">welcome to yonyou.</div> 下面几种选择器，哪个优先级最高(C )

A、div B、.myclass C、#myid D、div.myclass

CSS 选择器优先级：

内联样式 > ID 选择器 > 伪类 > 属性选择器 > 类选择器 > 元素（类型）选择器 > 通用选择器

6、关于 position 定位，下列说法错误的是(A)

A、fixed 元素，可定位于相对于浏览器窗口的指定坐标，它始终是以 body 为依据

B、relative 元素以它原来的位置为基准偏移，在其移动后，原来的位置不再占据空间

C、absolute 的元素，如果它的 父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移

D、fixed 属性的元素在标准流中不占位置

fixed不以body为依据，只以浏览器窗口为依据。

relative 元素以它原来的位置为基准偏移，在其移动后，原来的位置依旧占据空间。

7、下列关于 CSS 属性 position 的属性值的描述，说法错误的是？B

A、static：没有定位，元素出现在正常的流中

B、fixed：生成绝对定位的元素，相对于父元素进行定位

C、relative：生成相对定位的元素，相对于元素本身正常位置进行定位。

D、absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。

8、哪个元素指定多个媒体资源？B

A、<param> B、<source> C、<object> D、<picture>

<source> 元素为 <audio>、<video> 和 <picture> 元素指定多个媒体资源

9、CSS 属性 font-style 用于设置字体的粗细。请判断这句话的正确与否。F

T F

font-style是设置字体的风格，包括值normal：默认正常情况；italic：显示文字为斜体；oblique：显示文字为斜体；inherit：从父亲那继承一个样式字体；

font-weight为设置字体的粗细。

10、关于 Animation-timing-function 下列说法正确的是？(B)

A、linear 是默认动画，动画从头到尾的速度是相同的

B、ease 是默认动画，动画以低速开始，然后加快，在结束前变慢

C、cubic-bezier(n, n, n, n)，在 cubic-bezier 函数中自己的值。可能的值是从 0 到 100 的数值

D、ease-in 动画以低速结束

11、下列哪个元素表示外部资源？该元素可以被视为图像、嵌套的浏览上下文或插件要处理的资源。它包括各种属性，如存档、边框、分类、代码库、代码类型等（A）

A、<object> B、<source> C、<param> D、<picture>

外部资源由 <object> 元素表示，该元素可以被视为图像、嵌套的浏览上下文或插件要处理的资源。它包括各种属性，如存档、边框、分类、代码库、代码类型等

12、div 元素的哪些 CSS 属性的默认值为 0？C、D

A、border-top-width B、outline-width C、padding-top D、margin-top

border-top-width:默认值medium,定义中等的上边框。
outline-width:默认值medium,规定中等的轮廓。

13、下面关于 CSS 中 link 和 @import 的区别，描述错误的是？D

A、link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式

B、当一个页面被加载的时候，link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载

C、link 在支持 CSS 的浏览器上都支持而 @import 只在 5.0 以上的版本有效

D、当使用 JavaScript 控制 dom 去改变样式的时候，只能使用 @import 方式

link属于html标签，而@import是css提供的。
页面被加载时，link会并行加载节约时间；而@import引用的css是串行加载，会等到页面加载结束后加载，比较费时。
link是html标签，因此没有兼容性，而@import只有IE5以上才能识别，且只能引入css文件。
link因为是html元素，可以通过js DOM动态的添加样式，而@import却不可以。
link方式样式的权重高于@import

14、页面导入样式文件时，对于使用 link 和 @import 说法错误的是（B）

A、link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS，定义 rel 连接属性等作用；而 @import 是 CSS 提供的，只能用于加载 CSS

B、页面被加载的时，link 和 @import 引用的 CSS 都会等到页面被加载完再加载

C、@import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题

D、link 支持使用 JS 控制 DOM 去改变样式，而 @import 不支持

15、在 CSS3 中，以下哪个是 IE 浏览器（Trident 内核）的私有属性前？（D ）

A、–Webkit B、–trident C、–ie D、–ms

主流浏览器内核私有属性css前缀：mozilla内核 (firefox,flock等)     -moz
webkit内核(safari,chrome等)   -webkit
opera内核(opera浏览器)         -o
trident内核(ie浏览器)               -ms

16、下面哪个元素被称为媒体元素的子元素？

A、<area> B、<img> C、<map> D、<track>

<track> 标签为媒体元素（比如 <audio> an

d <video>）规定外部文本轨道。这个元素用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。

17、根据规范，以下 HTML 和 CSS 代码解析后， container.clientWidth 的值是:（B）

<style>
#container {
    width: 200px;
    height: 200px;
    padding: 20px;
    margin: 20px;
    border: solide 10px black;
}
</style>
 
<div id="container">
content
</div>

A、200  B、240  C、280  D、300

ele.clientWidth = 宽度 + padding

ele.offsetWidth = 宽度 + padding + border

ele.scrollTop = 被卷去的上侧距离

ele.scrollHeight = 自身实际的高度（不包括边框）

18、基于以下 HTML 结构，以下关于 main1.css 和 main2.css 的描述有哪些是正确的？（AB）

A、main1.css 和 main2.css 同时开始加载，先加载完成的优先解析

B、如果 main1.css 和 main2.css 中有相同的选择器规则，那么 main2.css 中的规则将合并 main1.css 的规则

C、main2.css 只有在 main1.css 加载并解析后，才开始加载

D、如果 main1.css 和 main2.css 中有相同的选择器规则，那么 main2.css 中的规则将被忽略

link标签是同时加载的 script标签才会加载完一个再加载另一个

19、下列关于背景定位属性 background-position 说法正确的是（ ABD ）

A、该属性可有两个取值，第一个取值为背景图像与其容器在水平方向上的距离，第二个取值为背景图像与其容器在垂直方向上的距离

B、若只有一个取值，则其第二个取值默认为 50%

C、若此取值用百分数表示，如：20% 60%，则表示此背景图像离其容器左边的距离为整个容器宽度的 20%，离容器上边的距离为整个容器高度的 60%

D、若属性取值用 left、center、right、top、bottom 表示，则该属性取值的顺序可以颠倒，否则其取值顺序不能颠倒

实际上的位置计算方式为：x = (对象的宽度 - 图像的宽度) * x%; y = (对象的高度 - 图像的高度) * y%;所以为整个容器宽度的20% 这种说法错误

20、如果子元素都为浮动，不能解决父类高度塌陷问题的是（A）

A、给父元素添加 clear: both;

B、给父元素添加 overflow: hidden;

C、在浮动元素下方添加空 div，并添加样式 clear: both;

D、设置父元素 :after{content: “”;clear: both; display:block;overflow: hidden;}

clear:both 属性定义了元素的哪边的上方不允许出现浮动元素。

21、如果要运用 CSS3 动画，你需要运用什么规则？B

A、animation  B、keyframes  C、flash  D、transition

要运用css3动画，需要运用@keyframes规则和animation属性

22、关于 CSS 的单位，以下说法错误的是：A

A、百分比单位始终根据父元素相应值来计算

B、vw、vh、em、rem 都是相对单位

C、90deg 表示顺时针旋转 90 度

D、1s = 1000ms

1. line-height 的百分比是相对于自身的字体大小

2. position: fixed 元素（如宽高等）的百分比是相对于视口的

23、哪种输入类型定义滑块控件？D

A、search  B、controls  C、slider  D、range

24、下列说法正确的有：（AB）

A、visibility:hidden; 所占据的空间位置仍然存在，仅为视觉上的完全透明；

B、display:none; 不为被隐藏的对象保留其物理空间；

C、visibility:hidden; 与 display:none; 两者没有本质上的区别；

D、visibility:hidden; 产生 reflow 和 repaint（回流与重绘）；

display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint

visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint

25、在 CSS 语言中下列哪一项是「右边框全部属性」的语法？（ C）

A、border-right-width:

B、border-right-height:

C、border-right:

D、border-top-width:

border-right为右边框，其他三个选项都是边框的属性

26、如何使列表项标记变为方块（C）

A、type: square

B、type: 2

C、list-style-type: square

D、list-type: square

list-style-type 属性设置列表项标记的类型

square：标记是实心方块。

27、在不涉及样式情况下，页面元素的优先显示与标签选用无关。请判断这句话的正确与否。（T）

html文档加载是从上到下加载，只与标签的上下顺序有关，与标签选用无关。

28、Canvas 能够使用___绘制 2D 图形？（C）

A、XML B、HTML C、JavaScript  D、XHTML

Canvas是通过JavaScript的API进行绘图的，SVG是通过XML进行绘图的，这两种绘图方式的应用场景不同

29、下列对 Reflow（回流）和 Repaint（重绘）的描述正确的是？C

A、repaint 比 reflow 更加花费时间影响性能

B、一条条地修改 DOM 的样式要比先定义好 css 的 class 然后修改 DOM 的 className 减少 reflow/repaint

C、为 HTML 标签使用 fixed 或 absolute 的 position，那么修改他们的 CSS 是不会 reflow 的

D、改变了某个元素的背景颜色，文字颜色等会导致 reflow

浏览器渲染过程：

1.解析HTML，生成DOM树，解析CSS，生成CSSOM树。

2.将DOM树和CSSOM树结合，生成渲染树（Render tree）。

3.Layout（回流）：根据生成的渲染树，进行回流，得到节点的几何信息。

4.Painting（重绘）：根据渲染树以及回流得到的节点，获取绝对像素。

5.Display：将像素发给GPU，展示在页面上

C选项脱离了文档流，当然也就不会回流了

30、CSS3 新增特性有（BCD）

A、font-size B、@media C、@keyframes D、flexbox

CSS新增特性： 1、CSS3选择器 2、CSS3边框(Borders) 3、CSS3背景 4、CSS3渐变 5、CSS3文本效果 6、CSS3字体(@font-face规则) 7、CSS3转换和变形 1）2D转换方法 2）3D转换属性 8、CSS3过度（transition属性） 9、CSS3动画（@keyframes规则 animation属性） 10、CSS3多列 11、CSS3盒模型 12、CSS3伸缩布局盒模型(弹性盒子)（flexbox） 13、CSS3多媒体查询（@media）

31、下面哪些技术可用于优化 CSS 图片加载 ?ABCD

A、CSSSprite B、SVGSprite C、Iconfont D、Base64

CSS Sprite：又称为CSS精灵或者雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。能很好地减少网页的http请求，从而大大的提高页面的性能。

SVG Sprite：与CSS Sprite类似。另外一种实现思路 <symbol> + <use>。<symbol>用于定义可复用的形状，定义的现状不会展示出来，
而是通过use元素引用来显示。

Icon font：图标字体，也叫字体图标，就是字体做的图标。能自由变化大小，且不会模糊。比图片小，加载快。可以任意改变颜色。

Base64：可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。图片的下载始终都要向服务器发出请求，而通过base64编码后可以随着 HTML的下载同时下载到本地，减少 http 请求。

31、关于浮动元素，下面说法错误的是(D)

A、如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象

B、浮动元素会尽可能地向顶端对齐、向左或向右对齐

C、如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素

D、行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之下

1、行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上

2、块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容显示在浮动元素之上

3、若不浮动的是块级元素，那么浮动的元素将显示在其上方

4、若不浮动的是行内元素或者行内块元素，那么浮动的元素不会覆盖它，而是将其挤往左方

32、以下关于跨域的描述哪些是正确的:BCD

A、Web 字体、图片等资源文件加载都不受浏览器跨域限制

B、CSS 文件的加载不受跨域限制

C、window.onerror 方法默认情况下无法获取跨域脚本的报错详情

D、canvas 中使用 drawImage 贴图会受跨域限制

css文件的加载肯定不收跨域限制，a站点能引用B站点的样式d

canvas的drawImage使用跨域图片，会报错

解决方案1、如果图片不大不多可以使用base64

解决方案2、实例的image对象的设置img.crossOrigin = ' ';并且在服务器端设置Access-Control-Allow-Origin:*(或运行的域名)

33、DHTML 包含以下哪些内容？C

1、HTML 2、JavaScript 3、HTML DOM 4、CSS

A、1 和 2  B、3 和 4  C、都是 D、都不是

34、问 123 的颜色是？C

<style>
    .main{
        color:blue
    }
    span{
        color:green
    }
</style>
<div style="color:red !important" class=""main"">
    <span>123</span>
</div>

A、red B、blud C、green D、white

div是span的父级，继承的样式权重小于给自身设置样式的权重

35、下列哪些元素在浏览器默认样式下会加粗文本？AD

A 、h1  B、caption  C、em  D、th

A：<h1> - <h6> 标签表示 HTML 标题，默认加粗

B：<caption> 标签表示表格标题，标题一般被居中表格之上，但不加粗文本

C：<em> 标签表示强调内容，显示为斜体，但不加粗文本

D：<th> 标签表示表格的表头，默认加粗文本

36、下列关于 CSS2 中轮廓 outline 说法错误的是（C）

A、轮廓是绘制于元素周围的一条线

B、轮廓位于边框边缘的外围，可起到突出元素的作用

C、CSS outline 可以设置内外边距样式

D、CSS outline 属性可以设置元素轮廓的颜色和宽度

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
注释：轮廓线不会占据空间，也不一定是矩形。

37、哪个属性将循环播放嵌入到 audio 元素中的音频？C

A、preload B、control C、loop D、autoplay

38、关于 CSS，以下说法正确的有：AD

A、currentColor 取值为当前元素 color 属性的值
B、calc( ) 函数允许使用加法和减法，不允许使用乘法和除法
C、attr( ) 函数只能在 content 属性中使用
D、color: currentcolor 和 color: inherit 是等价的

alc()的运算规则

calc()使用通用的数***算规则，但是也提供更智能的功能：

使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

39、实现翻书的效果可以使用 CSS3 里的什么方法？A

A、rotateY  B、translateY  C、scaleY  D、perspective(n)

rotateY：定义沿 Y 轴的 3D 旋转，可实现翻书的效果

translateY：沿着 Y 轴移动元素

scaleY：定义 2D 缩放转换时，改变元素的高度；定义 3D 缩放转换时，通过给定一个 Y 轴的值

perspective(n)：改变3D元素是怎样查看透视图（注：只影响 3D 转换元素）

40、HTML5 支持 HTML4 中的所有表单控件？T

A、正确 B、错误

41、在使用 table 表现数据时，有时候表现出来的会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值？AD

A、cellpadding=”0″ B、padding:0 C、margin:0 D、cellspacing=”0″

42、设置不同屏幕中，元素的位置不会发生改变的是（ A ）

A、@media screen B、@media print C、@media mouse D、@media key

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

43、请问 wrap 这个 div 的高度是多少？B

<style type="text/css">
.a, .b, .c {
    box-sizing: border-box;
    border: 1px solid;
}
.wrap {
    width: 250px;
}
.a {
    width: 100px;
    height: 100px;
    float: left;
}
.b {
    width: 100px;
    height: 50px;
    float: left;
}
.c {
    width: 100px;
    height: 100px;
    display: inline-block;
}
</style>
 
<div class="wrap">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
</div>

A、100px B、150px C、200px D、250px

display:inline-block会形成BFC，即块级格式化上下文，它是一个独立渲染的区域，并且与外部区域毫不相干，不会与浮动元素重叠。

因此会排在b后面，但是父盒子规定了宽度，所以就会飘下来。

44、下述有关 border:none 以及 border:0 的区别，描述错误的是？CD

A、border:none 表示边框样式无
B、border:0 表示边框宽度为 0
C、当定义了 border:none，即隐藏了边框的显示，实际就是边框宽度为 0
D、当定义边框时，仅设置边框宽度也可以达到显示的效果

当定义border:none时，表示无边框样式，浏览器并不会对边框进行渲染，也就没有实际的宽度；定义边框时，除了设置宽度外，还必须设置边框的样式才能显示出来。

45、关于 CSS 选择器，以下说法正确的是：AC

A、每个选择器最多只能出现一个伪元素
B、每格选择器最多只能出现一个伪类
C、:nth-child(an+b) 中 n 的取值从 0 开始
D、A+B 匹配 A 之后所有符合 B 规则的元素

:nth-child(n),n从1开始计数

:nth-child(odd)和:nth-child(even),从1开始计数

:nth-child(an+b),n从0开始计数

46、在一个行内元素中，显示了不同的三部分内容，若想要这三个内容以 1:1:1 的比例分配宽度，该如何实现（ A ）

A、position:relative; -webkit-box-flex: 1;  box-flex: 1; -webkit-flex:1; flex:1;

B、position:absu; box-flex: 1; -webkit-flex:1; flex:1;

C、position:relative; -webkit-box-flex: 1;  box-flex: 1;

D、position:relative;  box-flex: 1; -webkit-flex:1; flex:1;

47、CSS3 中什么功能可以实现文字或图像的变形处理：A

A、transform B、deform C、scale D、rotate

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。rotate() 方法旋转当前的绘图

48、哪个 HTML5 内建对象用于在画布上绘制？B

A、getContent  B、getContext  C、getGraphics  D、getCanvas

getContext() 方法返回一个用于在画布上绘图的环境

49、下列哪个浏览器可能不支持以下代码来创建矩形:B

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="350" height="200" style="border:1px solid red;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>

A、Firefox (Gecko) 1.5 (1.8)  B、Internet Explorer 7.0  C、Opera 9.0

只要和兼容性有关的问题有ie8以下的选项，选就完了

50、哪个元素表示标记或突出显示的文本以供参考？B

A、highlight  B、mark  C、span  D、blink

突出显元素指定文本的重要性，mark 元素表示标记或高亮显示以供参考的文档中的文本。

TON_G-T

关注

4
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
CSS笔试题整合---不断更新

第一套（50题）1、那个HTML5元素用于显示已知范围内的标量测量？<meter>标签定义一致范围内或分数值内的标量测量，也被称为guage(尺度）。例如：磁盘用量、查询结果的相关性等.注：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。2、在 HTML 中，样式表按照应用方式可以分为三种类型，其中不包括（D ）A、内嵌样式表 B、行内样式表 C、外部样式表文 D、类样式表...
复制链接

扫一扫