理解CSS ｜ 青训营笔记

evosoon
170 阅读10分钟

CSS 发展史

css1 1996年12月发布，CSS1为Web开发者提供了基本的样式控制功能，包括字体、颜色、背景、边框、列表、定位等。这个版本使得开发者可以更方便地为网页添加样式，并且提高了网页的兼容性和可维护性。

CSS2 1998年5月发布，新增了一些功能，如定位、浮动、层叠顺序（z-index）、生成内容、媒体查询等。这些新特性为Web开发者提供了更多的样式控制功能，使得网页布局和设计变得更加灵活。

CSS2.1 2011年6月成为正式标准，修复了CSS2中的一些错误，同时移除了一些不常用或难以实现的特性，提高了CSS的稳定性和互操作性。

CSS3 CSS的最新版本，从2005年开始逐步推出。CSS3将CSS分为多个模块，每个模块负责一个特定的功能，如选择器、盒模型、背景和边框、文本效果、2D/3D转换、动画、过渡、多列布局等。

基础知识

CSS 全称 Cascading Style Sheet 层叠样式表

Cascading 层叠规则

image.png

选择器优先级

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

  • 内联样式的权重为 1000
  • ID选择器的权重为 100
  • 类选择器、属性选择器和伪类的权重为 10
  • 元素选择器和伪元素的权重为 1

!important 声明可以改变规则的优先级

根据 CSS 的规则，当有多个相同优先级的选择器存在时，最后出现的选择器将具有更高的优先级[ 最后声明的生效 ] 因此自己的样式加载在引用库样式的后面,保证优先生效

继承

子元素可以从其父元素接收样式属性值。可以使用inherit关键字显式指定一个属性值从其父元素中继承

值和单位

image.png

盒模型

image.png

  • 使用 border 实现三角形
  • 使用 aspect-ratio:4/3;设置矩形宽高比 4:3
  • 设置 body 和 html 高度为100%，容器justify-content:center实现水平居中
  • 采用伪元素实现渐变边框
负外边距

水平方向上的负外边距：

  • 当两个块级元素并排时，它们的负外边距会让它们互相重叠。这可以用于调整元素之间的距离或者实现特定的布局效果。
  • 当一个元素的左边距为负时，它会向左移动；当一个元素的右边距为负时，它会向右移动。这可以用于调整元素相对于其父容器的位置。

垂直方向上的负外边距：

  • 当两个垂直排列的块级元素具有负外边距时，它们会互相重叠。这可以用于调整元素之间的距离，特别是当需要减少默认的垂直间距时。
  • 当一个元素的上边距为负时，它会向上移动；当一个元素的下边距为负时，它会拉近下一个元素与它之间的距离。

需要注意的是，负外边距可能会导致布局上的问题，例如元素重叠、脱离正常文档流等。因此，在使用负外边距时需要谨慎，确保它不会导致不可预期的布局问题。在某些情况下，使用其他布局技术（如 Flexbox、Grid 或定位）可能会更合适。

image.png

布局和定位

常规流布局

常规流布局也被称为文档流布局，元素按照它们在 HTML 代码中的顺序自上而下，自左向右排列。包括两类元素:块级元素 和 行内元素

  • 块级元素 独占一行；默认宽度为父容器宽度，高度取决于内容
  • 行内元素 宽度和高度取决于其内容

排列规则取决于 display 属性

常规流中的任意盒子都只会参与一种格式化上下文。

image.png

BFC & IFC

BFC（Block Formatting Context，块级格式化上下文）和 IFC（Inline Formatting Context，行内格式化上下文）是两种不同的 CSS 布局方式(格式规范)，它们影响着元素如何在页面上排列。在解释 BFC 和 IFC 之前，需要了解一下“格式化上下文（Formatting Context）”。

image.png

外边距塌陷或外边距重叠问题： image.png

消除外边距塌陷方法

  • 使用内边距（Padding）： 可以使用内边距替代外边距来创建垂直间距。这样可以避免外边距塌陷的问题。

  • 使用边框（Border）： 如果父元素有边框，那么父元素和子元素的外边距将不会发生塌陷。给父元素添加一个透明的边框即可消除外边距塌陷。

  • 使用内边距（Padding）： 可以使用内边距替代外边距来创建垂直间距。这样可以避免外边距塌陷的问题。

  • 使用边框（Border）： 如果父元素有边框，那么父元素和子元素的外边距将不会发生塌陷。给父元素添加一个透明的边框即可消除外边距塌陷。

  • 使用伪元素（Pseudo-element）： 在父元素内部添加一个 ::before 伪元素，并设置其 display 属性 为 table。这样可以创建一个新的 BFC，从而避免外边距塌陷

  • 将元素转换为 Flex 或 Grid 容器： 将父元素设置为 Flex 或 Grid 容器时，外边距塌陷不再发生

内联格式化上下文： image.png

  • 水平方向排列： 内联级元素按从左到右（在 LTR（从左到右）文本方向）的顺序排列。如果行内空间不足以容纳一个内联级元素，它会换行到下一行继续排列。

  • 垂直对齐： 内联级元素支持 vertical-align 属性，可以调整元素在垂直方向上的对齐方式。例如，可以设置元素相对于基线（baseline）向上或向下对齐。

  • 行框（Line box）： 在 IFC 中，内联级元素被包含在行框内。行框的高度由内联级元素的高度决定。每一行都有一个行框，行框之间没有垂直外边距塌陷。

  • 不支持宽度和高度设置： 内联级元素不支持设置 width 和 height 属性。它们的宽度由内容决定，而高度则由 line-height 属性决定。

  • 支持水平外边距、内边距和边框： 内联级元素支持设置水平方向的外边距、内边距和边框，但垂直方向的设置不会影响其他内联级元素的布局。

  • 匿名文本： 在 IFC 中，不属于任何内联级元素的文本被视为匿名文本。匿名文本会按照内联级元素的布局规则进行排列。

实现单行元素居中对齐常用方式：

  • line-height和height设置为相同的高度即可

  • 使用flex布局的align-items:center即可

  • 利用了line box中计算高度的原理和vertical-align的设置，垂直对齐，但不是完全垂直居中如果设置父元素font-size:0,基线和中线重叠，则居中对齐

Position 定位

image.png

Flex

image.png

Grid

CSS Grid Layout（网格布局）是一个用于创建二维网格的 CSS 布局技术。它允许你以行和列的形式设计复杂的布局，而不需要使用浮动、定位和其他传统布局方法。Grid 布局特别适合用于构建响应式和自适应设计，因为它可以轻松地在不同的屏幕尺寸和设备上调整布局。

CSS Grid 的一些基本概念：

  1. 容器（Container）：要使用 Grid 布局，首先需要将一个元素声明为网格容器。这可以通过将 display 属性设置为 grid 或 inline-grid 来实现。

  2. 网格项（Grid Items）：容器的直接子元素自动成为网格项。

  3. 网格线（Grid Lines）：网格布局由水平和垂直的网格线组成，这些网格线定义了网格的行和列。网格线可以用数字或名称来引用。

  4. 网格轨道（Grid Tracks）：网格轨道是由两条相邻的网格线之间的区域组成的，可以是行或列。

  5. 网格单元（Grid Cells）：由相邻的两条行网格线和两条列网格线组成的一个单元格称为网格单元。

  6. 网格区域（Grid Areas）：网格区域是由任意数量的网格单元组成的矩形区域。网格区域可以用来放置网格项。

层叠上下文

它用于决定元素在页面上的层叠顺序。层叠上下文由具有特定属性的元素生成，这些属性会影响该元素及其子元素在 z 轴上的渲染顺序。z 轴是垂直于屏幕的轴线，用于表示页面中元素的前后顺序

image.png

image.png z-index 只在同一个层叠上下文内比较。子元素的z-index无法超越父元素的z-index显示顺序

变形 过渡 动画

transform变形

transform：这是一个复合属性，可以包含一个或多个 3D 变换函数。以下是一些常用的 3D 变换函数：

-   `rotateX(angle)`：绕 X 轴旋转指定的角度。
-   `rotateY(angle)`：绕 Y 轴旋转指定的角度。
-   `rotateZ(angle)`：绕 Z 轴旋转指定的角度。
-   `scale3d(sx, sy, sz)`：分别沿 X、Y 和 Z 轴缩放元素。
-   `translate3d(tx, ty, tz)`：分别沿 X、Y 和 Z 轴移动元素。
-   `perspective(p)`：设置透视距离。较小的值会增强 3D 效果。

transform-origin：定义变换的基点，即元素进行变换时以哪个点为中心。默认值为 "50% 50% 0"，即元素的中心点。

transform-style：设置元素的子元素是否位于 3D 空间中。取值为 flat（默认）或 preserve-3d。当设置为 preserve-3d 时，子元素将保留其 3D 位置。

perspective：定义观察者距离元素的距离，对于创建 3D 效果非常有用。较小的值会增强 3D 效果。此属性通常应用于父元素上。

perspective-origin：定义透视投影点的位置。默认值为 "50% 50%"，即元素的中心点。

transition 过渡

通过指定某些元素属性从一种起始状态，在-段时间内以某种变化节奏，过渡到终止状态。

语法：transition: <property> <duration> <timing-function> <delay> image.png

animation 动画

image.png

animation 属性参考：developer.mozilla.org/zh-CN/docs/…

css 动画样式参考：animate.style/

性能问题

image.png

响应式设计

响应式设计原则
  • 优先选用流式布局，如百分比、flex、 grid等
  • 使用响应式图片，匹配尺寸，节省带宽
  • 使用媒体查询为不同的设备类型做适配
  • 给移动端设备设置简单、统一的视口
  • 使用相对长度，em、rem、vw 做为长度度量
媒体查询

媒体查询允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型（如screen、print) 以及媒体特性（如视口宽度、屏幕比例、设备方向：横向或纵向）做为约束条件。

使用媒体查询的一些Tips:

  • 媒体查询同样遵循cascading层叠覆盖原则，min- 和max-选择一个
  • 由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选择，而不是屏幕大小
  • 由于断点的增加会增加样式处理的复杂度，所以尽量减少断点

最后

image.png

avatar
文章
阅读
粉丝