前端程序员面试分类真题8

前端程序员面试分类真题8一、单项选择题1.

下面关于Bootstrap的描述中，错误的是______A.Bootstrap是一种前端类库B.Bootstrap给元素配置了合适的ARIA属性C.Boo（江南博哥）tstrap提供了栅格系统D.Bootstrap实现了响应式布局正确答案：A[考点]预处理器和框架[解析]Bootstrap是目前比较流行的前端框架，它不是类库，它由Twitter公司设计，在2011年8月开源。除了选项A之外，其余3个选项对Bootstrap的描述都正确。

2.

Bootstrap中的类前缀.col-xs-适用的屏幕是______A.超小屏幕(＜768px)B.小屏幕(≥768px)C.中等屏幕(≥992px)D.大屏幕(≥1200px)正确答案：A[考点]预处理器和框架[解析]小屏幕使用的类前缀是.col-sm-；中等屏幕使用的类前缀是.col-md-；大屏幕使用的类前缀是.col-lg-。

3.

在下面的CSS类中，能变成Bootstrap提供的默认输入框样式的是______A..form-horizontalB..form-controlC..form-groupD..form-inline正确答案：B[考点]预处理器和框架[解析]除了选项B之外，其他3个选项中的CSS类都用于控制表单的排列。选项A中的.form-horizontal表示水平排列；选项C中的.form-group表示垂直排列；选项D中的.form-inline表示内联排列。

4.

在多列布局中，可让元素跨列的属性是______A.column-countB.column-gapC.column-ruleD.column-span正确答案：D[考点]布局[解析]多列布局是CSS3新增的功能，这里的多列主要针对的是文本。以上4个选项都是多列布局的属性。其中选项A中的column-count可指定允许的最大列数；选项B中的column-gap可指定列与列之间的间隔；选项C中的column-rule可指定列的边框。

5.

在下面的属性中，能让伸缩容器中的子元素沿主轴对齐的是______A.align-itemsB.align-selfC.align-contentD.justify-content正确答案：D[考点]布局[解析]选项A、选项B和选项C中的属性都用于侧轴对齐。align-items属性控制容器中所有子元素的对齐方式；align-self属性只能控制一个子元素的对齐方式；align-content属性只有在多行的时候才会有效果。

二、填空题1.

执行下面的代码后，p元素的字体颜色是______。

＜metahttp-equiv="Default-Style"content=="red"/＞

＜styletitle="red"＞

p{

color:red;

}

＜/style＞

＜styletitle="blue"＞

p{

color:blue;

}

＜/style＞正确答案：red[考点]HTML元素元数据[解析]在上面的代码中，为两段内嵌样式定义了title属性(即为该样式表命名)，可用于设置首选样式表。由于在meta元素中把名为red的样式表设为了首选样式表，因此p元素中的文本将会显示为红色。

2.

table元素的colspan属性可用于______，rowspan属性可用于______。正确答案：合并列、合并行[考点]HTML元素表单和表格[解析]table元素有两个特殊的属性：colspan和rowspan。colspan属性可合并列，rowspan属性可合并行，通过这两个属性可制作出不规则的表格。

3.

下面的div元素，在W3C盒模型中的宽度是______px，在IE盒模型中的宽度是______px。

div{

padding:10px;

margin:10px;

border:1pxsolid#000;

width:100px;

}正确答案：122、100[考点]视觉格式模型[解析]IE盒模型中内容的宽或高将会包含内边距和边框，题目中div元素的宽度为100px，那么IE盒模型中的宽度也是100px。而W3C盒模型中内容的宽或高并不会包含内边距和边框，如果要获取W3C盒模型的宽度，那么需要把内容的宽度、内边距以及边框相加，在此题中得到的结果是122px。

4.

两个相邻的兄弟元素，分别定义下外边距和上外边距，如以下代码所示，此时两个元素之间的间隔是______px。

＜divstyle="margin-bottom:20px"＞兄弟元素＜/div＞

＜divstyle="margin-top:10px"＞兄弟元素＜/div＞正确答案：20[考点]视觉格式模型[解析]由于两个元素之间发生了外边距塌陷，所以此时下外边距和上外边距会合并在一起。并且因为两个属性设置的都是正数，所以两个元素之间的间隔就是其中的较大值。

5.

执行下面的代码后，ul元素的高度是______px。

＜style＞

li{

width:100px;

height:100px;

}

＜/style＞

＜ulstyle="overflow:hidden"＞

＜listyle="float:left"＞＜/li＞

＜/ul＞正确答案：100[考点]视觉格式模型[解析]虽然ul元素包含一个浮动的子元素，但因为创建了BFC，所以不会引起ul元素的高度塌陷，它的高度就是li元素的高度。

6.

执行下面的代码后，第一个div元素和p元素之间的间距是______px。

＜style＞

.section{

width:100px;

height:100px;

background:#FFCC00;

}

＜/style＞

＜divclass="section"＞＜/div＞

＜divstyle="margin-top:10px;overflow:hidden"＞

＜pstyle="margin-top:10px"class="section"＞＜/p＞

＜/div＞正确答案：20[考点]视觉格式模型[解析]第二个div元素在创建BFC后，就能避免外边距塌陷，阻止div元素和p元素的上外边距合并在一起。此时第一个div元素和p元素之间的间距就是20px。

7.

执行下面的代码，p元素最终的字体颜色是______

p{

color:red!important;

color:blue;正确答案：red[考点]选择器和层叠[解析]将样式标记为重要(在声明的分号之前插入“!important”)，就能立刻提升权重，改变层叠次序。如果重要声明和非重要声明发生冲突，那么胜出的永远是重要声明。

8.

执行下面的代码，p元素最终的字体颜色是______。

＜style＞

.bfcp{

color:#FCO;

}

.ovhp{

color:#F60;

}

＜/style＞

＜divclass="bfcovh"＞

＜p＞文字颜色＜/p＞

＜/div＞正确答案：#F60[考点]选择器和层叠[解析]当重要性和特殊性都相同的时候，选择器在样式表中所处的位置决定权重，越是在后面，权重越高。在上面的代码中，两组选择器的特殊性相同，但由于.ovh排在.bfc后面，.bfc中的声明将会被覆盖。

9.

假设视口的宽是70px，高为50px，执行下面的代码后，div元素的宽为______px，高为______px。

＜style＞

section{

margin:6px;

}

sectiondiv{

width:50vw;

height:50vh;

}

＜/style＞

＜section＞

＜div＞＜/div＞

＜/section＞正确答案：35、25[考点]值和单位[解析]50vw等于视口宽度的50%，50vh等于视口高度的50%。虽然section元素有6px的外边距，但不会影响子元素div宽和高的计算，它们的计算结果分别为35px和25px。

10.

假设视口的宽是50px，高为70px，执行下面的代码后，div元素的宽为______px，高为______px。

div{

width:10vmax;

height:10vmin;

}正确答案：7、5[考点]值和单位[解析]如果将视口的宽和高均分为100份，那么vmax会取较大的百分之一，而vmin会取较小的百分之一。

11.

执行下面的代码后，p元素的字体大小为______。

＜style＞

section{

font-size:32px;

}

section＞div{

font-size:50%;

}

＜/style＞

＜section＞

＜div＞

＜p＞文字说明＜/p＞

＜/div＞

＜/section＞正确答案：16px[考点]值和单位[解析]div元素的字体大小是一个百分数，它会和继承而来的字体大小相乘得到真实的字体大小，计算后的结果为16px。由于p元素会继承div元素的字体大小，因此它的字体大小也是16px。

12.

执行下面的代码后，p元素的left属性值为______px，top属性值为______px。

＜style＞

div{

width:200px;

height:100px;

position:relative;

}

divp{

position:absolute;

left:50%;

top:50%;

}

＜/style＞

＜div＞

＜p＞＜/p＞

＜/div＞正确答案：100、50[考点]值和单位[解析]定位(position)用于将元素摆放在某个位置，参照的是元素的包含块。四个偏移属性分为两组，left和right参照的是包含块的宽度，bottom和top参照的是包含块的高度。如果元素的position属性为absolute，那么它的包含块就是离它最近的position不为static的祖先元素的内容区域。根据刚刚的规则能够得知，p元素的包含块是div元素的内容区域，因此p元素的偏移值会参照div元素的宽高来计算。

13.

执行下面的代码，p元素经过计算后的margin为______px，padding为______px。

div{

width:200px;

height:100px;

}

div＞p{

margin:10%;

padding:10%;

}正确答案：20、20[考点]值和单位[解析]外边距(margin)和内边距(padding)参照的都是包含块的宽度，注意，上下边距并没有参照包含块的高度。在上面的代码中，div元素是p元素的包含块，p元素的margin和padding属性都会参照div元素的宽度计算。经过计算后，p元素的margin和padding属性值都是20px。

14.

执行下面的代码，div元素经过计算后，水平位移______px，垂直位移______px。

div{

width:200px;

height:100px;

padding:10px;

transform:translate(50%,50%);

}正确答案：110、60[考点]值和单位[解析]位移(translate)是CSS3新增的功能，元素可进行水平或垂直位移，水平方向参照的是元素的宽度，垂直方向参照的是元素的高度。HTML元素默认都是W3C盒模型，因此如果元素有内边距(padding)或边框(border)，那么在计算时还要包含这两个属性值。上面代码中的两个百分数参照的两个值分别为220px和120px，经过计算后的位移值分别是100px和60px。

15.

执行下面的代码，经过计算后，p元素的真实行高为______px。

div{

font-size:18px;

line-height:14px;

}

divp{

line-height:50%;

}正确答案：9[考点]值和单位[解析]行高(line-height)参照的是元素自身的字体大小(font-size)，p元素自身没有定义字体，需要从父元素div中继承，继承过来的值为18px，再与50%相乘后，可以得到p元素的最终行高，这个值就是9px。

三、简答题1.

用CSS中的定位实现元素的水平居中。正确答案：要水平居中的元素通常会被定义为绝对定位或固定定位，如果是绝对定位，那么容器将被定义为相对定位，作为元素的包含块；如果是固定定位，那么元素相对视口(此时视口为包含块)居中。由于使用这两种定位后，元素会脱离正常流，所以容器需要固定高度，避免高度塌陷导致后面的元素挤上来。这种方法通常要先将定位元素从包含块的左边界向右偏移50%的距离(也就是容器一半宽度的距离，代码如下所示)，再反向偏移元素一半宽度的距离，最后实现居中。

＜divstyle="position:relative;height:100px"＞

＜sectionstyle="position:absolute;left:50%"＞＜/section＞

＜/div＞

按下来用两种方式实现效果，分别是外边距和位移。

如果定位元素的宽度已定义，那么可以用负外边距来实现反向偏移，例如宽度是40px，左外边距设为负的二分之一宽度(也就是-20px)，如下所示。

section{

width:40px;

margin-left:-20px;

}

如果定位元素的宽度未知，那么就不能用外边距，而是用CSS3新增的位移，在水平方向反向位移50%(代码如下所示)，水平位移中的百分数参照的是自身宽度，所以50%就是元素宽度的一半。

section{

transform:translateX(-50%);

}[考点]布局

2.

用CSS中的表格盒类型(即把display属性设为表格相关的盒类型)实现元素的垂直居中。正确答案：用CSS模拟的表格除了包含表格元素的普通规则之外，还拥有特殊规则。它能够以匿名方式创建缺少的表格元素，例如单元格本来必须在表格行(tr)之内，而在模拟的表格中，将元素调整为单元格(使用盒类型table-cell)后，不用把父元素变为表格行(使用盒类型table-row)，浏览器会自动创建出表格行，如下所示。

＜divstyle="display:table"＞

＜pstyle="display:table-cell;vertical-align:middle"＞垂直居中＜/p＞

＜/div＞[考点]布局

3.

用伸缩盒实现子元素的水平和垂直居中。正确答案：当普通容器被调整为伸缩容器后，如果要让里面的子元素水平居中，那么就相当于主轴的居中对齐，代码如下所示。

＜divstyle="display:flex;justify-content:center"＞

＜section＞＜/section＞

＜/div＞

在伸缩容器中，子元素垂直居中，相当于侧轴的居中对齐，如下所示。

＜divstyle="display:flex;align-items:center"＞

＜section＞＜/section＞

＜/div＞[考点]布局

4.

如何让一个浮动中的元素水平居中?正确答案：浮动元素通常会在水平方向上往左或往右移动，如果要居中，首先需要往反方向偏移一定距离。元素的偏移可以用相对定位和偏移属性实现，代码如下所示。如果容器和浮动元素的宽度都已定义，那么偏移距