一、CSS介绍

二、CSS基础语法

1.选择器

标签选择器：通过HTML元素的标签名进行选取，如p、div。
类选择器：通过HTML元素的class属性进行选取，使用.开头，如.container。
ID选择器：通过HTML元素的id属性进行选取，使用#开头，如#header。
属性选择器：通过元素的属性值进行选取，如[type="text"]。
伪类选择器：通过元素的状态或位置进行选取，如:hover、:nth-child(2)。

2.声明块

声明块用于设置选中元素的样式属性和值。声明块由一对大括号{}包围，包含一个或多个属性及其对应的值。
CSS属性由属性名和属性值组成，中间用冒号:分隔，每条声明以分号;结束。常见的CSS属性有：

color：设置文本颜色
background：设置背景颜色或图片
font-size：设置字体大小
border：设置边框样式
margin：设置外边距大小
padding：设置内边距大小
width：设置宽度大小

以下是一个简单的CSS代码示例：

p {
  color: blue;
  font-size: 16px;
}

.container {
  background: #f5f5f5;
  margin: 10px;
  padding: 20px;
}

以上是CSS的基础语法，通过选择器和声明块，你可以对指定的HTML元素应用相应的样式。
注:背诵记忆CSS属性是重中之重

3.伪类和伪元素的区别

选择器表示方式不同：伪类使用单个冒号:来表示，而伪元素使用双冒号::来表示。不过，为了保持向后兼容性，某些旧版本的伪元素依然使用单个冒号。
应用范围不同：伪类选择的是处于特定状态的元素，例如:hover（鼠标悬停）、:active（被点击）等。而伪元素则选择的是元素的特定部分，例如::before（前面添加内容）和::after（后面添加内容）。
是否插入内容：伪类仅用于选择元素，并不能实际插入新的内容。而伪元素可以在选中元素的特定位置插入新的内容或样式，使得开发者能够通过CSS添加额外的元素。
语法上的限制：在使用伪元素时，还需要为其添加content属性来指定要插入的内容。而伪类通常只需要直接用作选择器即可。

4.选择器权重计算

CSS选择器的权重（specificity）用于确定在页面中定义多个相同样式属性的情况下，哪个样式将应用于特定的元素。权重是根据选择器的特性和数量来计算的。

内联样式具有最高的权重，为1000。
ID选择器的权重为100。
类选择器、属性选择器和伪类选择器的权重为10。
标签选择器和伪元素选择器的权重为1。

当应用到一个元素上的多个选择器具有相同的权重时，后面出现的选择器将覆盖先前的选择器。

5.继承性

继承性（inheritance）是CSS中的一个特性，指的是某些属性值能够从父元素继承到子元素。这意味着如果在父元素上设置了某个具有继承性的属性的值，那么子元素将默认继承该属性的值，除非显式地在子元素上重新定义该属性的值。

一些常见的具有继承性的属性包括：

字体相关属性：font、font-size、font-family、font-weight等。
文本相关属性：color、line-height、text-align、text-decoration等。
盒子模型属性：margin、padding等。
表格相关属性：border-collapse、border-spacing等。

然而，并非所有属性都具有继承性。例如，宽度（width）、高度（height）、背景图片（background-image）等属性通常不会被子元素继承。

就近原则（cascading principle）是CSS中指定样式应用优先级的规则。按照就近原则，当同一个元素被多个选择器选中时，其样式将从具有最近位置的选择器那里继承。

具体来说，就近原则可以简化为以下几个层次的优先级：

内联样式的样式表优先级最高，将覆盖其他样式。
ID选择器的样式表优先级次之。
类选择器、属性选择器和伪类选择器的样式表优先级比标签选择器高。
具有相同优先级的多个选择器时，后面出现的选择器将覆盖先前的选择器。

三、盒模型

1.盒模型的基本概念

盒模型是CSS中用于描述和布局HTML元素的基本概念。它将每个HTML元素视为一个矩形的盒子，由四个部分组成：内容区域、内边距、边框和外边距。

2.盒模型的布局

内容溢出处理:指当元素的内容超出其指定的尺寸或容器时，如何处理溢出的部分。在CSS中，可以使用一些属性和值来控制内容溢出的处理方式。

行内块元素和流动性：当需要将块级元素转换为行内块元素时，可以使用CSS的display属性来实现。

将元素转换为行内块元素：使用display属性将元素的display值设置为"inline-block"。

.block-element {
  display: inline-block;
}

这样，该元素就会具有行内块元素的特性，可以在同一行内显示且可以设置宽度、高度等。

2.调整元素的流动性：

浮动元素：使用CSS的float属性，可以将元素设置为浮动。比如，将元素向左浮动可以使用float: left;。

.float-element {
  float: left;
}

清除浮动：如果希望解决由浮动元素引起的父元素高度塌陷问题，可以使用clearfix技巧。创建一个clearfix的CSS类，并将其应用于浮动元素的父元素上。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.parent-element {
  /* 添加clearfix类 */
  /* 清除浮动元素的影响 */
  /* 防止父元素高度塌陷 */
  overflow: auto;
}

margin的塌陷:在某些情况下，相邻的元素的垂直外边距会合并，导致它们之间的间距比预期的要小或消失。

实现盒子居中

使用margin属性和auto值实现水平居中：
```
.box {
  margin-left: auto;
  margin-right: auto;
}
```
这将使盒子在水平方向上居中显示。这适用于具有块级属性（display: block）的盒子。
使用flex布局实现居中：
在容器元素上应用flex布局，并使用align-items和justify-content属性来实现水平和垂直居中。
```
.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
```
这将使容器内的盒子在水平和垂直方向上均居中。
使用绝对定位实现居中：
在父容器上设置position: relative;，在子盒子上设置position: absolute;和以下样式：
```
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```
这将使用绝对定位和transform属性将子盒子在父容器中居中显示。
使用网格布局实现居中：
将父容器设为网格容器，使用grid布局的place-items: center;属性将盒子在中心定位。
```
.container {
  display: grid;
  place-items: center;
}
```

盒模型的盒子模型类型：内容盒模型（content-box）和边框盒模型（border-box）。

内容盒模型（content-box）：
- 默认的盒子模型类型。
- 宽度和高度仅应用于内容区域。
- 内容区域宽度 = width - 左右内边距 - 左右边框。
- 内容区域高度 = height - 上下内边距 - 上下边框。
- 内容盒模型不包含内边距和边框，它们会增加盒子的总尺寸。
边框盒模型（border-box）：
- 设置盒子模型类型为 border-box，将宽度和高度应用于整个盒子，包括内容区域、内边距和边框。
- 宽度和高度直接指定整个盒子的尺寸，不会减去内边距和边框的大小。
- 内容区域的尺寸会受到内边距和边框的影响，并自动调整以适应设置的总体尺寸。

为了使用边框盒模型（border-box），可以在 CSS 中使用 box-sizing 属性进行设置。

.box {
  box-sizing: border-box;
}

使用边框盒模型（border-box）可以更方便地控制元素的尺寸，特别是在响应式设计和布局中更加灵活。它能更好地管理内容、内边距和边框所占据的空间，简化了盒子尺寸的计算和调整过程。

C# 深入理解事件（event）机制