css全名是‘Cascading Style Sheets',中文名是层叠样式表，css是用于定义网页样式和布局的样式表语言，通过css，可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。
css与html的关系，比如盖一个房子，html相当于房子的骨架，而css相当于装修。
CSS语法
css通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式
选择器{
属性1：属性值1；
属性2：属性值2；
}
1.选择器的声明中可以写无数属性
2.声明的每一行属性，都需要以英文分号结尾
3.声明中的所有属性和值都是以键值对这种形式出现的
css三种导入方式
内联样式
内部样式
外部样式
三种导入方式的优先级：内联样式>内部样式>外部样式，优先级高的会覆盖优先级低的样式

选择器
CSS选择器用于选择想要样式化的HTML元素。CSS选择器可以基于元素类型、类、ID、属性等来选择元素。以下是一些常用的CSS选择器：
元素选择器：根据元素名称选择元素
类选择器：根据元素的类属性选择元素。
ID选择器：根据元素的ID属性选择元素。
属性选择器：根据元素的属性及属性值选择元素。
后代选择器：选择所有在指定元素之内的元素
子元素选择器：选择所有直接子元素。
相邻兄弟选择器：选择紧接在指定元素后
通用兄弟选择器：选择所有指定元素后的同级元素。
伪类选择器：根据元素的状态选择元素。
伪元素选择器：选择元素的特定部分。
属性
background-color：设置元素的背景颜色。
font-family：设置字体系列。
font-size：设置字体大小。
border：设置元素的边框。
border-width：设置边框宽度。
border-style：设置边框样式（如实线、虚线）。
border-color：设置边框颜色。
margin：设置元素的外边距。
padding：设置元素的内边距。
width：设置元素的宽度。
height：设置元素的高度。
display：设置元素的显示类型（如块级、内联）。
position：设置元素的定位类型（如静态、相对、绝对、固定）。
top、right、bottom、left：设置元素相对于其定位上下文的位置。
元素可以按照其显示类型分为三种：块级元素（block-level elements）、行内元素（inline elements）和行内块元素（inline-block elements）。
块级元素：块级元素会独占一行，占据其父容器的全部宽度。常见的块级元素有
、
、
到
、
、等。块级元素可以设置宽度和高度，并且默认情况下，块级元素的上下边距（margin）和上下内边距（padding）会被保留。
行内元素：行内元素不会独占一行，只占据其内容所需的空间。常见的行内元素有、、、、等。行内元素不能设置宽度和高度，其宽度和高度由其内容决定。行内元素的上下边距（margin）和上下内边距（padding）在垂直方向上不会影响其他元素的位置。
行内块元素：行内块元素结合了行内元素和块级元素的特性。行内块元素不会独占一行，但可以设置宽度和高度。常见的行内块元素有、等。行内块元素的上下边距（margin）和上下内边距（padding）会被保留。
可以使用display属性来改变元素的显示类型。例如，可以使用display: block;将元素设置为块级元素，使用display: inline;将元素设置为行内元素，使用display: inline-block;将元素设置为行内块元素。
盒子模型
 CSS盒子模型（Box Model）是网页布局的基础，它定义了元素的内容、内边距、边框和外边距。以下是盒子模型的各个属性：
内容（Content） ：
width：设置元素的宽度。
height：设置元素的高度。
内边距（Padding） ：
padding：设置元素所有边的内边距。
padding-top、padding-right、padding-bottom、padding-left：分别设置元素上、右、下、左的内边距。
边框（Border） ：
border：设置元素的所有边框。
border-width：设置边框的宽度。
border-style：设置边框的样式（如实线、虚线）。
border-color：设置边框的颜色。
border-top、border-right、border-bottom、border-left：分别设置元素上、右、下、左的边框。
外边距（Margin） ：
margin：设置元素的所有外边距。
margin-top、margin-right、margin-bottom、margin-left：分别设置元素上、右、下、左的外边距
浮动
网页布局方式有以下五种： 标准流（普通流、文档流）：网页按照元素的书写顺序依次排列
浮动
定位
Flexbox和Grid（自适应布局）
标准流就是块级占一行，行内元素一行放好多个元素。
浮动属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。相对于父元素浮动，只会在父元素的内部移动。
三大特性：
脱标、一行显示，顶部对齐、具备行内块元素特性。
定位
相对定位：相对于元素在文档流中的正常位置进行定位
绝对定位：相对于其最近的已定位祖先元素进行定位，不占据文档流
固定定位：相对于浏览器窗口进行定位。不占据文档流，固定在屏幕上的位置，不随滚动而滚动
