基础CSS篇（三）

奶油小泡芙
71 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情。

如何理解什么是层叠上下文？

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网⻚的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。 如何产生？

  • 触发一下条件则会产生层叠上下文：
  • 根元素 (HTML),
  • z-index 值不为 "auto"的绝对/相对定位，
  • 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
  • opacity 属性值小于 1 的元素（参考 the specification for opacity），
  • transform 属性值不为 "none"的元素，
  • mix-blend-mode 属性值不为 "normal"的元素，
  • filter值不为“none”的元素，
  • perspective值不为“none”的元素，
  • isolation 属性被设置为 "isolate"的元素，
  • position: fixed在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考这篇文章）
  • -webkit-overflow-scrolling 属性被设置 "touch"的元素

清除浮动有哪些方法？

  • 空div方法：
<div style="clear:both;"></div>
  • Clearfix 方法：上文使用.clearfix类已经提到
  • overflow: auto或overflow: hidden方法，使用BFC

在flex已经成为布局主流之后，浮动这种东⻄越来越少⻅了，毕竟它的副作用太大

你对css sprites的理解，好处是什么？是什么？

雪碧图也叫CSS精灵，是一CSS图像合成技术，开发人员往往将小图标合并在一起之后的图片称作雪碧图

如何操作？

使用工具（PS之类的）将多张图片打包成一张雪碧图，并为其生成合适的 CSS。每张图片都有相应的 CSS 类，该类定义了background-image、background-position和background-size属性。使用图片时，将相应的类添加到你的元素中。

好处：

  • 减少加载多张图片的 HTTP 请求数（一张雪碧图只需要一个请求）
  • 提前加载资源 不足：
  • CSS Sprite维护成本较高，如果⻚面背景有少许改动，一般就要改这张合并的图片
  • 加载速度优势在http2开启后荡然无存，HTTP2多路复用，多张图片也可以重复利用一个连接通道搞定

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

媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身,非常适合web网⻚应对不同型号的设备而做出对应的响应适配。 如何使用？ 媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true.那么媒体查询内的样式将会生效。

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
    @media (max-width: 600px) { 
        .facet_sidebar {
            display: none;
        }
    }
</style>

参考阅读：深入理解CSS Media媒体查询

你对盒模型的理解是什么？

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic boxmodel），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸...）。

image.png

盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成

标准盒模型和怪异盒模型有什么区别？

在W3C标准下，我们定义元素的width值即为盒模型中的content的宽度值，height值即为盒模型中的content的高度值。因此，标准盒模型下

元素的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

  • 标准盒子模型 image.png 而IE怪异盒模型（IE8以下）width的宽度并不是content的宽度，而是border-left + padding-left + content的宽度值 +padding-right + border-right之和，height同理。 在怪异盒模型下：

元素占据的宽度 = margin-left + width + margin-righ

  • IE盒子模型

Snipaste_2022-04-17_22-01-57.png

avatar
文章
阅读
粉丝