深入CSS（一）| 豆包MarsCode AI刷题

Fallengenius
50 阅读12分钟

字节青训营伴学笔记第二篇：深入CSS

深入理解CSS（一）

CSS基础

CSS规则

层叠优先程度
  1. 样式表来源
  • 样式表来源重要排序
    • 以下递增
    • 用户代理样式
    • 用户样式表
    • 作者样式表
    • 作者样式表的!important
    • 用户样式表!important
    • 用户代理样式!important
  1. 选择器优先级
  • 选择器种类
选择器类型具体内容
基础选择器ID 选择器（#id）、类型选择器 / 标签选择器（Tagname）、类选择器（.class）、通用选择器（*）
组合器子组合器（>）、相邻兄弟组合器（+）、通用兄弟组合器（~）
复合选择器多个基础选择器连起来使用，如 h1.page-header
属性选择器通过约束属性值，如 div [data-title="a"]
伪类选择器选中处于特定状态或相对于其父级或兄弟元素位置的元素，如:first-child、:hover
伪元素选择器匹配文档中没有直接对应 HTML 元素的特定部分或插入内容，如 h2:first-letter、div::before
逻辑选择器较新的选择器:is ()、:has ()、:where ()、:not ()
  • 选择器优先级

内联 > id > class = attribute = pseudo-class > type = pseudo-element

  1. 源码位置
小tips
  1. 选择器尽量少使用id
  2. 尽量不要用!important
  3. 自己的样式加载在引用库样式的后面
继承
  • 大部分具有继承的属性和文本相关
  • 可以使用inherit关键字显式指定一个属性值从其父元素继承

CSS的值和单位

一、CSS 的值和单位分类

  1. 绝对长度单位：px（像素）、pt（点）、cm（厘米）、in（英寸）等。

  2. 相对长度单位：

    • 基于字体：em、rem、ex、rex。
    • 基于视口：vw（视口宽度的百分比）、vh（视口高度的百分比）、vmin（视口中较小尺寸的百分比）、vmax（视口中较大尺寸的百分比）。

  3. 角度单位：deg（度）、grad（梯度）、turn（圈）、rad（弧度）。

  4. 时间单位：S（秒）、ms（毫秒）。

  5. 分辨率单位：dpi（每英寸点数）、dpcm（每厘米点数）、dppx（每像素点数）。

二、CSS 的属性值类型

  1. 数值类：如 z-index:1 这种数值，或者带有单位的数值、百分比等。
  2. 函数生成：如 calc ()、min ()、max () 等。

三、CSS 选择器与定位属性示例
position 属性可以设置为 fixed（固定定位），并展示了 width 属性可设置为具体数值如 100px 或百分比如 50%。background-color 属性可设置颜色，height 属性可设置高度值。

盒模型

  • 可控制盒子类型，如通过 “display” 属性设置为 “block”“inline”“inline-block”“flex” 等。
  • 能控制盒子大小及计算方式，涉及属性有 “width”“height”“box-sizing”（如 “content-box”“border-box”）等，还包括 “margin”“border”“padding” 和 “content”。
  • 可以控制盒中内容流，如通过 “overflow” 属性设置为 “auto”“scroll”“hidden” 等。
  • 能控制定位，“position” 属性可设置为 “static”“relative”“absolute”“fixed”“sticky”，以及控制是否可见，“visibility” 属性可设置为 “visible”“hidden” 等。

CSS布局

  • 定位流：在 CSS 中，定位流使用position属性控制，包括fixed和absolute定位方式，可使元素脱离文档流，能够自由定位、覆盖等。

  • CSS 3 之前的常用布局：

    • 常规流：这是默认的布局方式，有块级格式化上下文和内联格式化上下文。
    • 浮动流：利用float属性控制，元素脱流后可用于做横向布局。

  • CSS 3 之后的新增布局：

    • 弹性盒子布局：一维空间布局。
    • 网格布局：二维空间布局。
    • 多列布局：用于文本、内容的多列展示。
盒模型问题-外边距塌陷

一、外边距塌陷情况

  1. 两个兄弟元素之间相邻的上下外边距会产生外边距塌陷。
  2. 父子元素之间相邻的上下外边距会产生外边距塌陷。
  3. 内容为空的元素自己上下外边距相邻也会产生外边距塌陷。

二、消除外边距塌陷的方法

  1. 对于兄弟元素或内容为空元素：在两个相邻的上下边距之间增加 border、padding 或者内联元素，使之不相邻。
  2. 对于父子元素：除了上述方法，还可以设置父元素为 BFC（块级格式化上下文），使得父子不在同级 BFC 中。例如给父元素设置display: flow-root属性也可一定程度消除父子元素的外边距塌陷。
盒模型-内联级格式化上下文

一、内联级格式化上下文

在内联格式区域中：

  1. 盒子会从包含块的顶部开始，按序水平排列。
  2. 只有水平外边距、边框和内边距会被保留。
  3. 盒子可以以不同方式在垂直方向上对齐，如底部对齐、顶部对齐或按文字底部对齐。
  4. 包含一串盒子的矩形区域称为一个线条框。

二、包含块示例

当内联元素都是 “vertical-align: baseline” 时：

  • “This is inline element-1. This is inline element-2. Inline element-3”“large inline font” 等组成的示例中，实际看不到的线条框的基线决定元素位置，线条框的高度为所包含的位置最高的元素的顶部和位置最低的元素的底部的距离。

当图片改为 “vertical-align: middle” 时：

  • “arge inline font” 等内联元素顶部上移半个 x 高度，由 “half-leading baseline”“ascading”“ascont”“vertical-align”“baseline” 决定位置，“doscont” 内联元素底部也会相应变化。如果是 “inline-block”、替换元素等类型，则按照 “margin-box” 高度确定。

弹性盒子布局

一、弹性盒子布局的两类属性

（一）作用于父元素（flex container）的属性

  1. display：建立一个弹性盒子，可取值为flex或inline-flex。
  2. flex-direction：规定盒子的主轴方向，可取值为row（横向）、column（纵向）等。
  3. flex-wrap：子元素折行显示形式，可取值为nowrap（不折行）、wrap（折行）、wrap-reverse（反向折行）。
  4. justify-content：主轴方向子元素的排列方式，可取值为center（居中）、space-between（两端对齐）等。
  5. align-items：交叉轴方向子元素的对齐方式，可取值为flex-start（交叉轴起点对齐）、center（居中对齐）、stretch（拉伸对齐）等。
  6. align-content：交叉轴方向多行子元素的布局方式，可取值为flex-start、space-between等。
  7. gap：以明确值设定子元素间的间隔，格式为<row-gap><column-gap>。

（二）作用于子元素（flex items）的属性

  1. flex-basis：规定 item 未放缩之前的默认大小，可取值为auto或长度值。
  2. flex-grow：规定有剩余空间时，对 item 的分配比例，为数字值。
  3. flex-shrink：规定空间不够时，对 item 的压缩比例，为数字值。
  4. flex：以上三项的缩写，默认值为0 1 auto。
  5. order：规定 item 从左到右（row 布局）显示的顺序，默认是 0。
  6. align-self：规定单个 item 在交叉轴上的位置，可取值为auto、center、flex-start等。

二、弹性盒子布局的优势

Flexible Box Layout 是为了提供更加高效灵活的布局方式，在即便是宽高未知的情况下，也能排列和分割一个盒子内部的布局。而且在不同布局方向（横向 / 纵向）的调整更为灵活

网格布局

Grid 布局核心内容：

一、简介

  • Grid 布局是 2017 年推出的二维布局方式，由行和列组成，可将元素放置到网格中，元素可占据一个单元格或多行多列。

二、网格线

  • 实际不可见。

三、父元素属性

  1. display：设置为grid或inline-grid可生成显式的列、行。
  2. grid-template-columns/rows：可使用数值、百分比、fr、repeat()等规定列和行。
  3. grid-template-areas：规定区域分布，如"header header" "sidebar content" "footer footer"。
  4. grid-auto-flow：规定默认的排序方向，可设置为row (dense)或column (dense)。

四、子元素属性

  1. grid-column/row：是grid-column-start和grid-column-end、grid-row-start和grid-row-end的缩写形式，规定占用的列、行，格式为<start-line>/<end-line>。
  2. grid-area：规定占用的区域，如header。

对比flex布局和grid布局

  • Grid 和 Flex 布局各有特点和使用策略。
  • Flex 布局主要用于一维布局和基于内容的布局，2017 年后浏览器版本普遍支持，浏览器兼容性更好。
  • Grid 布局适用于二维布局，在大面积或整体布局中推荐使用。
  • 在小面积或组件中，或 Grid Item 中可以使用 Flex 做灵活布局，即 “Grid for layout, Flexbox for components”

定位

一、定位的目的和属性使用

  • 为了在文档流基础上让元素移动并做出更多灵活改变，当position属性取值非static时，可以使用top、right、bottom、left对元素进行定位。

二、不同定位属性的特点

  1. relative（相对定位）：

    • 元素相对于自己原来在文档流中的位置进行定位。
    • 原来文档流的空间还在。

  2. absolute（绝对定位）：

    • 元素被移出正常文档流，且没有预留空间。
    • 相对于最近的非static定位祖先元素进行定位。

  3. fixed（固定定位）：

    • 元素被移出正常文档流，且没有预留空间。
    • 相对于屏幕视口进行定位，屏幕滚动也不会改变位置。

  4. sticky（粘滞定位）：

    • 元素相对它的最近滚动祖先（祖先的overflow是scroll/hidden/auto）的视口（scrollport）定位。
    • 原来文档流中的位置还在。
    • 表现为未滚动时处于初始位置，滚动到定位位置后会固定在那里。

三、代码示例
给出了各种定位属性的代码示例，如：

  • position: relative; top: 30px; left: 10px;表示相对定位，元素相对于原来位置向上移动 30 像素，向左移动 10 像素。
  • .abosoluted{position: absolute; top: 30px; left: 10px;}表示绝对定位，相对于最近的非静态定位祖先元素进行定位。
  • fixed-pos position: fixed; top: 10%; left:10%;表示固定定位，相对于屏幕视口定位。
  • sticky position: sticky; top: 20px;表示粘滞定位，在滚动到特定位置后固定在距离顶部 20 像素处。

层叠上下文

  • 层叠上下文是对 HTML 元素的三维构想，将元素沿着垂直屏幕的虚构的 Z 轴排开进行页面展示。
  • 呈现了层叠上下文结构，包括不同区域（area1、area2、area2 child）的层级关系，其中 area2 有相对定位（position: relative）且 area2 child 形成新的层叠上下文，area2 child 的 z-index 为 1。
  • 提到根层叠上下文（root stacking context）及 DOM 树、渲染层（render layer）的关系，一个新的层叠上下文渲染时会对应一个浏览器渲染时的 render layer。
编写z-index的建议
  1. 使用 CSS 变量或预处理语言的变量来管理 z-index 的值。
  2. 将预设间隔设置为 10 或 100，以便后续插入不同层级的元素。并给出了具体的示例，如设置 “--z-loading-indicator: 100;”“--z-nav-menu: 200;”“--z-dropdown-menu: 300;”“--z-modal-backdrop: 400;”“--z-modal-body : 410;” 等。此外，文档中还出现了重复的 “6030 侯紫阁 6030 侯紫阁 6030” 字样，但不太明确其具体含义。

变形 过渡 动画

变形transform

2D变形

  1. 2D 相关属性：

    • transform可实现translate（移动）、rotate（旋转）、scale（放缩）、matrix（变形矩阵）等效果。
    • transform-origin可设置变形时依据的原点，如right top、center等。

  2. 示例：正常情况下transform: scale(0.8) rotate(-10deg);transform-origin: 0 0;。

3D变形
  1. transform 属性：包含 translate3d、rotate3d、scale3d、matrix3d 等，用于实现元素的 3D 变形。
  2. transform-origin 属性：用于指定变形时依据的原点，可以是具体的坐标值如 “50px 30px”，也可以是方向描述如 “right top”。
  3. transform-style 属性：有 “flat” 和 “preserve-3d” 两种值，决定子元素的 3D 表现。
  4. perspective 属性：表示观看点距离 z=0 这个平面的距离，可以在 transform 中用 perspective () 作用于当前元素，也可以直接使用给后代元素一个统一值。
  5. perspective-origin 属性：用于确定观看者的位置，如 “top”、“bottom” 等。
  6. backface-visibility 属性：当元素正面只有朝向观察者的时候可见。

过渡transition

  • 过渡：通过指定某些元素属性，从一种起始状态在一段时间内以某种变化节奏过渡到终止状态。
  • 过渡语法：div { transition: <property> <duration> <timing-function> <delay>; }。
  • timing-function一般有三种用法：线性（linear）、贝塞尔曲线（cubic-bezier () 或 ease-in 等）、阶跃（step）。
  • 常见的曲线变化应用中，step可用于逐帧动画、定格动画、闪烁、时钟等。

动画animation

  • 关键帧与动画属性：

    • @keyframes关键帧用于定义动画过程中的关键样式，浏览器会在动画中插入关键帧图像。

    • animation-*相关属性为元素添加动画，具体包括：

      • animation-name：定义好的关键帧的名字。
      • animation-duration：动画时长。
      • animation-timing-function：动画节奏。
      • animation-delay：延时开始的时间。
      • animation-iteration-count：执行次数。
      • animation-direction：决定是否反向或交替。
      • animation-fill-mode：动画执行前后的样式采用。
      • animation-play-state：动画运行状态。

  • 示例关键帧与类样式：

    • 给出了名为fadeInDown的关键帧定义，包含从初始状态（opacity 为 0，transform 为 translate3d (0,-100%,0)）到最终状态（opacity 为 1，transform 为 translate3d (0,0,0)）的变化。
    • 定义了.fadeInDown类样式，指定了动画名称为fadeInDown，动画时长为 1s，动画填充模式为both。

变形 过渡 动画 -性能

一、页面渲染过程

  1. 计算布局：宽、高、位置等改变会重新布局（reflow）。
  2. 绘制：填充像素，文本、着色、背景边框等改变会触发（reflow）；某些渲染层形成合成层（GraphicLayer），由 GPU 绘制，即硬件加速。
  3. 合成：收集所有绘制完成的图层，按照顺序合成显示。

二、案例分析

  1. Case1：width 从 10% 变为 100%，需要重新计算布局。
  2. Case2：非合成层元素背景色从 blue 变为 red，需要 CPU 重新绘制主图。
  3. Case3：合成层元素文字色从 white 变为 black，只需要 GPU 重新绘制单独图层。

三、写动画性能更好的方法

  1. 尽量不使用触发 reflow 的属性。
  2. 遇到性能问题时可触发硬件加速，比如设置 will-change 属性、设置 transform3d 等。
  3. 尽量使用 transform 和 opacity 去写动画。
avatar
文章
阅读
粉丝