深入浅出CSS

写在前头

掘金好像解析不了我的图床，所以图片都显示不出来，后面有空搭建一个个人博客，把这些笔记都丢在里边得了

特异度

CSS选择器的特异度（Specificity）是用于确定样式规则优先级的概念。特异度决定了当多个选择器应用于同一个元素时，哪个样式规则将被应用。

特异度的计算过程

特异度可以用一个四元组（a，b，c，d）来表示，其中每个元素的值分别代表了选择器中各个部分的特异度。特异度的计算规则如下：

对于每个ID选择器，a 的值加 1。
对于每个类选择器、属性选择器、伪类选择器，b 的值加 1。
对于每个元素选择器、伪元素选择器，c 的值加 1。
对于内联样式，d 的值加 1。

特异度的计算是逐级进行的，即先计算a，再计算b，以此类推。特异度值越大，优先级越高。

当多个样式规则应用于同一个元素时，浏览器会根据特异度来决定应用哪个样式规则。如果两个样式规则具有相同的特异度，则根据它们在样式表中的顺序来决定优先级。

特异度的一般规则是：

如果两个特异度的四元组中的任意一个值不同，则具有较高特异度的样式规则优先级更高。
如果两个特异度的四元组中的所有值都相同，则根据样式规则在样式表中的顺序来决定优先级。

ep：

h1：(0, 0, 1, 0)
.container：(0, 1, 0, 0)
#header .logo：(0, 2, 1, 0)
body #header .logo：(0, 2, 2, 0)
style="color: red;"：(0, 0, 0, 1)

tip：使用内联样式（例如 style="color: red;"）会给特异度增加一个较高的值，因此内联样式的优先级最高。

image-20230728220613380转存失败，建议直接上传图片文件

image-20230728221006049转存失败，建议直接上传图片文件 image-20230728221040161转存失败，建议直接上传图片文件

继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值。

color、font-family、font-size、font-weight、text-align等属性通常会被子元素继承。例如，如果将颜色应用于父元素的文本，那么子元素的文本也将继承相同的颜色。

但是并非所有属性都具有继承性，这个时候如果想要强制继承这些不可继承的属性，我们可以使用 inherit 关键字

ep：

* {
	box-sizing:inherit;
}

html {
	box-sizing:border-box;
}

.some-widget{
     box-sizing:content-box;
}

在这个例子中， * 选择器表示匹配所有元素，将它们的 box-sizing 属性设置为 inherit。这意味着所有元素将继承其父元素的 box-sizing 值。

然后，html 元素的 box-sizing 属性被设置为 border-box。这意味着整个文档中的所有元素的盒模型都使用 border-box，即元素的宽度和高度包括了内边距和边框的尺寸，而不会改变内容区域的尺寸。

最后，.some-widget 类选择器用于特定的元素，将其 box-sizing 属性设置为 content-box。这意味着该元素的盒模型将使用默认的 content-box，即元素的宽度和高度只包括内容区域的尺寸，而不考虑内边距和边框的尺寸。

如果向上没有找到继承对象的时候，使用的是初始值

初始值

CSS 中，每个属性都有一个初始值
- background-color 的初始值为 transparent
- margin-left 的初始值为0
可以使用 initial 关键字显式重置为初始值
- background-color: initial

布局是什么

确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

常规流（Normal Flow）：常规流是默认的布局方式，元素按照其在HTML中出现的顺序依次排列。元素在常规流中根据其显示属性（display）和盒模型（box model）进行布局。块级元素会在垂直方向上一个接一个地排列，而内联元素则会水平流动，并根据文本的方向进行布局。
浮动（Float）：浮动是一种布局技术，通过将元素从常规流中脱离出来，使其漂浮在其容器的左侧或右侧。浮动元素会脱离常规流，并且其他内容会围绕着浮动元素进行布局。常见的用途是创建多列布局，其中一列浮动，其他内容自动填充剩余空间。

.float-left {
  float: left;
}

.float-right {
  float: right;
}

绝对定位（Absolute Positioning）：

绝对定位允许将元素相对于其最近的已定位祖先元素或文档的视口进行定位。通过设置 position: absolute;，可以使用 top、right、bottom 和 left 属性来精确控制元素的位置。绝对定位的元素会脱离常规流，不会对其他元素产生影响。

.absolute-positioned {
  position: absolute;
  top: 50px;
  left: 100px;
}

需要注意的是，浮动和绝对定位可能会导致元素重叠或布局混乱的问题。为了解决这些问题，可以使用清除浮动（clear float）或使用其他布局技术，如弹性布局（flexbox）或网格布局（grid layout）——这两类也属于常规流之一。

盒模型

image-20230728221928704转存失败，建议直接上传图片文件

盒子模型（Box Model）是CSS中用来描述元素尺寸和布局的概念。它将每个元素看作是一个矩形的盒子，该盒子由内容区域、内边距（padding）、边框（border）和外边距（margin）组成。

在标准的盒子模型中，元素的总宽度由以下部分组成：

总宽度 = 内容区域宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

类似地，元素的总高度由以下部分组成：

总高度 = 内容区域高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

以下是盒子模型的各个部分的解释：

内容区域（Content Area）：内容区域是元素用于显示实际内容（如文本、图像等）的区域。它的尺寸由元素的宽度和高度属性决定。
- width
  - 指定 content box 宽度
  - 取值为长度、百分数、auto
  - auto 由浏览器根据其它属性确定
  - 百分数相对于容器的 content box 宽度
- height
  - 指定 content box 高度
  - 取值为长度、百分数、auto
  - auto 取值由内容计算得来
  - 百分数相对于容器的 content box 高度
  - 容器有指定的高度时，百分数才生效
内边距（Padding）：内边距是内容区域与边框之间的空白区域。它可以用来控制元素内容与边框之间的间距。内边距可以使用 padding 属性进行设置。
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
边框（Border）：边框是围绕内容区域和内边距的线条或样式。它可以用来定义元素的边界和外观。边框可以使用 border 属性进行设置。
- 三种属性
  - border-width
  - border-style
  - border-color
- 四个方向
  - border-top
  - border-right
  - border-bottom
  - border-left
外边距（Margin）：外边距是元素边框与相邻元素之间的空白区域。它可以用来控制元素与其他元素之间的间距。外边距可以使用 margin 属性进行设置。
- 指定元素四个方向的外边距取值
- 可以是长度、百分数、auto
- 百分数相对于容器宽度
- 使用margin:auto水平居中

border-box

CSS中的 box-sizing 属性可以用来改变盒子模型的行为。默认情况下，box-sizing 属性的值为 content-box，表示元素的宽度和高度只包括内容区域。通过将其设置为 border-box，元素的宽度和高度将包括内边距和边框的尺寸，而不会改变内容区域的尺寸。

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 1px solid black;
}

在上面的示例中，设置了 box-sizing: border-box;，这样元素的总宽度将包括内边距和边框的尺寸，而不会改变内容区域的尺寸。这使得元素的实际宽度为 200px，而不会受到内边距和边框的影响。

box-sizing: border-box; 是CSS中的一个属性，用于改变盒子模型的行为。默认情况下，元素的宽度和高度只包括内容区域，而 box-sizing: border-box; 可以使元素的宽度和高度包括内边距和边框的尺寸，而不会改变内容区域的尺寸。

具体来说，box-sizing: border-box; 的作用是将元素的总宽度和总高度定义为包括以下部分：

总宽度 = 内容区域宽度 + 左内边距 + 右内边距 + 左边框 + 右边框
总高度 = 内容区域高度 + 上内边距 + 下内边距 + 上边框 + 下边框

换句话说，设置了 box-sizing: border-box; 后，内边距和边框的尺寸会从总宽度和总高度中减去，保持内容区域的尺寸不变。

这个属性的使用方法很简单，只需要将其应用于需要改变盒子模型行为的元素上即可：

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 1px solid black;
}

使用 box-sizing: border-box; 可以简化布局计算，尤其是在处理百分比宽度、媒体查询和响应式布局时非常有用。它使得元素的尺寸更加可预测和一致，减少了调整布局时出现的意外问题。

行级 vs. 块级

行级元素：

行级元素在文档流中水平排列，一行可以容纳多个行级元素。它们通常用于包裹文本或内联内容，比如 <span>、<a>、<em>、<strong> 等。行级元素不会独占一行，其宽度由内容决定，默认情况下不接受宽度（width）和高度（height）的设置，只会根据内容自动调整。

行级元素的特点包括：

不会强制换行，除非遇到强制换行的标签或CSS属性。
不会自动开始新的一行，它们会尽量在同一行内水平排列。
可以设置水平方向的内边距（padding）和外边距（margin），但垂直方向的内边距和外边距不会对其他元素产生影响。
默认情况下，行级元素不会包裹块级元素，块级元素会独占一行。

块级元素：

块级元素会独占一行，每个块级元素都会从新的一行开始，并且会在垂直方向上堆叠。块级元素通常用于表示段落、标题、列表、div等结构化的内容块。块级元素的宽度默认为其父元素的100%，可以通过设置宽度（width）和高度（height）来改变其尺寸。

块级元素的特点包括：

强制换行，每个块级元素会从新的一行开始。
独占一行，一个块级元素不会与其他元素在同一行内显示。
可以设置水平方向和垂直方向的内边距（padding）和外边距（margin）。
可以设置宽度（width）和高度（height）。

需要注意的是，HTML5中的一些元素（如<div>、<p>）默认是块级元素，但可以通过CSS的 display 属性进行更改。同样，行级元素也可以通过CSS的 display 属性设置为块级元素。

display:block;
display:inline;

还有一种特殊的元素称为行内块级元素（inline-block elements），它们具有行级元素的特性，但可以设置宽度、高度以及水平和垂直方向的内边距和外边距。它作为一个整体不会被拆散成多行。常见的行内块级元素包括 <img> 和 <input> 等。

最后一种是none，在排版时完全被忽略。

行级排版上下文

Inline Formatting Context (IFC)
只包含行级盒子的容器会创建一个IFC
IFC 内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素*

块级排版上下文

Block Formatting Context (BFC)
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow 不是 visible 的块盒
- display: flow-root;
BFC内的排版规则
- 盒子从上到下摆放
- 垂直 margin 合并
- BFC 内盒子的 margin 不会与外面的合并
- BFC不会和浮动元素重叠

Flex Box （常用）

一种新的排版上下文
它可以控制子级盒子的:
- 摆放的流向(→←↑↓)
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行

ep： image-20230728225349281转存失败，建议直接上传图片文件

默认flex流向为从左到右

Flex-主轴和侧轴

image-20230728225530244转存失败，建议直接上传图片文件

在 Flexbox 中，主轴（main axis）和交叉轴（cross axis）是两个重要的概念，用于描述项目在容器中的排列和对齐方式。

主轴是 Flexbox 布局中的水平方向或垂直方向，取决于 flex-direction 属性的设置。默认情况下，主轴是水平方向，即从左到右（row 方向）。

交叉轴是与主轴垂直的方向。如果主轴是水平方向，则交叉轴是垂直方向；如果主轴是垂直方向，则交叉轴是水平方向。

常见的主轴和交叉轴的对应关系：

主轴方向（默认情况下是水平方向）：从左到右（row 方向）
交叉轴方向（默认情况下是垂直方向）：从上到下（column 方向）

常用的属性：

justify-content：控制项目在主轴上的对齐方式。
align-items：控制项目在交叉轴上的对齐方式。
align-self：控制单个项目在交叉轴上的对齐方式，覆盖 align-items 的设置。
align-content：控制多行项目在交叉轴上的对齐方式。

Flexibility（弹性）

可以设置子项的弹性: 当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
flex-grow 有剩余空间时的伸展能力。如果一个项目的 flex-grow 值大于 0，则它会占据剩余空间的一部分，使得所有的项目按照比例进行放大。
flex-shrink 容器空间不足时收缩的能力。如果一个项目的 flex-shrink 值大于 0，则它会相应地缩小，以使其他项目能够适应容器。
flex-basis 定义没有伸展或收缩时的基础长度

ep： image-20230728230006148转存失败，建议直接上传图片文件

缩写： image-20230728230111835转存失败，建议直接上传图片文件

Grid box（常用）

Grid 布局是一种用于网格化布局的 CSS 模块，它提供了一种强大的方式来创建二维网格布局。通过将容器划分为行和列，并将项目放置在网格单元中，可以轻松地实现复杂的布局结构。

容器和项目：Grid 布局的基础是容器和项目。容器是应用 Grid 布局的父元素，通过设置其 display 属性为 grid 或 inline-grid 来启用 Grid 布局。项目是容器的直接子元素，它们被放置在网格单元中。
网格行和列：Grid 布局通过定义网格行和列来划分容器。通过使用 grid-template-rows 和 grid-template-columns 属性，可以指定网格的行和列的大小和数量。可以使用固定的尺寸值（如像素、百分比）或弹性的尺寸值（如 fr 单位）来定义行和列。
网格单元：网格单元是网格中的一个矩形区域，由交叉点（网格线的交叉点）所定义。项目可以被放置在网格单元中，通过使用 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 属性来指定项目在网格中的位置。
网格轨道：网格轨道是网格行或列之间的空间。可以使用 grid-gap 属性来定义网格轨道之间的间隔。
自动布局：Grid 布局还提供了自动布局的功能。通过使用 grid-auto-rows 和 grid-auto-columns 属性，可以指定在没有显式定义的行和列中，项目的默认大小。
对齐和间距：Grid 布局提供了一系列属性来控制项目在网格中的对齐方式和间距，如 justify-items、align-items、justify-content、align-content 等。

float浮动（多用于图文混排

float 是 CSS 中的一个属性，用于控制元素在文档流中的浮动位置。通过设置元素的 float 属性，可以使其脱离正常的文档流，并向左或向右浮动到其容器的左侧或右侧。

以下是 float 属性的一些关键特点：

值：float 属性可以取两个可能的值：left 和 right。left 值使元素向左浮动，right 值使元素向右浮动。
浮动效果：浮动元素不再占据正常的文档流空间，而是尽可能地向指定方向浮动，直到遇到容器的边缘或其他浮动元素。其它元素会围绕浮动元素进行布局。
破坏文档流：浮动元素会脱离文档流，导致其后的元素填充浮动元素所占据的空间。这可能会导致容器的高度塌陷，需要采取额外的措施来清除浮动（如使用 clearfix 技术）。
图片浮动：float 属性最常用于图像浮动，允许文本环绕在图像周围。
布局效果：通过将多个元素浮动到一侧，可以创建多列布局。浮动元素的宽度通常由其内容决定，但也可以通过设置宽度来控制。

需要注意的是，由于浮动元素的特性，它们可能会对布局产生一些意外的影响。例如，容器可能无法自动调整高度以适应浮动元素，或者浮动元素可能会相互重叠。为了更好地控制布局，现代 CSS 布局技术如 Flexbox 和 Grid 布局通常被推荐使用，而不是过度依赖 float 属性。

position属性

position 属性是 CSS 中用于控制元素定位的属性。它允许开发者根据自己的需要将元素放置在文档中的特定位置，并通过其他属性来调整其布局和层叠顺序。

position 属性有以下几个可能的取值：

static：默认值，元素按照其在文档中出现的顺序进行布局，不进行特殊的定位。top、right、bottom 和 left 属性对 static 元素无效。
relative：元素相对于其正常位置进行定位。通过设置 top、right、bottom 和 left 属性，可以相对于元素在文档流中的初始位置进行偏移。相对定位不会影响其他元素的布局。
absolute：元素从文档流中脱离，相对于最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于文档的初始包含块进行定位。通过设置 top、right、bottom 和 left 属性，可以相对于定位祖先元素进行偏移。绝对定位会影响其他元素的布局，其他元素会忽略绝对定位元素的存在。
fixed（使用于导航栏）：元素相对于视口进行定位，即使页面滚动，元素的位置也保持不变。通过设置 top、right、bottom 和 left 属性，可以相对于视口进行偏移。固定定位不会影响其他元素的布局。
sticky：元素根据滚动容器的滚动位置进行定位。当元素滚动到特定位置时，它将固定在容器中的位置，直到容器滚动到达指定的阈值。通过设置 top、right、bottom 和 left 属性，可以指定元素在容器中的位置。

position 属性结合其他属性（如 top、right、bottom 和 left）一起使用，可以实现各种复杂的布局效果。此外，还可以使用 z-index 属性来控制定位元素的层叠顺序。

深入浅出CSS｜青训营