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

时间：2024-03-03 17:06:54
  1. 简述下列哪些元素在浏览器默认样式下会加粗文本 （ ）
    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. 简述下面有关 CSS 选择器的说法错误的是（ ）
    A：.intro — 选择 class=“intro” 的所有元素。
    B：#firstname — 选择 id="firstname"的元素。
    C：div>p — 选择所有<div>元素和所有<p>元素
    D：p — 选择所有<p>元素
    面试通过率：76.0%
    推荐指数： ★★★★ 试题难度： 初级 试题类型： 选择题
    答案：c 注：div>p --- 选择所有<div>元素下的<p>元素

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

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

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

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

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

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

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

  9. 简述下面使用 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

相关文章