【CSS】前端笔试题总结

1.CSS3 background-clip & box-sizing

【网易2016内推笔试题】

<div class="box"></div>
.box{
    box-sizing:border-box;
    width:100px; height:100px; padding:10px;
    background-color:red;
    background-clip:content-box;
}
问：红色区域为多宽？

【解析】
由于box-sizing:border-box; 总宽width为100px;padding为10px;
则内容为100-10*2=80px;
background-clip:content-box;则只有内容区域有红色背景，即为80px。

知识点：

①CSS3 background-clip 属性：规定背景的绘制区域。

【语法】

background-clip: border-box(默认)|padding-box|content-box;

border-box：(默认)背景被裁剪到边框盒。（正常情况）
padding-box：背景被裁剪到内边距框。
content-box：背景被裁剪到内容框。（只有内容content/width才有背景）

【图示】

②CSS3 box-sizing 属性：允许以特定的方式定义匹配某个区域的特定元素。

【语法】

box-sizing: content-box(默认)|border-box|inherit;

• content-box：(默认) 宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。(标准盒模型)
• border-box：为元素设定的宽度和高度决定了元素的边框盒。即为元素指定的任何内边距padding和边框border都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
• inherit：规定应从父元素继承 box-sizing 属性的值。

2.CSS3 结构性伪类选择器

【网易2016内推笔试题】

下面哪个是错误的？
A.li:nth-of-child(1)     //×,应为nth-child(1)
B.li:nth-of-type(1)      //见③
C.li:nth-last-child(1)   //见②
D.li:nth-last-of-type(1) //见④

知识点：

①nth-child(n)

用来定位某个父元素的一个或多个特定的子元素(顺序)。

　　其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

【经验与技巧】

当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示：

②nth-last-child(n)

从某父元素的最后一个子元素(逆序)开始计算，来选择特定的元素。与前面的“:nth-child(n)”选择器非常的相似。

③nth-of-type(n)选择器

:nth-of-type(n)选择器和:nth-child(n)选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素(顺序)。

在:nth-of-type(n)选择器中的n和:nth-child(n)选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

④nth-last-of-type(n)选择器

:nth-last-of-type(n)选择器和:nth-of-type(n)选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始(逆序)，而且它的使用方法类似于上节中介绍的:nth-last-child(n)选择器一样。

3.CSS3 display:flex伸缩布局 & float

【网易2016内推笔试题】
试题一：
<div class="parent">
    <div class="a">X</div>
    <div class="b">Y</div>
</div>

问：下面哪个可以使X,Y水平排列，且X在Y左边？ ABCD
A.parent{display:flex;} 
B.a{float:left;}
C.a,.b{display:inline-box;}
D.a{float:left;} .b{width:100%;} 

试题二：
<div class="box"></div>

问：以下哪个使div的宽度为0？ BCD
A.box{display:flex;}      /* 屏幕宽度*0 */
B.box{float:left;}        /* 0*0 */
C.box{position:absolute}  /* 0*0 */
D.box{display:inline;}    /* 0*18 */
注：box没有样式时，为屏幕宽度*0。

知识点：

①Flexbox布局

　　即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。
　　可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。
　　Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。
　　
综合而言，Flexbox布局功能主要具有以下几点：
1. 屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
2. 可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
3. 可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
4. 可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
5. 可以控制元素在页面上的布局方向；
6. 可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

详见CSS3 Flex布局—慕课网

4.CSS3 text-overflow & white-space

【网易2016内推笔试题】

<p>这是一段长度超过P元素的文字</p>
p{width:100px; white-space:nowrap;}

问：添加哪个会使得超出的部分变成省略号“…”？ BD
A.white-space:normal
B.overflow:hidden
C.overflow:auto
D.text-overflow:ellipsis

知识点：

① text-overflow实现省略号效果

text-overflow用来设置是否使用一个省略标记（…）标示对象内文本的溢出。

【语法】

❤text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），代码如下：

text-overflow:ellipsis; 
overflow:hidden;    /*溢出内容为隐藏*/
white-space:nowrap; /*强制文本在一行内显示，直到遇到 <br> 标签为止。*/