【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 :

【CSS】【面试题】牛客网CSS专项练习部分答案及解析（更新中...）相关推荐

python简单实践作业答案_python入门实践四：爬取牛客网面试专项练习题及答案
说明:个人练手python用. 操作系统:window10 x64 IDE:Pycharm 2017.2.2 Python版本:3.6.2 目标牛客网是一个IT笔试面试的平台,提供了很多题库,今天我 ...
牛客网-Java专项练习11
牛客网-Java专项练习11 1.关于抽象类和接口叙述正确的是? ( ) A.抽象类和接口都能实例化的 B.抽象类不能实现接口 C.抽象类方法的访问权限默认都是public D.接口方法的访问权限默认 ...
c++华为面试题--牛客网-2.0
虽然现在才研一,但感觉做项目之余还是很有必要去做一些面试题的,怎么说呢,这样可以巩固下基础,毕竟自己的工作可能还是偏一些算法会导致有些地方注意不到. 好,来看这题: 描述: 输入一个整数,将这个整数以 ...
牛客网java专项练习错题集--1
1.有关hashMap跟hashTable的区别,说法正确的是?(ABCD) A HashMap和Hashtable都实现了Map接口 B HashMap是非synchronized,而Hashta ...
【牛客刷题】游戏行业通识（更新中）
刷题日期记录 [2023.2.9]搜狐畅游2019校招笔试题-技术美术 1 金庸小说下面()不是金庸撰写的小说?_搜狐畅游笔试题_牛客网 (nowcoder.com) 居然问这个kkk不愧是游戏题, ...
牛客网SQL题目全部通过答案
SQL1 查找最晚入职员工的所有信息 select * from employees where hire_date=(select max(hire_date) from employees); S ...
牛客网JAVA专项联系共899题--个人记录学习经历
总览共刷900题其中也有许多知识点是未曾涉足的,但大部分还是java的基础. 基本数据正确题数:正确率百分之67,即:对了603题: 时间:5天(每天4小时左右) 错题: 收藏数目: 短板 JV ...
【牛客网动态规划专项】DP12 龙与地下城游戏问题
题目描述解题思路备忘录 dp是一个与map相同大小的矩阵: dp[i][j]:从map[i][j]出发走到map[n-1][m-1](终点)所需的最少初始血量原问题解:dp[0][0] 状态转移 ...
牛客网面经题题目及答案总结-计算机网络篇
1.计算机网络分哪几层? OSI.TCP/IP TCP/IP结构对应OSI TCP/IP OSI 应用层应用层表示层会话层主机到主机层(TCP)(又称传输层) 传输层网络层(IP)(又称互 ...
牛客网日刷30题错题解析
1.已知一棵完全二叉树的第 6 层(设根为第 1 层)有 8 个叶结点,则该完全二叉树的结点个数最多是 ? 我选的是39,正确答案为111.错点在于我理解的该树深度为6的情况,忽略了深度为7的情况,其 ...