深入理解CSS
CSS是层叠样式表（Cascading Style Sheets）的缩写，用于对HTML和XML等文档进行样式控制。CSS规范由W3C进行维护，版本自1996年推出第一版以来，不断更新、完善，到目前为止最新版本是CSS3。
本文将从CSS的核心概念、选择器、布局和动画等方面深入理解CSS，并附上相关示例代码。
一. 核心概念
- 层叠
层叠是CSS的核心概念之一，表示对多个样式规则进行优先级排序，并按优先级高低优先应用规则。CSS中优先级顺序为：!important > 行内样式 > ID选择器 > 类选择器/属性选择器/伪类选择器 > 标签选择器/伪元素选择器。
示例代码：
/* 优先应用ID选择器定义的样式 */
#myDiv {
background-color: red;
}
/* 其次应用类选择器定义的样式 */
.demo {
color: green;
}
/* 最后应用标签选择器定义的样式 */
h1 {
font-size: 24px;
}
**
- 盒模型
盒模型是CSS中元素内部的一种排列方式，由内容(content)、内边距(padding)、边框(border)和外边距(margin)四个部分组成。盒模型可以用来控制元素的尺寸和位置。
示例代码：
/* 设置元素的尺寸和边框样式 */
.box {
width: 200px;
height: 150px;
border: 1px solid black;
padding: 10px;
margin: 20px;
}
**
- 权重
权重是应用于样式规则的一个数值，决定了该规则的优先级。在CSS中，权重由选择器确定，选择器的权重由四个部分组成：ID选择器的权值为100，类选择器/属性选择器/伪类选择器的权值为10，标签选择器/伪元素选择器的权值为1，通用选择器的权值为0。
示例代码：
/* ID选择器的权值为100 */
#myDiv {
background-color: red;
}
/* 类选择器的权值为10 */
.demo {
color: green;
}
/* 标签选择器的权值为1 */
h1 {
font-size: 24px;
}
**
二. 选择器
选择器是CSS中用来选择元素或元素组合的语法规则。CSS支持多种选择器类型，包括基本选择器、组合选择器、伪类选择器和伪元素选择器等。
- 基本选择器
基本选择器是CSS中最常用的选择器类型，包括标签选择器、ID选择器、类选择器以及通用选择器。
示例代码：
/* 标签选择器 */
h1 {
font-size: 24px;
}
/* ID选择器 */
#myDiv {
background-color: red;
}
/* 类选择器 */
.demo {
color: green;
}
/* 通用选择器 */
* {
margin: 0;
padding: 0;
}
**
- 组合选择器
组合选择器是通过将多个选择器组合在一起选择元素的方式，包括后代选择器、子元素选择器、相邻兄弟选择器和通用兄弟选择器。
示例代码：
/* 后代选择器 */
.container p {
margin-bottom: 10px;
}
/* 子元素选择器 */
.container > ul {
list-style: none;
}
/* 相邻兄弟选择器 */
h1 + p {
text-align: center;
}
/* 通用兄弟选择器 */
h1 ~ p {
font-size: 16px;
}
**
- 伪类选择器
伪类选择器是用来匹配那些不能用普通选择器匹配的元素状态的选择器，例如:hover、:active、:checked等。
示例代码：
/* 鼠标悬停时改变元素背景色 */
a:hover {
background-color: yellow;
}
/* 选中复选框时对应的label元素改变背景色 */
input[type="checkbox"]:checked + label {
background-color: green;
}
**
- 伪元素选择器
伪元素选择器是用来选取某个元素的某个部分而不是选取它们内部的内容，例如::before和::after。
示例代码：
/* 在元素前插入内容 */
h1::before {
content: "Title:";
}
/* 在元素后插入内容 */
p::after {
content: "End of paragraph.";
}
**
三. 布局
布局是CSS中最核心的一个方面，用于控制元素的位置和大小。CSS提供了多种布局方式，包括常见的块级布局、行内布局和弹性布局，以及比较新的网格布局和多列布局等。
- 块级布局
块级布局是CSS中最基本的布局方式之一，将元素按照块级元素排列，每个块级元素占据一整行。块级元素的特点是：总是在新行中开始；高度、行高、外边距和内边距都可以控制；可以容纳内联元素和其他块级元素。
示例代码：
/* 变换div为块级元素布局 */
div {
display: block;
}
/* 设置div的高度、行高、外边距和内边距 */
div {
height: 200px;
line-height: 200px;
margin: 20px;
padding: 10px;
}
**
- 行内布局
行内布局是将元素按照行内元素排列，每个元素根据文本内容的大小自动排列位置。行内元素的特点是：和相邻元素在同一行上；宽度、高度、内边距和外边距只能设置左右方向的，上下方向受到行框的限制。
示例代码：
/* 变换span为行内元素布局 */
span {
display: inline;
}
/* 设置span的宽度、高度、内边距和外边距 */
span {
width: 100px;
height: 50px;
padding: 10px;
margin: 5px;
}
**
- 弹性布局
弹性布局是CSS3中新增的布局方式，可以在不知道元素大小的情况下，自动调整元素的位置和大小。弹性布局使用flex属性来控制布局方式。
示例代码：
/* 将flex-container变为弹性容器 */
.flex-container {
display: flex;
}
/* 设置flex-container容器中的子元素弹性基础值和比例 */
.flex-container > div {
flex: 1;
}
.flex-container > div:first-child {
flex: 2;
}
**
- 网格布局
网格布局是用来对元素进行二维布局的方式，类似于表格布局。网格容器通过display:grid来定义，子元素通过grid-row、grid-column来指定在网格布局中所处的行和列。网格布局可以配合弹性布局使用，实现更为灵活的布局方式。
示例代码：
/* 将grid-container变为网格容器 */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
/* 设置网格子元素所在列和跨越的列数 */
.grid-item {
grid-column: 1 / span 2;
}
**
四. 动画
动画是CSS的又一大特点，使用CSS动画可以实现页面元素的渐变、旋转、缩放、移动等动态效果，增强页面的可读性和趣味性。CSS动画可以通过使用transition、animation、@keyframes来实现。
- transition
transition是用来在CSS属性值发生变化时，产生一些平滑的过渡效果的方式。transition可以通过设置transition-property、transition-duration、transition-timing-function、transition-delay等属性来控制效果的具体实现。
示例代码：
/* 设置元素的默认状态 */
.box {
height: 100px;
background-color: red;
transition: height 1s ease-in-out 0.5s;
}
/* 设置元素的悬停状态 */
.box:hover {
height: 200px;
background-color: blue;
}
**
- animation
animation是一种更为复杂的动画方式，它可以在多个关键帧之间切换，实现更丰富的动画效果。animation可以通过设置animation-name、animation-duration、animation-timing-function、animation-delay等属性来控制效果的具体实现。
示例代码：
/* 定义动画 */
@keyframes myAnimation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 设置元素应用动画 */
.box {
animation-name: myAnimation;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
