CSS的面试题有哪些

发布时间:2022-02-23 17:12:05 作者:iii
来源:亿速云 阅读:844

这篇文章主要介绍了CSS的面试题有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS的面试题有哪些文章都会有所收获,下面我们一起来看看吧。

1.在 css 选择器当中,优先级排序正确的是()

A、id选择器>标签选择器>类选择器

B、标签选择器>类选择器>id选择器

C、类选择器>标签选择器>id选择器

D、id选择器>类选择器>标签选择器

4个等级的定义如下:

第一等:代表内联样式,如: style=””,权值为1000

第二等:代表ID选择器,如:#content,权值为100

第三等:代表类,伪类和属性选择器,如.content,权值为10

第四等:代表类型选择器和伪元素选择器,如div p,权值为1

2.下列定义的 css 中,哪个权重是最低的?( )

A、#game .name

B、#game .name span

C、#game div

D、#game div.name

权重越大,优先级越高

CSS选择器优先级是指基础选择器的优先级:

ID` > `CLASS` > `ELEMENT` > `*
3、关于HTML语义化,以下哪个说法是正确的?( )

A、语义化的HTML有利于机器的阅读,如PDA手持设备、搜索引擎爬虫;但不利于人的阅读

B、Table 属于过时的标签,遇到数据列表时,需尽量使用 div 来模拟表格

C、语义化是HTML5带来的新概念,此前版本的HTML无法做到语义化

D、headerarticleaddress都属于语义化明确的标签

解析:

选D

1、什么是HTML语义化?

根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2、为什么要语义化?

为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构

用户体验:例如titlealt用于解释名词或解释图片信息、label标签的活用;

有利于SEO :和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:

爬虫依赖于标签来确定上下文和各个关键字的权重;方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化

4、CSS 样式,下面哪一个元素能够达到最大宽度,且前后各有一个换行?( )

A、Block Element

B、Square Element

C、Side Element

D、Box Element

解析:

选A

块级元素block element

行内元素 inline element

行内块元素inline-block element

5、放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行?( )

A、文件头部位置

B、文件尾

C、<head>标签部分

D、<body>标签部分

解析:

选D

head部分中的JavaScripts会在被调用的时候才执行。

body部分中的JavaScripts会在页面加载的时候被执行。

6、下列说法正确的有:( )

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

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

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

D、visibility:hidden;产生reflowrepaint(回流与重绘);

AB

visiblity:看不见,摸的着.

display:看不见,摸不着.

displaydom级别的,可以渲染和重绘。

visiblity不是dom级别的,不能重绘,只能渲染

7、新窗口打开网页,用到以下哪个值( )

A、_self

B、_blank

C、_top

D、_parent

解析:

B

html中通过<a>标签打开一个链接,通过 <a> 标签的 target

属性规定在何处打开链接文档。

如果在标签<a>中写入target属性,则浏览器会根据target的属性值去打开与其命名或名称相符的 框架<frame>或者窗口.

target中还存在四个保留的属性值如下,

_black:在新窗口中打开被链接文档

_self:默认。在相同的框架中打开被链接文档

_ parent:在父框架中打开被链接文档

_top:在整个窗口中打开被链接文档

framename:在指定框架中打开被链接文档

8、下列说法错误的是( )

A、设置display:none后的元素只会导致浏览器的重排而不会重绘

B、设置visibility:hidde后的元素只会导致浏览器重绘而不会重排

C、设置元素opacity:0之后,也可以触发点击事件

D、visibility:hidden的元素无法触发其点击事件

解析:

A

设置display:none后的元素会导致浏览器的重排重绘

9、超链接访问过后hover样式就不出现了,被点击访问过的超链接样式不再具有hoveractive了,解决方法是改变CSS属性的排列顺序?( )

A、a:link {} a:visited {} a:hover {} a:active {}

B、a:visited {} a:link {} a:hover {} a:active {}

C、a:active {} a:link {} a:hover {} a:visited {}

D、a:link {} a:active {} a:hover {} a:visited {}

解析:

A

a:link`; `a:visited`; `a:hover`; `a:active;

a:hover必须放在a:linka:visited之后;

a:active必须放在a:hover之后。

10、关于position定位,下列说法错误的是( )

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

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

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

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

解析:

B

absolute:生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位,元素的位置通过lefttopright、以及bottom属性进行规定fixed

生成绝对定位的元素,相对于浏览器窗口进行定位,元素的位置通过lefttopright以及bottom属性进行规定relative

生成相对定位的元素,相对于其正常位置进行定位,因此,left:20会向元素的LEFT位置添加20像素static

默认值,没有定位,元素出现正常的流中(忽略topbottomleftright或者z-index声明)inherit

规定应该从父元素继承position属性的值

11、css中哪些属性可以继承( )

A、font-size

B、color

C、font-family

D、border

解析:

ABC

margin padding border display 不可以继承

12、cssclear的作用是什么?( )

A、清除该元素所有样式

B、清除该元素父元素的所有样式

C、指明该元素周围不可出现浮动元素

D、指明该元素的父元素周围不可出现浮动元素

解析:

C

clear` : `none` | `left` | `right` | `both

关于“CSS的面试题有哪些”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“CSS的面试题有哪些”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. 有哪些CSS面试题
  2. 前端有哪些常见css的面试题目

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:CSS的双列自适应布局怎么实现

下一篇:CSS怎么使用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》