一文打通你 CSS 任督二脉

想进字节冲啊冲
140 阅读14分钟

含义

    • 样式表语言，主要是用于描述 HTML 或 XML 文档的呈现方式。可以使用CSS 为 HTML 的元素指定相关样式，从而改变 HTML 元素的形态。

构成

基础

选择器分类

  • 元素选择器(也称为标签或类型选择器)
  • id 选择器
    • 具有特定 ID 的元素。单一的 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID。具有唯一性。
  • 类选择器
    • 具有特定类的元素。单一页面中，一个类可以有多个实例。
  • 属性选择器
    • 拥有特定属性的元素
  • 伪类选择器

CSS 值和单位

  • 相对长度
    • 相对于某些东西变化。em,rem
    • 单位
      • em：相对于父元素大小
      • rem 相对于 HTML 根元素大小。
      • 百分比
      • vh，vw
  • 绝对长度
    • 跟任何东西没关系，总是相同大小。
  • 颜色
    • 颜色关键字
    • 16 进制 RGB
    • RGB 和 RGBA
      • rgb()接收三个参数，表示颜色的红色、绿色和蓝色通道。
      • RGBA：第四个参数，控制透明度。
    • HSL 和 HSLA
      • 接收色相、饱和度和亮度值。
    • 和 opacity 的区别
      • RGBA 只会让颜色不透明而 opacity 会让元素和里面的所有东西都不透明。
  • 数字
    • opacity
  • 图片
  • 位置
  • 字符串和标识符
  • 函数

💥层叠、优先级与继承

因为 CSS 中会存在定义 CSS 规则的先后顺序以及选择器的权重，那么如何确保对应的 CSS 规则应用到对应的元素上，需要我们去了解一下 CSS 中层叠、优先级与继承的相关知识。

层叠

当两条同级别(只什么都一样，只是位置不一样和值不一样)的规则应用到一个元素时，写在后面的实际上就是生效的规则。

生效的重要性(从前到后依次递增)
资源顺序

如果有超过一条规则应用于相同的元素， 而且都是相同的权重，那么最后面的规则会应用。

优先级
重要程度
  1. 用户代理样式表中的声明（例如，浏览器的默认样式，在没有设置其他样式时使用）。
  2. 用户样式表中的常规声明（由用户设置的自定义样式）。
  3. 作者样式表中的常规声明（这些是我们 web 开发人员设置的样式）。
  4. 作者样式表中的 !important 声明
  5. 用户样式表中的 !important 声明
  6. 用户代理样式表中的 !important 声明

优先级

浏览器是根据优先级来决定当多个规则应用于相同的元素时，具体生效的规则是哪个。

计算规则(从最高到最低)
  • !important
  • 内联样式
  • 普通定义的样式(选择器的优先级可以认为是三个不同的值相加，分别是百(ID) + 十(类) + 个(元素))
    • ID: 选择器中包含 ID 选择器则百位得一分。
    • 类: 选择器中包含类选择器、属性选择器或伪类则十位得一份。
    • 元素: 选择器中包含元素、伪元素则各位得一份。
    • 通用选择器(*)、组合符(+、>、～、‘’)和调整优先级的选择器(:where)不会影响优先级。

继承

有一些 CSS 属性是继承属性，一些设置在父元素上的 CSS 属性是可以被子元素继承的，有些则不能。

有一些属性可以控制继承

  • inherit: 开启继承，子元素的同名样式会应用父元素。 如color: inherit; 这个含义是子元素的color属性会使用父元素的。
  • initial: 设置初始值。
  • revert: 重置为浏览器默认样式
  • revert-layer: 重置为上一个层叠层中建立的值
  • unset: 设置设置为自然值，就是顺其自然的意思。

all: 可以重设所有属性值。 它的 value 是上面的 5 个。

层叠层

层叠层 CSS 可以理解为在正常编写 CSS 之上的，用层进行管理 CSS 的一种手段。可以用层叠层 CSS来更细粒度的控制 CSS 的生效。

来源
  1. 用户代理样式表(浏览器写的)
  2. 用户样式表。(用户写的)
  3. 作者样式表。
创建
  1. 使用 @layer声明 at 规则，使用@layer 后面跟一个或多个层名称，称为具名层。 这个只能定义层名称，不能使用。
  2. 使用@layer和 at 规则来使用或声明具名层或声明未命名层。
  3. 使用具有 layer关键字或 layer()函数的@import 规则，将导入文件分配到该层中。
  4. 隐含层，相当于不用@layer 定义的 CSS，也就是正常书写的 CSS。
使用规则
  • 如果指定具名层不存在，则会创建层并添加到现有层的末尾。如果存在，所有样式都会附加到存在的层中。
  • 只能在创建匿名层的时候添加样式
  • 层之外声明的样式会加入一个隐式的层中
  • 如果用媒体和特性定义层，只有匹配到了才会创建层，否则不会创建
优先级

🌟盒子模型

含义

当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型，将所有元素表示为一个个矩形的盒子。CSS 决定这些盒子的大小，位置以及属性。

组成

内容区域

内容盒子：显示内容的区域；使用inline-size 和block-size 或width 和height 属性确定其大小。

内边距区域

内边距盒子：填充位于内部周围的空白处；使用 padding 确定大小

边框区域

边框盒子：边框盒子包住内容和任何填充；使用 border

外边距区域

外边距盒子：外边距是最外层，其包裹内容、内边距和边框，作为该盒子与其他元素之间的空白； 使用 margin

外边距折叠

区块的上下外边距有时会合并(折叠) 为单个边距,其大小为两个边距中的最大值。

有三种情况会形成外边距折叠

  1. 相邻的兄弟元素
  2. 没有内容将父元素和后代元素分开
  3. 空的区块

重叠规则

  • 如果两个元素都有外边距，那么两个正外边距将合并为一个外边距，大小等于最大的单个外边距
  • 负外边距： 哪个值小用哪个
  • 一个正一个负，两个值相加然后决定

分类

类型(盒子在页面流中的行为方式以及与页面上其他盒子的关系)

外部显示
  • display:block
    • 特点
      • 盒子会产生换行
      • width 和 height 属性生效
      • 内边距、外边距和边框会将其他元素从当前盒子周围推开。
        • 可以进行布局
      • 如果没指定 width，大部分情况下是容器一样的宽度。
  • display:inline
    • 盒子不会换行
    • width 和 height 不起作用
    • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处理 line 状态的盒子推开
    • 水平方向会被应用也会推开其他盒子。
内部显示(决定了盒子内元素的布局方式)
  1. 默认情况盒内元素以标准流布局，表现为区块或行内盒子。
  2. 可通过display: flex等修改布局。

区块格式化上下文

含义

BFC 是 CSS 中的一种布局机制，决定了元素如何在页面中布局以及如何与其他元素相互作用。

特性

  1. BFC 内部的元素按照一定规则布局，不会影响BFC 外部的元素
  2. 外部的元素也不会影响 BFC 内部的布局。

创建

  • 文档的根元素（<html>）。
  • 浮动元素（即 float 值不为 none 的元素）。
  • 绝对定位元素（position 值为 absolute 或 fixed 的元素）。
  • 行内块元素（display 值为 inline-block 的元素）。
  • 表格单元格（display 值为 table-cell，HTML 表格单元格默认值）。
  • 表格标题（display 值为 table-caption，HTML 表格标题默认值）。
  • 匿名表格单元格元素（display 值为 table（HTML 表格默认值）、table-row（表格行默认值）、table-row-group（表格体默认值）、table-header-group（表格头部默认值）、table-footer-group（表格尾部默认值）或 inline-table）。
  • overflow 值不为 visible 或 clip 的块级元素。
  • display 值为 flow-root 的元素。
  • contain 值为 layout、content 或 paint 的元素。
  • 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
  • 网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
  • 多列容器（column-count 或 column-width 值不为 auto，且含有 column-count: 1 的元素）。
  • column-span 值为 all 的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中（规范变更、Chrome bug）

作用

(1) 清除浮动问题
  • 浮动元素（float）会脱离文档流，导致其父容器高度塌陷。
  • BFC 可以包含浮动的子元素，解决高度塌陷的问题。
(2) 防止垂直外边距的折叠
  • BFC 内部的元素和外部元素之间不会发生外边距折叠（margin collapsing）。
(3) 避免元素重叠
  • 在 BFC 中，浮动元素不会与块级元素重叠，而是会规避浮动。
(4) 独立的布局规则
  • BFC 内部的布局独立于外部，不会相互影响。

布局方式

常规流布局

不需要任何操作，浏览器默认开启。

效果

  1. 块级元素填充父元素所有行向空间，并沿着块向伸长以容纳内容。
  2. 行元素的大小就是其本身内容大小。如果父元素有剩余空间，那么不会换行，否则会换行。(可以用 CSS 修改这个行为。)
  3. 外边距折叠。

弹性布局

含义

弹性盒子是一种用于按行(默认) 或按列布局元素的一维布局方法。 在里面的元素可以通过 CSS 来控制其膨胀填充额外的空间或收缩以适应更小的空间(所以称为弹性) 。

模型

当元素表现为 flex 时，它们沿着两个轴布局。

  • 设置了display:flex的元素称为 flex 容器。
  • 主轴：沿着 flex 元素放置的方向延伸的轴。
  • 交叉轴：垂直于 flex 元素放置的轴。
  • 容器里的元素称为 flex 项。
  • 默认align-items: 控制 flex 项在交叉轴的位置。stretch: 会沿着交叉轴填充。所以其实开启了 flex 后，flex 项会填充父元素交叉轴。

元素大小

flex-basis,用于控制flex 容器内 flex 项的空间大小。

特点
  • 任何空间分配发生之前初始化弹性元素尺寸。
  • 如果设置了 auto，会检查元素的尺寸是否设置了绝对值(width和 height)再计算出他们的初始值。比如可以取 width。
  • 如果元素为自动调整大小，那 auto 会解析为其内容大小，如min-content 或者max-content
  • content: 即使元素设置了宽度，flex 还会根据内容大小进行设置。
  • 0，可以完全忽略元素的尺寸。

控制膨胀或缩小

控制元素膨胀

flex-grow: 以flex-basis为基础，增长尺寸。

发生的条件:

  1. 容器内有可用空间：所有元素的宽度相加，总和小于容器的总宽度。

值

数字

控制元素缩小

flex-shrink: 以flex-basis为基础，缩小尺寸。

发生条件：

  1. 所有元素宽度相加，总和是否大于容器总宽度，如果大于，就说明有负可用空间，就可以进行缩小了。

值

数字

“注意：当分配负空间时，弹性收缩因子乘以弹性元素的基本尺寸。这会根据元素能够缩小的比例分配负空间。例如，在较大的元素明显缩小之前，较小的子元素不会缩小到 0。”

说人话就是：即使你给了一个flex-shrink很大，他也不会缩到没有。

主轴对齐

justify-content: 控制flex项在主轴上以什么方式排列。

交叉轴对齐

align-items: 控制flex 项在交叉轴以什么方式排列。

排序

order

控制主轴排列方向

当元素开启flex布局后，默认的排列方向是按行排列，可以通过flex-direction改变主轴排列方向。

  • flex-direction: 控制主轴排列方向.
    • row: 默认沿行排列。
    • row-reverse: 表现和 row 相同，但是置换了主轴起点和主轴终点。
    • column: 沿列排列(沿块轴)。
    • column-reverse: 上面排列方向一致，换了主轴起点和主轴终点。

控制 flex 项单行显示还是多行显示

flex-wrap属性控制 flex 项单行显示还是多行显示。

  • nowrap: 指定元素单行显示。
  • wrap: 多行显示
  • wrap-reverse: 多行反转显示。

控制 单个 flex 项的对齐行为

align-self: 控制单个 flex 项在交叉轴的对齐方式

作用

调整大小

CSS 可以给元素调整大小，在受 CSS 影响之前，HTML 元素有其初始尺寸。

在给元素设置尺寸时，一般有三对属性：width 和 height、min-width和min-height以及max-width和max-height。通过给元素设置这三个属性，可以改变元素的固有大小。

  • width和 height：元素内容区设置大小。如果box-sizing: content-box; 则元素的总大小= width+padding+border。
  • min-width和min-height: 设置最小尺寸。
  • max-width 和 max-height：设置最大尺寸。

可使用单位

  • 绝对长度单位：如 px
  • 相对长度单位：百分比，vw，vh 等。

样式化文本

CSS 还可以对文本格式进行样式化，主要是包括以下几个方面。

样式化字体

  • color：字体颜色属性，可以接受字体颜色值作为 value，将改变字体的展示颜色。
  • font-family: 字体种类，只会应用于当前主机中存在的字体，不存在的字体会使用默认字体。
  • font-size: 字体大小。
  • font-style: 打开和关闭文本的斜体
    • normal: 将文本设置为普通字体。
    • italic: 将当前字体设置为斜体版本，如果本身字体没有斜体，会降级为oblique
    • oblique: 将文本设置为斜体字体的模拟版本。
  • font-weight: 改变文字粗细。
  • text-transform: 改变元素文本的大小写。
  • text-decoration: 设置文本上的装饰性线条的外观。
  • text-shadow: 文本阴影

文本布局

  • text-align: 设置对其方式
  • line-height: 设置文本****每行之间的高。
    • 如果该值使用了无单位(如写了 1.5)，那么就使用无单位*font-size的大小。
  • letter-spacing: 设置文本字符之间的间距。
  • word-spacing: 设置单词之间的空格长度

列表样式

  • line-height: 可以使用line-height设置列表元素之间的间距。
  • list-style-type: 设置列表的项目符号类型
  • list-style-position: 设置项目符号出现在列表内还是列表外。
  • list-style-image: 设置项目符号的自定义图片。
  • start: 允许从 start 开始计数，默认是从 1.
  • reversed: 反向计数。
  • value: 设置列表项指定数值。

链接相关(基本上都是伪类)

  • Link: 有目的地的链接。 :link
  • Visited: 已访问过的链接。 :visited
  • Hover: 被用户鼠标指针悬停的链接。 使用:hover伪类来应用样式。
  • Focus: 被选中的链接。 :focus
  • Active: 激活的链接。 :active.

溢出处理

当元素内容太多的时候，超过原本盒子的高度和宽度，那么元素就会发生溢出。浏览器默认是不会处理溢出的，即会让内容超出盒子展示，这个时候我们可以通过 CSS 来控制元素溢出。

  • overflow
    • visible: 元素溢出可以正常看到
    • hidden: 隐藏内容，超过宽度和高度隐藏。
    • scroll: 出现滚动条
    • auto: 超出盒子出现滚动条，没超出隐藏滚动条。

使用方式

  • 使用外部样式表:
  • 使用内部样式表: 将 CSS 放置在元素中的标签元素内
  • 内联样式：
    写到元素中 style 属性内。
avatar
文章
阅读
粉丝