H5/CSS 笔试面试考题（101-110）

101. 简述下列哪些元素在浏览器默认样式下会加粗文本 （ ）
     A：h1
     B：caption
     C：em
     D：th
     面试通过率：50.0%
     推荐指数： ★★★★ 试题难度： 初级 试题类型： 选择题
     答案：a、d

html.css
h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67__qem;
    margin-block-end: 0.67em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold
}
th {
    font-weight: bold;
    text-align: -internal-center
}
// 文本加粗font-weight: bold
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

102. 简述下面有关 CSS 选择器的说法错误的是（ ）
     A：.intro — 选择 class=“intro” 的所有元素。
     B：#firstname — 选择 id="firstname"的元素。
     C：div>p — 选择所有

     元素和所有

     元素
     D：p — 选择所有

     元素
     面试通过率：76.0%
     推荐指数： ★★★★ 试题难度： 初级 试题类型： 选择题
     答案：c 注：div>p --- 选择所有

     元素下的

     元素

103. 简述下面关于 CSS 布局的描述，不正确的是 （ ）
     A：块级元素实际占用的宽度与它的 width 属性有关；
     B：块级元素实际占用的宽度与它的 border 属性有关；
     C：块级元素实际占用的宽度与它的 padding 属性有关；
     D：块级元素实际占用的宽度与它的 background 属性有关。
     面试通过率：61.0%
     推荐指数： ★★★★ 试题难度： 中级 试题类型： 选择题
     答案：d

104. 简述Canvas 能够使用___绘制 2D 图形 ( )
     A：XML
     B：HTML
     C：JavaScript
     D：XHTML
     面试通过率：69.0%
     推荐指数： ★★ 试题难度： 初级 试题类型： 选择题
     答案：c

105. 简述使用 CSS 的 flexbox 布局，不能实现以下哪一个效果 ( )
     A：三列布局，随容器宽度等宽弹性伸缩
     B：多列布局，每列的高度按内容最高的一列等高
     C：三列布局，左列宽度像素数确定，中、右列随容器宽度等宽弹性伸缩
     D：多个宽高不等的元素，实现无缝瀑布流布局
     面试通过率：73.0%
     推荐指数： ★★★★ 试题难度： 初级 试题类型： 选择题
     答案：d

106. 简述关于 CSS 的单位，以下说法错误的是 ( )
     A：百分比单位始终根据父元素相应值来计算
     B：vw、vh、em、rem 都是相对单位
     C：90deg 表示顺时针旋转 90 度
     D：1s = 1000ms
     面试通过率：54.0%
     推荐指数： ★★★ 试题难度： 初级 试题类型： 选择题
     答案：a

107. 简述如何使用 CSS 选择器定义某个父元素中所有第「奇数」个子元素的样式 ( )
     A：nth-child(odd)
     B：nth-child(even)
     C：nth-of-type(odd)
     D：nth-of-child(even)
     面试通过率：67.0%
     推荐指数： ★★★ 试题难度： 初级 试题类型： 选择题
     答案：a

108. 简述 以下哪个 CSS 属性是继承属性（inherited）( )
     A：vertical-align
     B：background-color
     C：text-indent
     D：justify-content
     面试通过率：52.0%
     推荐指数： ★★★★★ 试题难度： 初级 试题类型： 选择题
     答案：c

109. 简述下列说法错误的是 ( )
     A：在 Blink 和 WebKit 的浏览器中，某个元素具有 3D 或透视变换（perspective transform）的 CSS 属性，会让浏览器创建单独的图层。
     B：我们平常会使用 left 和 top 属性来修改元素的位置，但 left 和 top 会触发重布局，取而代之的更好方法是使用 translate，这个不会触发重布局。
     C：移动端要想动画性能流畅，应该使用 3D 硬件加速，因此最好给页面中的元素尽量添加 translate3d 或者 translateZ(0) 来触发 3D 硬件加速。
     D：解决浏览器渲染的性能问题时，首要目标就是要避免层的重绘和重排
     面试通过率：62.0%
     推荐指数： ★★★★ 试题难度： 中级 试题类型： 选择题
     答案：c

110. 简述下面使用 Animate-timing-function 定义的贝塞尔曲线，哪一个是先快后慢的 ( )
     A：animation-timing-function :
     cubic-bezier(.22, 1.23, .97, .89)
     B：animation-timing-function :
     cubic-bezier(1.23, .22, 97, .89)
     C：animation-timing-function :
     cubic-bezier(1.23, .97, .89, .22)
     D：animation-timing-function ：
     cubic-bezier(.22, .97, .89, 1.23)
     面试通过率：55.0%
     推荐指数： ★★★★ 试题难度： 中级 试题类型： 选择题
     答案：a
     

css3过渡动画速率用到的是三阶贝塞尔曲线，曲线有四个点，p0，p1，p2，p3,红点对应p1, 绿点对应p2
上图是符合条件的曲线，红点和绿点的坐标对应着cubic-bezier(x1, y1, x2, y2)
由图可知，左下角的直线斜率大于1，右上角的直线斜率小于1，拿a选项为例，k1 = 1.23/0.22 = 5.59 > 1
k2 = 0.89/0.97 = 0.91 < 1，通过计算ABCD选项，只有a选项符合条件
注：x1和x2的范围在0-1之间，否则无效

下面摘自：https://www.cnblogs.com/tenfly/p/11559845.html
其中p0(0,0)，p3(1,1)是固定点，p1(x1,y1)，p2(x2,y2)是操作点；
依次连接p0p1p2p3，假设p0p1上有一动点A，p1p2上有一动点B，p2p3上有一动点C，有p0A/p0p1=p1B/p1p2=p2C/p2p3=t
确定A,B,C点后,依次连接ABC,假设AB上有一动点E，BC上有一动点F，有AE/AB=BF/BC=t
确定E,F点后，依次连接EF，假设EF上有一动点P，有EP/EF=t
1
2
3
4
5
6
7
8
9
10
11