css面试题二

梧桐茶
85 阅读8分钟

8. 谈谈你对 BFC 的理解？

什么是 BFC：

BFC 的全称是 Block Formatting Context，块级格式化上下文。这是一个用于在盒模型下布局块级盒子的独立渲染区 域，

将处于BFC区域内和区域外的元素进行互相隔离。

何时会形成 BFC：

满足下列条件之一就可触发BFC：

  • HTML根元素
  • position 值为 absolute 或 fixed
  • flfloat 值不为 none
  • overflflow 值不为 visible
  • display 值为 inline-block 、 table-cell 或 table-caption

BFC 的应用场景：

1. 场景一：防止两个相邻块级元素的上下 margin 发生重叠 (上下margin合并问题)

属于同一 BFC 的, 两个相邻块级子元素的上下 margin 会重叠，如果想让它们不重叠，可通过让这两个相邻块级子元 素分属于不同的BFC。

以下示例代码中的两个盒子的上下外边距会重合（即它们都设置了10px的外边距，我们期望它们之间的间距是 20px，但实际效果却只有 10px）：

<style>
.box1 {
    width: 200px;
    height: 100px;
    background-color: red;
    margin-bottom: 10px; /* 下外边距为 10px */
}

.box2 {
    width: 200px;
    height: 100px;
    background-color: green;
    margin-top: 10px; /* 上外边距为 10px */
}
</style>
<div class="box1"></div>
<div class="box2"></div>

图片.png 下面我们让其中一个盒子触发BFC，从而达到间隔 20px 的期望效果：

.box2 {
    width: 200px;
    height: 100px;
    background-color: green;
    margin-top: 10px;
    display: inline-block; /* 通过设置 display 为 inline-block 可以触发 BFC */
}

图片.png

2. 场景二：清除浮动

以下示例代码中， 容器元素 box1 的高度会没有高：

<style>
.box1 {
    width: 200px;
    background-color: red;
}

.box2 {
    float: left;
    background-color: green;
}
</style>
<div class="box1">
    <div class="box2">Hello,world</div>
    <div class="box2">Hello,world</div>
    <div class="box2">Hello,world</div>
</div>

而通过为 box1 添加 BFC 触发条件，可以让它的高度变回正常状态：

.box1 {
    width: 200px;
    background-color: red;
    overflow: hidden;
}

3. 场景三：实现自适应布局, 防止元素被浮动元素覆盖(左边固定, 右边自适应)

以下示例中，box2 会被设置了浮动的 box1 覆盖：

<style>

.box1 {
    float: left;
    width: 300px;
    background-color: red;
    height: 400px;
}

.box2 {
    background-color: blue;
    height: 600px;
}

</style>
<div class="box1"></div>
<div class="box2"></div>

图片.png

要避免这种覆盖行为，可以让 box2 触发 BFC, 实现布局效果, 左边固定右边自适应：

.box2 {
    background-color: blue;
    height: 600px;
    overflow: hidden; /* 将 overflow 设置为非 visible 值可触发 BFC */
}

图片.png

9. 什么是CSS Sprites以及它的好处？

考察: 性能优化的方案

CSS Sprites，俗称雪碧图、精灵图。这是一种CSS图片合并技术，就是将CSS中原先引用的一些较小的图片，合并成 一张稍大的图片后再引用的技术方案。它可以减少请求多张小图片带来的网络消耗（因为发起的HTTP请求数变少 了），并实现提前加载资源的效果。

操作方式：

可以手工使用图片编辑软件（如Photoshop），将多张小图片合并编辑变成一张大图片，并针对这张大图片，编写 CSS样式来引用这张大图片中对应位置的小图片（涉及到的样式：background-image、background-position、 background-size）。然后在HTML元素中使用这些样式即可。

img.alicdn.com/tfs/TB1eiXT…

缺点：

  • CSS Sprites中任意一张小图的改动，都需要重新生成大图；并且用户端需要重新下载整张大图，这就降低了浏览器缓存的优势

  • 随着HTTP2的逐渐普及，HTTP2的多路复用机制可以解决请求多个小图片所创建多个HTTP请求的消耗，让CSS Sprites存在的价值降低了

  • 图片如果放大, 是会失真

目前其他主流的处理图片的方案: iconfont 字体图标, svg矢量图.

10. 你对媒体查询的理解是什么样的？

考察点: 响应式适配, 根据不同的屏幕尺寸, 显示不同的效果 (设置盒子的样式)

媒体查询是自 CSS3 开始加入的一个功能。它可以进行响应式适配展示。

媒体查询由两部分组成：

  • 一个可选的媒体类型（如 screen、print 等）
  • 零个或多个媒体功能限定表达式（如 max-width: 500px、orientation: landscape 等） 这两部分最终都会被解析为 true 或 false 值，然后整个媒体查询值为 true，则和该媒体查询关联的样式就生效，否 则就不生效。

使用示例：

/* 在css样式表的定义中直接使用媒体查询 */
.container {
    width: 600px;
    height: 200px;
    background-color: pink;
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .container {
    width: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .container {
    width: 750px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .container {
    width: 980px;
    }
}

@media screen and (min-width: 1200px) {
  .container {
    width: 1170px;
    }
}

@media screen and (width: 1200px) {
  .container {
    background-color: skyblue;
    }
}

11. 你对盒子模型的理解是什么样的？

浏览器的渲染引擎在对网页文档进行布局时，会按照 “CSS 基础盒模型” （CSS Basic Box Model）标准，将文档中的 所有元素都表示为一个个矩形的盒子，再用 CSS 去决定这些盒子的大小尺寸、显示位置、以及其他属性（如颜色、 背景、边框等）。

下图就是盒模型示意图，它由几部分组成：

  • 内容（content）
  • 内边距（padding）
  • 边框（border）
  • 外边距（margin）

图片.png

12. 标准盒模型和怪异盒模型有哪些区别？

两者的区别主要体现在元素尺寸的表示上。

盒模型的指定：

在CSS3中，我们可以通过设置 box-sizing 的值来决定具体使用何种盒模型：

  • content-box 标准盒模型
  • border-box 怪异盒模型

标准盒模型：

box-sizing: content-box; (默认值) 在标准盒模型下，元素的宽（width）和高（height）值即为盒模型中内容（content）的实际宽高值。

图片.png

因此，计算一个元素宽度的公式如下(不考虑margin, margin是外边距, 如果是计算占用页面的空间, 就要带上 margin)：

盒子宽度 = border-left + padding-left + width + padding-right + border-right

占据页面宽度 = margin-left + border-left + padding-left + width + padding-right + border- right + margin-right

怪异盒模型：

box-sizing: border-box; (目前主流常用值)

在怪异盒模型下，元素的 width 和 height 值却不是 content 的实际宽高，而是去除 margin 后剩下的元素占用区域 的宽高，即：

图片.png

因此，计算一个元素占用了页面总宽度的公式如下：

盒子宽度 = width

盒子占据页面宽度 = margin-left + width + margin-right

13. 说说伪类和伪元素的区别？

什么是伪类？

伪类（pseudo-class）是以冒号 : 为前缀，可被添加到⼀个选择器的末尾的关键字。

它用于让样式在元素的特定状态下才被应用到实际的元素上。比如： :checked 、 :hover 、 :disabled 、 :first-child 等。

:hover

:nth-child(1)

:nth-child(2)

:checked

注意: 伪类, 虽然是写法比较特殊, css选择器的权重, 和类一致的

什么是伪元素？

:before / :after

伪元素⽤于创建⼀些并不在 DOM 树中的元素，并为其添加样式。伪元素的语法和伪类类似，可以一个冒号或两个冒 号为前缀。

⽐如，可以通过 :before 、 :after 来在⼀个元素前、后增加⼀些额外的⽂本并为它们添加样式；并且，虽然⽤户可以看到这些⽂本，但其实它们并不在 DOM 树中。(坑: 伪元素是无法注册事件的, 所以不要通过js控 制伪元素)

两者的区别

虽然它们在语法上是一致的，但是它们的功能区别还是非常明显的。

  • 伪类是用来匹配元素的特殊状态的
  • 伪元素是用来匹配元素的隶属元素的，这些隶属元素可以在界面中展示，但在 DOM 中不体现

14. 谈谈你对 flex 的理解？

在真实的应用场景中，通常会遇到各种各样不同尺⼨和分辨率的设备，为了能在所有这些设备上正常的布局我们的应 用界面，就需要响应式的界⾯设计方式来满⾜这种复杂的布局需求。

flflex 弹性盒模型的优势在于开发⼈员只需要声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完 成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局。

你能联想到的flex语法有哪些呢?

flex-direction: 调整主轴方向

  • row：主轴方向为水平向右
  • column：主轴方向为竖直向下
  • row-reverse:主轴方向为水平向左
  • column-reverse:主轴方向是竖直向上

justify-content主要用来设置主轴方向的对齐方式

  • flex-start: 弹性盒子元素将向起始位置对齐
  • flex-end: 弹性盒子元素将向结束位置对齐
  • center: 弹性盒子元素将向行中间位置对齐
  • space-around: 弹性盒子元素会平均地分布在行里
  • space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的

align-items用于调整侧轴的对齐方式

  • flex-start： 元素在侧轴的起始位置对齐。
  • flex-end： 元素在侧轴的结束位置对齐。
  • center： 元素在侧轴上居中对齐。
  • stretch： 元素的高度会被拉伸到最大（不给高度时, 才拉伸）。

flex-wrap属性控制flex容器是单行或者多行,默认不换行

  • nowrap： 不换行（默认），如果宽度溢出，会压缩子盒子的宽度。
  • wrap： 当宽度不够的时候，会换行。

align-content用来设置多行的flex容器的排列方式

  • flex-start： 各行向侧轴的起始位置堆叠。
  • flex-end： 各行向弹性盒容器的结束位置堆叠。
  • center： 各行向弹性盒容器的中间位置堆叠。
  • space-around： 各行在侧轴中平均分布。
  • space-between： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。
  • stretch：拉伸，不设置高度的情况下。
avatar
文章
阅读
粉丝