【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代码和图片资源，最后才执行页面中的JavaScript代码
(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();
表单伪类--- :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)
animation-timing-function :