BFC知识点考核

1. 下面对BFC解释错误的是

• A: Block formatting context直译为"块级格式化上下文"。它是一个独立的渲染区域只有Block-level box参与 它规定了内部的Block-level Box如何布局并且与这个区域外部毫不相干。
• B: BFC它决定了元素如何对其内容进行定位以及与其它元素的关系和相互作用当涉及到可视化布局时Block Formatting Context提供了一个环境HTML在这个环境中按照一定的规则进行布局。
• C: 页面整个渲染区域只有1个BFC决定了所有元素将如何定位以及元素的关系和相互作用。

答C

页面可以有多个BFC渲染区域。

2. 下面哪个不会触发BFC

• A: overflow: hidden
• B: float: left
• C: position: absolute
• D: position: relative

答D

position为absolute、fixed

3. 下面哪个不是BFC的规则

• A: 内部的Box会在垂直方向一个接一个地放置(即块级元素独占一行)
• B: BFC的区域不会与float box重叠
• C: 内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• D: 计算BFC的高度时浮动元素不会参与计算
• E: BFC就是页面上的一个隔离的独立容器容器里面的子元素不会影响到外面的元素。反之也如此

答D

计算BFC的高度时浮动元素也参与计算。清除浮动。

4. 下面哪个不是BFC特性

• A: BFC会阻止垂直外边距折叠
• B: BFC能处理父子元素margin重叠
• C: BFC会重叠浮动元素
• D: BFC可以清除浮动

答C

BFC不会重叠浮动元素可以创造自适应两栏布局

5. displaytable也认为可以生成BFC其实这里的主要原因在于Table会默认生成一个匿名的table-cell正是这个匿名的table-cell生成了BFC。请判断本项叙述是否正确

• A: 是
• B: 否

答A

displaytable也认为可以生成BFC其实这里的主要原因在于Table会默认生成一个匿名的table-cell正是这个匿名的table-cell生成了BFC。

6. CSS3中的盒模型说法错误的是

• A: 盒模型是由内容(content)、内边距(padding)、边框(border)、外边距(margin) 组成的。
• B: 最常用的是标准盒子模型通过设置 box-sizing: content-box标准盒模型的宽高是指content 区宽高。
• C: box-sizing: border-box也就是怪异盒子模型width 和 height 指的是盒子大小并不是内容大小
• D: box-sizing: border-box也就是标准盒子模型width 和 height 指的是盒子大小并不是内容大小

答D

7. 前端响应式布局说法错误的是

• A: 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。
• B: 传统的开发方式是PC端开发一套手机端再开发一套而使用响应式布局只要开发一套就够缺点就是CSS比较重。
• C: CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式当重置浏览器窗口大小的过程中页面也会根据浏览器的宽度和高度重新渲染页面。
• D: 移动端优先首先使用的是max-widthPC端优先使用的min-width。

答D

移动端优先首先使用的是max-widthPC端优先使用的min-width。

8. 关于水平居中说法错误的是

• A: 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中
• B: 若是块级元素, 该元素设置 margin:0 auto即可.
• C: 使用flexjustify-item: center;即可水平居中。

答C

justify-content:center

9. 下面说法是否正确。使用CSS3中新增的transform属性即可水平居中.son{position:absolute; left:50%;transform:translate(-50%,0);}

• A: 正确
• B: 错误

答A

10. 关于垂直居中下列说法错误的是

• A: 若元素是单行文本, 则可设置 line-height 等于父元素高度
• B: 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央
• C: 可用 transform , 设置父元素相对定位(position:relative),
• D: 浮动布局可以实现垂直居中

答D

浮动布局不可实现垂直居中

11. 关于移动端适配说法错误的是

• A: 视口(viewport)代表当前可见的计算机图形区域。在Web浏览器术语中通常与浏览器窗口相同但不包括浏览器的UI 菜单栏等——即指你正在浏览的文档的那一部分。
• B: 一般配置视口的方式为<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
• C: user-scalable设置为no 可以解决移动端点击事件延迟问题
• D: rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准当页面的size发生变化时font-size基准大小不变。

答D

rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准当页面的size发生变化时font-size基准会按比例大小发生改变使得页面元素根据rem基准值同比例缩放