【CSS】【⾯试题】⽜客⽹CSS专项练习部分答案及解析（更新中...）打印机显示句柄无效
1.在W3C标准盒模型中，默认情况下块元素的总宽度为：
content
content+2*padding
content+2*padding+2*border
content+2*padding+2*border+2*margin
答案为：content
解析：CSS有两种盒⼦模型，分别为W3C盒⼦模型和IE盒⼦模型。区别在于，IE盒⼦模型的content部分，将border和padding包含进去了。width = border+padding+content。题⼲问的总宽度应该理解为width值为多少，⽽不是盒⼦的总宽度。
2.下⾯关于WEB开发中，常见的技术和问题描述正确的是：
CSS selector中，⽀持按照元素的id选择，元素的名称进⾏选择，元素的class属性进⾏选择，⽐如 “#div .
red”就是选择CSS class属性中包括red的所有的div元素
(所有id为div的元素)
JSON是⼀种以JavaScript语法表⽰的数据对象格式，⽐如描述⼀个学⽣，包括，其中，姓名，年龄就可以这样表达 {name:"John"， age: 18}
(JSON的键名需要加引号)
HTML页⾯中的第⼀个指令：表明这是⼀个符合HTML5标准的页⾯
不同的浏览器对HTML渲染的⽅式稍有差异，但是所有的主流浏览器都⽀持JavaScript语⾔，⽽且提供的JavaScript的编程环境都是⼀致的
(不同浏览器提供的编程环境不⼀致（包括html、css、js编程的不⼀致），所以在编程时才要使⽤ -ms、-webkit、-moz来实现不同浏览器的兼容性（解决css编程不⼀致）)
HTML页⾯装载时，⾸先把整个HTML页⾯下载下来，再根据HTML中出现的顺序依次下载它引⽤的外部的JavaScript代码和图⽚资源，最后才执⾏页⾯中的Jav aScript代码
(JS⽂件按在HTML中引⼊的顺序依次载⼊（不是最后载⼊），在载⼊后马上执⾏，执⾏时会阻塞页⾯后续的内容（包括页⾯的渲染、其它资源的下载）) JavaScript中的函数就是⼀个对象，每个函数对象都继承了JavaScript的Function类
3.在⼀个⾏内元素中，显⽰了不同的三部分内容，若想要这三个内容以1:1:1的⽐例分配，该如何实现
position:relative; -webkit-box-flex: 1; box-flex: 1; -webkit-flex:1; flex:1;
position:absu; box-flex: 1; -webkit-flex:1; flex:1;
position:relative; -webkit-box-flex: 1; box-flex: 1;
position:relative; box-flex: 1; -webkit-flex:1; flex:1;
答案为：A
4.audio元素相关属性
5.实现翻书的效果可以使⽤css3⾥的什么⽅法
rotateY
translateY
scaleY
perspective(n)
正确答案：A
解析：rotateY表⽰将元素沿Y轴旋转；perspective(n)表⽰设置透视效果，即观察点位于屏幕前⽅多远；translateY表⽰沿Y轴移动；scaleY表⽰沿Y轴缩放。
6.根据规范，以下 HTML 和 CSS 代码解析后， container.clientWidth 的值是:
<style>
#container{
width: 200px;
height: 200px;
padding: 20px;
margin: 20px;
border: solide 10px black;
}
</style>
<div id="container">
content
</div>
正确答案：240
解析：
ele.clientWidth = 宽度 + padding //盒⼦内部空间，不包括垂直滚动条，如果有则减去其宽度
ele.offsetWidth = 宽度 + padding + border
ele.scrollTop = 被卷去的上侧距离
ele.scrollHeight = ⾃⾝实际的⾼度（不包括边框）
7.下⾯CSS3新增伪类中不正确的⼀个是？
p:first-of-type
p:only-of-child
p:nth-child(2)
:disabled
正确答案：B
解析：CSS3新增伪类包括
:nth-child()；参数可以是odd(奇数)、even(偶数)、3n+4、3等
:
nth-last-child();
:first-child;
:last-child;
:only-child;
:only-of-type;
:nth-of-type();
update 表名表单伪类---:required(必填)、optional(⾮必填)、
8.下⾯使⽤Animate-timing-function定义的贝塞尔曲线，哪⼀个是先快后慢的
animation-timing-function : cubic-bezier(.22,1.23,.97,.89)
animation-timing-function : cubic-bezier(1.23,..22,97,.89)
程序设计和c语言有区别吗animation-timing-function : cubic-bezier(1.23,.97,.89,.22)
animation-timing-function ：cubic-bezier(.22,.97,.89,1.23)
正确答案：A
解析：贝塞尔函数需要4个参数来计算随时间的变化，这4个参数分别是两对x和y的坐标，分别代表调整曲线的两个控制点。曲线的起点和终点默认是(0,0)、(1,1)。常⽤的四个属性值：linear、ease-in、ease-out、ease-in-out。
9.创建带有id属性的DOM元素有什么副作⽤
会造成DOM树分⽀过多
会增加内存负担
会创建同名的全局变量
正确答案：C
解析：对于DOM树中具有ID的给定HTMLElement，可以使⽤其ID作为变量名来检索div。
10.div元素的哪些CSS属性的默认值为0？
border-top-width
outline-width
padding-top
margin-top
正确答案：C D
解析：border-top-width：默认值medium，定义中等的上边框。outline-width：默认值medium，规定中等的轮廓。
11.基于以下 HTML 结构，以下关于 main1.css 和 main2.css 的描述有哪些是正确的？
<head>
<link href="main1.css"rel="stylesheet">
<link href="main2.css"rel="stylesheet">
</head>
main1.css和main2.css同时开始加载，先加载完成的优先解析
如果main1.css和main2.css中有相同的选择器规则，那么main2.css中的规则将合并main1.css的规则
main2.css只有在main1.css加载并解析后，才开始加载
如果main1.css和main2.css中有相同的选择器规则，那么main2.css中的规则将被忽略
正确答案：A B
解析：link加载是并⾏的，解析是顺序的。script标签才会加载完⼀个，再加载另⼀个。
12.link与@import的区别
link属于HTML标签，⽽@import是css提供的⼀种⽅式；
当页⾯被加载时，link引⽤的css会同时被加载，⽽@import引⽤的css会等到页⾯全部被下载完才会被加载。
@import是CSS2.1提出的，⽼浏览器不⽀持，在IE5以上才能被识别。⽽link⽆限制。
@import不能被dom控制。
13.以下那⼏个标签默认有margin值
body
div
form
img
正确答案：A C D
解析：<h1>- <h6>标签、<dl>标签、<ol>,<ul>标签、<form>标签、<p>标签、<textarea>标签、<select>标签14.不换⾏必须设置哪些项？
word-break
letter-spacing
white-space
word-spacingcheckbox html
正确答案：A C
解析：
word-break属性值：
值描述
normal使⽤浏览器默认的换⾏规则。
break-all允许在单词内换⾏。
keep-all只能在半⾓空格或连字符处换⾏。
值描述
white-space属性值：
值描述
normal默认。空⽩会被浏览器忽略。
pre空⽩会被浏览器保留。其⾏为⽅式类似 HTML 中的<pre> 标签。
nowrap⽂本不会换⾏，⽂本会在在同⼀⾏上继续，直到遇到 <br> 标签为⽌。
pre-wrap保留空⽩符序列，但是正常地进⾏换⾏。
pre-line合并空⽩符序列，但是保留换⾏符。
inherit规定应该从⽗元素继承 white-space 属性的值。
15.有关CSS外边距margin说法错误的是
围绕在元素边框的空⽩区域是外边距
margin设置为auto相当于设置为0
设置外边距会在元素外创建额外的“空⽩”
设置外边距使⽤ margin 属性，可以接受任何长度单位、百分数值甚⾄负值。
正确答案：Bhtml个人网页完整代码顺序
解析：margin auto是⾃动根据剩余的长度居中对齐，并不是0。
16.以下哪个css的属性能让⼀个标签div超过它的⽗节点时隐藏不显⽰
Display
overflow
hidden
clear
正确答案：B
解析：overflow是属性名，hidden是属性值。
17.下列哪些元素在浏览器默认样式下会加粗⽂本？processing鼠标跟随
h1
caption
em
th
正确答案：A D
解析：A：<h1> - <h6>标签表⽰ HTML 标题，默认加粗；B：<caption> 标签表⽰表格标题，标题⼀般被居中表格之上，但不加粗⽂本；C：<em>标签表⽰强调内容，显⽰为斜体，但不加粗⽂本；D：<th> 标签表⽰表格的表头，默认加粗⽂本
18.CSS盒⼦模型中（）是透明的，这部分可以显⽰背景
border
margin
padding
content
正确答案：C
19.哪个 HTML5 元素⽤于显⽰已知范围内的标量测量？
<gauge>
<range>
<measure>
<meter>
正确答案：D
解析：<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。<meter>标签不应⽤于指⽰进度（在进度条中）。如果标记进度条，使⽤<progress> 标签。
20.使⽤什么可以实现css3动画效果
keyframes
transition
transform
rotate3d
正确答案：A
解析：CSS3的属性： transform（转换）：改变元素形状、尺⼨和位置； transition（过渡）：元素从⼀种样式逐渐改变为另⼀种的效果； animation（动画）：通过CSS3的@keyframes（关键帧）规则，可以创建动画； rotate（deg）：旋转给定的⾓度，正值为顺时针，负值为逆时针
21.下列说法正确的有
visibility:hidden；所占据的空间位置仍然存在，仅为视觉上的完全透明；
display:none；不为被隐藏的对象保留其物理空间；
visibility:hidden；与display:none；两者没有本质上的区别；
visibility:hidden；产⽣reflow和repaint（回流与重绘）；
正确答案：A B
解析：display是dom级别的，可以渲染和重绘。 visiblity不是dom级别的，不能重绘，只能渲染。
22.关于Bootstrap的说法
为<table>标签添加.table类可以给表格添加⽔平分割线
给表格添加table-striped类可以使IE8中的表格出现斑马线
为表格添加table-bordered类可为表格中每个元素增加边框
为表格添加table-hover类可为表格中增加⿏标悬停样式
正确答案：A C D
解析：
类名样式
.table为任意< table> 添加基本样式 (只有横向分隔线)
.table-striped在 <tbody>内添加斑马线形式的条纹 ( IE8 不⽀持)
.table-bordered为所有表格的单元格添加边框
.
table-hover在 <tbody> 内的任⼀⾏启⽤⿏标悬停状态
.table-condensed让表格更加紧凑
23.下列关于背景定位属性background-position说法正确的是
该属性可有两个取值，第⼀个取值为背景图像与其容器在⽔平⽅向上的距离，第⼆个取值为背景图像与其容器在垂直⽅向上的距离
若只有⼀个取值，则其第⼆个取值默认为50%
若此取值⽤百分数表⽰，如：20% 60%，则表⽰此背景图像离其容器左边的距离为整个容器宽度的20%，离容器上边的距离为整个容器⾼度的60%
若属性取值⽤left、center、right、top、bottom表⽰，则该属性取值的顺序可以颠倒，否则其取值顺序不能颠倒
正确答案：A B D
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论