# CSS 基础

# 规则集

CSS p 声明，其中 color 为 red

	p {
	color: red;
	}

整个结构称为规则集（规则集通常简称规则），组成部分如下：
- 选择器（Selector）
  - HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 <p> 元素）。要给不同元素添加样式，只需要更改选择器。
- 声明（Declaration）
  - 一个单独的规则，如 color: red; 用来指定添加样式元素的属性。
- 属性（Properties）
  - 改变 HTML 元素样式的途径（本例中 color 就是 <p> 元素的属性）。CSS 中，由编写人员决定修改哪个属性以改变规则。
- 属性的值（Property value）
  - 在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。
注意其他重要的语法：

除了选择器部分，每个规则集都应该包含在成对的大括号里（ {} ）。
在每个声明里要用冒号（ : ）将属性与属性值分隔开。
在每个规则集里要用分号（ ; ）将各个声明分隔开。

如果要同时修改多个属性，只需要将它们用分号隔开，就像这样：
p {
color: red;
width: 500px;
border: 1px solid black;
}

# 选择器

# 选择多个元素

也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如：

	p,
	li,
	h1 {
	color: red;
	}

# 不同类型的选择器

选择器有许多不同的类型。上面只介绍了元素选择器，用来选择 HTML 文档中给定的元素。但是选择操作可以更加具体。下面是一些常用的选择器类型：

选择器名称	选择的内容	示例
元素选择器（也称作标签或类型选择器）	所有指定类型的 HTML 元素	`p` 选择 `<p>`
ID 选择器	具有特定 ID 的元素。单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID	`#my-id` 选择 `<p id="my-id">` 或 `<a id="my-id">`
类选择器	具有特定类的元素。单一页面中，一个类可以有多个实例	`.my-class` 选择 `<p class="my-class">` 和 `<a class="my-class">`
属性选择器	拥有特定属性的元素	`img[src]` 选择 `<img src="myimage.png">` 但不是 `<img>`
伪类选择器	特定状态下的特定元素（比如鼠标指针悬停于链接之上）	`a:hover` 选择仅在鼠标指针悬停在链接上时的 `<a>` 元素
运算符选择器	运算符（>）被称为子元素选择器。它选择指定元素的直接子元素。	`article > p` 表示选择所有直接作为 `<article>` 元素子元素的 `<p>` 元素。这意味着只有作为 `<article>` 的直接子元素的 `<p>` 元素会被选择，而不包括 `<article>` 下进一步嵌套的 `<p>` 元素。

# 字体和文本

	html {
	font-size: 10px; /* px 表示 “像素（pixel）”: 基础字号为 10 像素 */
	font-family: "Open Sans", sans-serif; /* 这应该是你从 Google Fonts 得到的其余输出。 */
	}

	h1 {
	font-size: 60px;
	text-align: center;
	}

	p,
	li {
	font-size: 16px;
	line-height: 2;
	letter-spacing: 1px;
	}

text-align：对齐方式。该属性设置块元素或者单元格框的行内内容的水平对齐。这意味着其效果和 vertical-align 类似，但是是水平方向的。效果参考 text-align - CSS：层叠样式表 | MDN (mozilla.org)
line-height：行间距。该属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。效果参考 line-height - CSS：层叠样式表 | MDN (mozilla.org)
letter-spacing：字符间距。该属性用于设置文本字符的间距表现。在渲染文本时添加到字符之间的自然间距中。 letter-spacing 的正值会导致字符分布得更远，而 letter-spacing 的负值会使字符更接近。效果参考 letter-spacing - CSS：层叠样式表 | MDN (mozilla.org)

# 盒子模型

padding （内边距）：是指内容周围的空间。在下面的例子中，它是段落文本周围的空间。
border （边框）：是紧接着内边距的线。
margin （外边距）：是围绕元素边界外侧的空间。
content 则是 HTML 元素的内容

# 内容 (Content)

内容是盒子模型的中心，它包含了实际的文本、图片等元素。内容区域是盒子模型中唯一不可或缺的部分，其他三部分都是可选的。

内容区的尺寸由元素的宽度（width）和高度（height) 决定，但可以通过设置 box-sizing 属性来改变这一行为。

下面通过代码例子来了解一下内容区：

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	.box {
	width: 200px;
	height: 100px;
	background-color: lightblue;
	border: 2px solid black;
	padding: 10px;
	margin: 20px;
	box-sizing: content-box; /* 默认值 */
	}
	</style>
	<meta charset="UTF-8">
	</head>
	<body>


	<div class="box">这是一个盒子模型的例子。</div>


	</body>
	</html>

PS：为什么看起来在左上角
HTML 中的元素默认情况下是从左上角开始显示的。在网页中，页面的坐标原点通常是左上角，坐标轴向右和向下延伸
这意味着，当浏览器渲染 HTML 元素时，它们从页面的左上角开始定位和显示。这种默认行为可以通过 CSS 来改变，例如使用 position 属性和 top 、 right 、 bottom 、 left 属性来控制元素的定位，但如果不指定位置属性，默认情况下元素会从页面的左上角开始显示。

box-sizing

content-box
- 默认值
- 标准盒子模型。 width 与 height 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）（即内边距、边框和外边距都在这个盒子的外部）
- 如果设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中
- 尺寸计算公式：
  - width = 内容的宽度
  - height = 内容的高度
  - 宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）
boder-box
- width 和 height 属性包括内容，内边距和边框，但不包括外边距（即填充和边框将在盒子内）
- 即使在 border-box 盒模型下，也无法通过设置边框或内边距的方式使得元素的内容区域完全消失或变为零 (但是设置 content-box 大小可以让内容区域变成零)
- 尺寸计算公式：
  - width = border + padding + 内容的宽度
  - height = border + padding + 内容的高度

暂时不更

# 内边距 (Padding)

内边距是内容的缓冲区，它位于内容和边框之间。通过设置内边距，我们可以在内容和边框之间创建空间，让页面看起来不会太过拥挤。内边距是内容区和边框之间的距离，会影响到整个盒子的大小。

以下为 css 中单独设置各边边距时的属性
- padding-top: ; 上内边距
- padding-left:; 左内边距
- padding-right:; 右内边距
- padding-bottom:; 下内边距代码示例
PS
1. 如果没有 left 值，则使用 right 代替
2. 如果没有 bottom 值，则使用 top 代替
3. 如果没有 right 值，则使用 top 值代替

以下为单独使用 padding 时的属性值规则

	/* 应用于所有边 */
	padding: 1em;

	/* 上边下边 \| 左边右边 */
	padding: 5% 10%;

	/* 上边 \| 左边右边 \| 下边 */
	padding: 1em 2em 2em;

	/* 上边 \| 右边 \| 下边 \| 左边 */
	padding: 5px 1em 0 2em;

即顺时针应用
不设置 padding ，默认值为 0px

例子

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>盒子模型</title>
	<style>
	.box1 {
	width: 200px;
	height: 200px;
	background-color: #bfa; /* 对整个 box1 背景全部设置成 #bfa, 包括 content 区域 */
	/* padding-top:30px ;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 30px; */
	padding: 40px;
	border: 10px transparent solid; /* 透明边框 (transparent) 的效果是让边框看起来是透明的，即没有颜色填充。但是，它不会影响到 .box1 的背景色或任何其他元素在其背景上的显示 */
	}
	.box1:hover {
	border: 10px red solid;
	}

	/*
	* 创建一个子元素 box2 占满 box1，box2 把内容区撑满了，并且实现了覆盖 box1 内容区的颜色，通过
	width: 100%;
	height: 100%;
	进行填满操作
	*/
	.box2 {
	width: 100%;
	height: 100%;
	background-color: yellow;
	}
	</style>
	</head>
	<body>
	<div class="box1">
	<div class="box2"></div>
	</div>
	</body>
	</html>

注意，上图的绿色部分 = padding+border

** 下面展示 padding , border , content 范围

黄色部分即 content
绿色部分即 padding
红色部分即 border （鼠标放上去后显示了边框实际占据的范围）

.box2 并不会被 .box1 覆盖的原因：

层叠顺序（Stacking Order）：HTML 元素有一个层叠顺序，也称为 z-index 属性。默认情况下，子元素会在其父元素的内容之上显示。因此，即使 .box2 是 .box1 的子元素，它也会在视觉上位于 .box1 的内容之上。
背景颜色覆盖： .box2 设置了背景颜色为黄色 ( background-color: yellow; )，这种设置使得 .box2 的背景色覆盖了 .box1 的内容区域。无论 .box1 的背景色如何或者是否设置了背景图片， .box2 的背景色会显示在最上层。
边框样式：虽然 .box1 设置了边框 ( border: 10px transparent solid; )，但是边框不会覆盖 .box2 ，因为边框样式仅限于 .box1 的边界之内，不会影响到子元素的覆盖。

因此， .box2 的背景色在视觉上覆盖了 .box1 的内容区域，而不会被 .box1 的任何边框或背景所覆盖。

# 边框 (Border）

边框围绕在内边距的外围，它可以是实线、虚线或者其他样式。边框用于定义内边距和外边距之间的界限，同时也起到了美化元素的作用。

边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部，设置边框必须指定三个样式:

边框大小： border-width
边框样式： border-style
边框颜色： border-color

border 属性

border 属性是一个复合属性，可以一次性设置边框的多个属性，包括边框宽度、样式和颜色。
语法形式为 border: [border-width] [border-style] [border-color]; ，其中各个属性可选，如果省略，则使用默认值。
- border-width：默认值 medium
- border-style：默认值 none
  - border-style 默认值是 none ，这意味着如果你只修改 border-width 和 border-color 是不会出现边框的。
- border-color: 默认值黑色 ( #000 或者 rgb(0, 0, 0) )

# border-width

概念

此属性是以下 CSS 属性的简写：

语法

	/* 关键字值 */
	border-width: thin;
	border-width: medium;
	border-width: thick;

	/* <length> 值 */
	border-width: 4px;
	border-width: 1.2rem;

	/* 顶部和底部 \| 左侧和右侧 */
	border-width: 2px 1.5em;

	/* 顶部 \| 左侧和右侧 \| 底部 */
	border-width: 1px 2em 1.5cm;

	/* 顶部 \| 右侧 \| 底部 \| 左侧 */
	border-width: 1px 2em 0 4rem;

	/* 全局值 */
	border-width: inherit;
	border-width: initial;
	border-width: revert;
	border-width: revert-layer;
	border-width: unset;

border-width 属性可以通过一个、两个、三个或四个值来指定，指定方式参考 padding

当指定一个值时，该宽度将应用于四条边。
当指定两个值时，第一个宽度应用于顶部和底部，第二个宽度应用于左侧和右侧。
当指定三个值时，第一个宽度应用于顶部，第二个宽度应用于左侧和右侧，第三个宽度应用于底部.
当指定四个值时，这些宽度按照顶部、右侧、底部和左侧的顺序（顺时针）进行应用。

# border-style

该属性用于描述边框样式。它可以有以下取值：

取值	形式
`none`	和关键字 `hidden` 类似，不显示边框。在这种情况下，如果没有设定背景图片， `border-width` 计算后的值将是 `0` ，即使先前已经指定过它的值。在单元格边框重叠情况下， `none` 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。
`hidden`	和关键字 `none` 类似，不显示边框。在这种情况下，如果没有设定背景图片， `border-width` 计算后的值将是 `0` ，即使先前已经指定过它的值。在单元格边框重叠情况下， `hidden` 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。
`dotted`	显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 `border-width` 计算值的一半。
`dashed`	显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。
`solid`	显示为一条实线。
`double`	显示为一条双实线，宽度是 `border-width` 。
`groove`	显示为有雕刻效果的边框，样式与 `ridge` 相反。
`ridge`	显示为有浮雕效果的边框，样式与 `groove` 相反。
`inset`	显示为有陷入效果的边框，样式与 `outset` 相反。当它指定到 `border-collapse` 为 `collapsed` 的单元格时，会显示为 `groove` 的样式。
`outset`	显示为有突出效果的边框，样式与 `inset` 相反。当它指定到 `border-collapse` 为 `collapsed` 的单元格时，会显示为 `ridge` 的样式。

例子:

	border-style: inset;
	border-style: dashed solid;
	border-style: dashed double none;
	border-style: dashed groove none dotted;

PS
生效顺序和参考 padding 或者 border-width

# border-color

概念

此属性是以下 CSS 属性的简写：

语法

	/* border-color: color; 单值语法 */
	border-color: red;

	/* border-color: vertical horizontal; 双值语法 */
	border-color: red #f015ca;

	/* border-color: top horizontal bottom; 三值语法 */
	border-color: red yellow green;

	/* border-color: top right bottom left; 四值语法 */
	border-color: red yellow green blue;

	border-color: inherit;

PS
生效顺序和参考 padding 或者 border-width

其值为 [color](- CSS：层叠样式表 | MDN (mozilla.org)) 值

最常用使用方式为 HEX 值和直接写颜色

# 例子

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>border测试</title>
	<style>


	.box {
	width: 0px;
	height: 0px;
	/* background-color: rgb(222, 255, 170); */
	/* 边框的大小如果省略，有默认值，大概 1-3px ，不同的浏览器默认大小不一样
	border-width 后可跟多个值
	四个值上右下左
	三个值上左右下
	二个值上下左右
	一个值上下左右

	单独设置某一边的边框宽度
	border-bottom-width
	border-top-width
	border-left-width
	border-right-width
	*/
	border-width: 20px;
	/* border-left-width:40px ; */
	/*
	边框的样式
	border-style 可选值
	默认值：none
	实线 solid
	虚线 dashed
	双线 double
	点状虚线 dotted
	*/
	border-style: solid;
	/* 设置边框的颜色默认值是黑色
	border-color 也可以跟多个值
	四个值上右下左
	三个值上左右下
	二个值上下左右
	一个值上下左右
	对应的方式跟 border-width 是一样
	单独设置某一边的边框颜色
	border-XXX-color: ;
	*/
	border-color: transparent transparent red transparent ;
	}
	.box1{
	width: 200px;
	height: 200px;
	background-color: turquoise;
	/* 简写 border
	1、同时设置边框的大小，颜色，样式，没有顺序要求
	2、可以单独设置一个边框
	border-top:; 设置上边框
	border-right 设置右边框
	border-bottom 设置下边框
	border-left 设置左边框
	3、去除某个边框
	border:none;
	*/
	border: 10px solid blue;
	border-bottom: none;
	/* border-top:10px double green ; */

	}
	</style>
	</head>
	<body>
	<div class="box"></div>
	<div class="box1"></div>
	</body>
	</html>

box 变成三角形原因：content 变成零，缩成一个点，而边框最外层需要占据设置的 20px 大小，故变成三角形

# 外边距 (Margin)

外边距是元素与外界的间隔，它决定了元素与其他元素之间的距离。通过调整外边距，我们可以控制元素之间的相互位置关系，从而影响整体布局。

margin-top : 正值元素向下移动负值元素向上移动
margin-left : 正值元素向右移动负值元素向左移动
margin-bottom : 正值元素自己不动，其靠下的元素向下移动，负值元素自己不动，其靠下的元素向上移动
margin-right : 正值负值都不动

语法

	/* 应用于所有边 */
	margin: 1em;
	margin: -3px;

	/* 上边下边 \| 左边右边 */
	margin: 5% auto;

	/* 上边 \| 左边右边 \| 下边 */
	margin: 1em auto 2em;

	/* 上边 \| 右边 \| 下边 \| 左边 */
	margin: 2px 1em 0 auto;

	/* 全局值 */
	margin: inherit;
	margin: initial;
	margin: unset;

在 CSS 中， margin: 5%; 表示将元素的外边距设置为相对于其包含块宽度的百分比值。具体来说：

如果一个元素的宽度是 100px，并且它的 margin 设置为 5%; ，那么它的外边距将是其包含块宽度的 5%。
如果元素的宽度是 200px，并且它的 margin 设置为 5%; ，那么它的外边距将是其包含块宽度的 10%（即 200px 的 5%）。

这种设置方式允许你根据相对比例来调整元素的外边距，使得在不同尺寸的布局中保持一致的外观效果。

元素的宽度指的是元素的内容区域的宽度，不包括边框（border）、内边距（padding）和外边距（margin）。

具体来说，在 CSS 的盒模型中，有两种常见的盒模型：

content-box 盒模型： 元素的宽度仅包括内容区域的宽度，不包括边框和内边距。如果你设置一个元素的宽度为 100px，那么这个 100px 就是指元素的内容区域的宽度。
border-box 盒模型： 元素的宽度包括内容区域、边框和内边距的总和。如果你设置一个元素的宽度为 100px，同时设置了 10px 的边框和 20px 的内边距，那么元素在页面上占据的空间就是 100px（内容区域） + 10px（左边框） + 10px（右边框） + 20px（左内边距） + 20px（右内边距），总共是 160px。

在以上两种盒模型中，元素的宽度都指的是内容区域的宽度。因此，无论是 content-box 还是 border-box 盒模型，设置元素的宽度都是指内容区域的宽度，不包括边框和内边距。

margin: 1em; 表示将元素的外边距设置为相对于其字体大小（font-size）的倍数。具体来说：

如果一个元素的字体大小（font-size）为 16px，并且它的 margin 设置为 1em; ，那么它的外边距将是 16px 的倍数，即 16px。
如果元素的字体大小为 20px，并且它的 margin 设置为 1em; ，那么它的外边距将是 20px 的倍数，即 20px。

em 是一个相对单位，它基于元素的字体大小。因此， margin: 1em; 的效果会根据元素的字体大小而变化。

在 CSS 中，将外边距（margin）设置为 auto 可以实现元素在其父容器中的水平居中对齐。这是因为在 CSS 盒模型中，外边距为 auto 的表现是尽可能地扩展，从而使得元素在其可用空间内水平居中。

具体来说，当你将一个元素的左右外边距都设置为 auto 时，浏览器会按照以下规则处理：

水平居中对齐： 如果元素的外边距左右同时设置为 auto ，浏览器会尝试平均分配左右外边距，从而使得元素在其父容器内水平居中对齐。
均分外边距： 如果容器的宽度大于元素的宽度，那么左右外边距将会增加，直到元素被放置在容器的中心位置。如果容器的宽度小于元素的宽度，外边距可能会被调整以确保元素完全可见。

这种机制使得通过将外边距设置为 auto ，可以轻松地实现元素在其父容器中的水平居中对齐，而不需要明确知道容器和元素的具体宽度。

# 盒子大小

盒子的大小指的是盒子的宽度和高度。大多数初学者容易将宽度和高度误解为 width 和 height 属性，然而默认情况下 width 和 height 属性只是设置 content（内容）部分的宽和高。

盒子真正的宽和高按下面公式计算

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

我们还可以用带属性的公式表示：

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

上面说到的是默认情况下的计算方法，另外一种情况下，width 和 height 属性设置的就是盒子的宽度和高度。

盒子的宽度和高度的计算方式由 box-sizing 属性控制。

box-sizing 属性值

content-box： 默认值，width 和 height 属性分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距、边框、外边距。

border-box： 为元素设定的 width 和 height 属性决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit： 规定应从父元素继承 box-sizing 属性的值

当 box-sizing：content-box 时，这种盒子模型成为标准盒子模型；
当 box-sizing: border-box 时，这种盒子模型称为 IE 盒子模型。

# 外边距折叠

参考
CSS 中的外边距折叠问题及其 4 种解决方法总结（完整版）-CSDN 博客
深入理解 CSS 外边距折叠（Margin Collapse） (youzan.com)

前端三件套