CSS（Cascading Style Sheets）是一种用于描述HTML或XML文档外观的样式表语言。CSS的主要作用是将文档的内容与表现形式分离，使得开发者可以更方便地控制网页的布局、颜色、字体等样式。
CSS语法由选择器和声明块组成。选择器用于指定要应用样式的HTML元素，声明块包含一个或多个声明，每个声明由属性和值组成。
selector {
property: value;
}
CSS可以通过以下三种方式引入到HTML文档中：
内联样式：直接在HTML元素的style属性中定义样式。
<p style="color: red;">这是一个段落。</p>
内部样式表：在HTML文档的<head>部分使用<style>标签定义样式。
<head>
<style>
p {
color: red;
}
</style>
</head>
外部样式表：通过<link>标签引入外部CSS文件。
<head>
<link rel="stylesheet" href="styles.css">
</head>
CSS样式的优先级决定了当多个样式规则应用于同一个元素时，哪个规则会被应用。优先级从高到低依次为：
当优先级相同时，后定义的样式会覆盖先定义的样式。
CSS盒模型是CSS布局的基础，每个HTML元素都可以看作是一个矩形的盒子。盒模型由内容区、内边距（padding）、边框（border）和外边距（margin）组成。
CSS盒模型分为标准盒模型和IE盒模型。两者的区别在于宽度和高度的计算方式。
标准盒模型：元素的宽度和高度只包括内容区，不包括内边距、边框和外边距。
box-sizing: content-box;
IE盒模型：元素的宽度和高度包括内容区、内边距和边框，但不包括外边距。
box-sizing: border-box;
在标准盒模型中，元素的总宽度和总高度计算公式如下：
总宽度 = 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
在IE盒模型中，元素的总宽度和总高度计算公式如下：
总宽度 = width + margin-left + margin-right
总高度 = height + margin-top + margin-bottom
元素选择器：选择指定类型的HTML元素。
p {
color: red;
}
类选择器：选择具有指定类名的元素。
.class-name {
color: red;
}
ID选择器：选择具有指定ID的元素。
#id-name {
color: red;
}
通配符选择器：选择所有元素。 “`css
”`
后代选择器：选择指定元素的后代元素。
div p {
color: red;
}
子元素选择器：选择指定元素的直接子元素。
div > p {
color: red;
}
相邻兄弟选择器：选择指定元素的下一个兄弟元素。
h1 + p {
color: red;
}
通用兄弟选择器：选择指定元素的所有兄弟元素。
h1 ~ p {
color: red;
}
存在属性选择器：选择具有指定属性的元素。
[title] {
color: red;
}
属性值选择器：选择具有指定属性值的元素。
[title="example"] {
color: red;
}
属性值前缀选择器：选择属性值以指定字符串开头的元素。
[title^="ex"] {
color: red;
}
属性值后缀选择器：选择属性值以指定字符串结尾的元素。
[title$="ple"] {
color: red;
}
属性值包含选择器：选择属性值包含指定字符串的元素。
[title*="amp"] {
color: red;
}
:hover：选择鼠标悬停的元素。
a:hover {
color: red;
}
:active：选择被激活的元素。
a:active {
color: red;
}
:focus：选择获得焦点的元素。
input:focus {
border-color: red;
}
:nth-child(n)：选择父元素的第n个子元素。
li:nth-child(2) {
color: red;
}
:nth-of-type(n)：选择父元素的第n个指定类型的子元素。
p:nth-of-type(2) {
color: red;
}
::before：在元素内容前插入内容。
p::before {
content: "前缀";
}
::after：在元素内容后插入内容。
p::after {
content: "后缀";
}
::first-letter：选择元素的第一个字母。
p::first-letter {
font-size: 2em;
}
::first-line：选择元素的第一行。
p::first-line {
font-weight: bold;
}
<div>、<p>、<h1>等。<span>、<a>、<img>等。float属性使元素脱离普通流，向左或向右浮动。position属性使元素脱离普通流，进行绝对定位或相对定位。display: flex实现弹性盒子布局。display: grid实现网格布局。水平居中：
margin: 0 auto;text-align: center;justify-content: center;justify-items: center;垂直居中：
line-height等于容器高度。display: flex; align-items: center;align-items: center;align-items: center;水平垂直居中：
display: flex; justify-content: center; align-items: center;display: grid; place-items: center;浮动（float）是CSS中用于实现元素水平排列的布局方式。通过设置float属性，可以使元素脱离普通流，向左或向右浮动。
浮动元素会脱离普通流，可能导致父元素高度塌陷。清除浮动的方法有：
clearfix：在父元素上添加clearfix类。
.clearfix::after {
content: "";
display: block;
clear: both;
}
overflow：在父元素上设置overflow: hidden;或overflow: auto;。
clear：在浮动元素后添加一个空元素，并设置clear: both;。
<div style="clear: both;"></div>
定位（position）是CSS中用于控制元素位置的布局方式。通过设置position属性，可以使元素脱离普通流，进行绝对定位或相对定位。
通过top、right、bottom、left属性可以设置元素的偏移量。
.element {
position: absolute;
top: 10px;
left: 20px;
}
z-index属性用于控制元素的堆叠顺序。值越大，元素越靠前。
.element {
position: absolute;
z-index: 1;
}
Flexbox（弹性盒子布局）是CSS3中引入的一种新的布局方式，用于实现灵活的、响应式的布局。
display: flex;或display: inline-flex;将元素变为Flex容器。flex-direction：设置Flex项目的排列方向。
row：水平排列（默认值）。row-reverse：水平反向排列。column：垂直排列。column-reverse：垂直反向排列。justify-content：设置Flex项目在主轴上的对齐方式。
flex-start：左对齐（默认值）。flex-end：右对齐。center：居中对齐。space-between：两端对齐，项目之间的间隔相等。space-around：项目两侧的间隔相等。align-items：设置Flex项目在交叉轴上的对齐方式。
stretch：拉伸以填充容器（默认值）。flex-start：顶部对齐。flex-end：底部对齐。center：居中对齐。baseline：基线对齐。flex-wrap：设置Flex项目是否换行。
nowrap：不换行（默认值）。wrap：换行。wrap-reverse：反向换行。align-content：设置多行Flex项目在交叉轴上的对齐方式。
stretch：拉伸以填充容器（默认值）。flex-start：顶部对齐。flex-end：底部对齐。center：居中对齐。space-between：两端对齐，行之间的间隔相等。space-around：行两侧的间隔相等。order：设置Flex项目的排列顺序。
.item {
order: 1;
}
flex-grow：设置Flex项目的放大比例。
.item {
flex-grow: 1;
}
flex-shrink：设置Flex项目的缩小比例。
.item {
flex-shrink: 1;
}
flex-basis：设置Flex项目在分配多余空间之前的初始大小。
.item {
flex-basis: 100px;
}
align-self：设置单个Flex项目在交叉轴上的对齐方式。
.item {
align-self: center;
}
Grid（网格布局）是CSS3中引入的一种新的布局方式，用于实现复杂的二维布局。
display: grid;或display: inline-grid;将元素变为Grid容器。grid-template-columns：设置网格的列宽。
.container {
grid-template-columns: 100px 200px 100px;
}
grid-template-rows：设置网格的行高。
.container {
grid-template-rows: 100px 200px 100px;
}
grid-template-areas：设置网格的区域。
.container {
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
grid-gap：设置网格的行间距和列间距。
.container {
grid-gap: 10px;
}
justify-items：设置网格项目在单元格内的水平对齐方式。
.container {
justify-items: center;
}
align-items：设置网格项目在单元格内的垂直对齐方式。
.container {
align-items: center;
}
justify-content：设置网格在容器内的水平对齐方式。
.container {
justify-content: center;
}
align-content：设置网格在容器内的垂直对齐方式。
.container {
align-content: center;
}
grid-column-start：设置网格项目的起始列。
.item {
grid-column-start: 1;
}
grid-column-end：设置网格项目的结束列。
.item {
grid-column-end: 3;
}
grid-row-start：设置网格项目的起始行。
.item {
grid-row-start: 1;
}
grid-row-end：设置网格项目的结束行。
.item {
grid-row-end: 3;
}
grid-area：设置网格项目的区域。
.item {
grid-area: header;
}
justify-self：设置单个网格项目在单元格内的水平对齐方式。
.item {
justify-self: center;
}
align-self：设置单个网格项目在单元格内的垂直对齐方式。
.item {
align-self: center;
}
响应式设计（Responsive Design）是一种使网页在不同设备上都能良好显示的设计方法。通过使用媒体查询、弹性布局和图片等技术，可以实现网页的自适应布局。
媒体查询（Media Query）是CSS3中引入的一种技术，用于根据设备的特性（如屏幕宽度、高度、分辨率等）应用不同的样式。
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
弹性布局（Flexible Layout）通过使用百分比、em、rem等单位，使网页的布局能够根据屏幕大小自动调整。
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
通过设置max-width: 100%;和height: auto;，可以使图片在不同设备上自适应显示。
img {
max-width: 100%;
height: auto;
}
常用的响应式设计框架有Bootstrap、Foundation
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
