目录
[2.1 css的编写方式](#2.1 css的编写方式)
[2.2 css选择器](#2.2 css选择器)
[2.3 样式属性](#2.3 样式属性)
[2.4 css包围盒](#2.4 css包围盒)
[2.5 css中的display](#2.5 css中的display)
[2.6 css中的定位](#2.6 css中的定位)
[2.7 css中的浮动与清除](#2.7 css中的浮动与清除)
[2.7 弹性容器](#2.7 弹性容器)
[2.8 字体图标](#2.8 字体图标)
[2.9 渐变与动画](#2.9 渐变与动画)
一、CSS简单介绍
CSS（层叠样式表）是一种用于描述网页样式和外观的样式表语言。它与HTML结合使用，用于控制网页的布局、颜色、字体、大小和其他视觉方面的属性。CSS的设计目标是将样式与内容分离，使得网页的结构和样式可以独立管理和修改。
CSS基本上由一系列规则组成，每个规则由选择器（Selector）和一组声明（Declaration）组成。选择器用于选择HTML中的元素，而声明则定义了与选定元素相关的样式属性和值。
二、css内容
2.1 css的编写方式
1、行内样式表，优先级最高。直接使用style属性写在标签中，只针对这一个标签。
2、内部样式表，在head标签中使用style标签包裹，针对当前HTML中所有满足条件的标签。
3、外部样式表，写在css文件中，通过link引入html中。可以被多个html文件引入使用。
一般先引入外部样式表，再编写内部样式表。
2.2 css选择器
1、四种基本选择器
（1）* 通配符选择器，可以选择所有标签
（2）标签名 标签选择器，匹配固定标签
（3）.类名 类名选择器，匹配所有拥有该类名的选择器
（4）#id id选择器，匹配拥有id的标签
2、5种符号选择器
（1）， 逗号左右满足一个即可被选择
（2）空格 子孙选择器
（3）> 子集选择器
（4）+ 选择相邻的下一个
（5）~ 选择下面多个
3、属性选择器
（1）[attr] 选择拥有该属性的标签
（2）[attr=值] 拥有属性并且值等于
（3）[attr^=值] 拥有属性并且以值为开头
（4）[attr$=值] 拥有属性并且以值为结尾
4、伪类选择器，在正常的选择器后面加：使用
（1）：hover 鼠标划入
（2）：active 鼠标点下
（3）：first-of-type 第一个
（4）:last-of-type 最后一个
（5）:nth-of-type(n) 正数第n个
（6）:nth-last-of-type(n) 倒数第n个
（7）odd 奇数 even 偶数
2.3 样式属性
1、字体相关font-
（1）font-family，字体类型，多个字体使用逗号分隔
（2）font-size，字体大小，默认16px
（3）font-weight，字体粗细，400为normal，700为bold
（4）font-style，italic斜体
2、文本相关text
（1）text-transform，capitalize首字母大写；lowercase全小写；uppercase全大写
（2）text-align，默认left居左，center居中，right居右
（3）text-ident缩进，2em表示缩进两个字符
（4）text-decoration，none去除下划线
3、背景相关background
（1）background-color，背景色
（2）background-image，背景图，优先级高
（3）background-repeat，重复，no-repeat不重复
（4）background-position，位置，left、right、center、top、bottom，也可以直接设置100px，500px
（5）background-size，尺寸，100%，contain长边全部展示，短边补空；cover短边完全展示，长边隐藏
4、列表相关list-style
（1）list-style-type，circle空心圆；disc实心圆；square方块；lower-alpha小写字母；lower-roman罗马数字小写
（2）list-style-position，编号位置，outside外侧；inside内侧
（3）list-style-image，图片，url（）引入
（4）list-style：none，去除所有样式
2.4 css包围盒
1、border上下左右，有属性width、style、color，一般写为：1px solid red
2、padding，内补，只有宽度，使用自己的背景色
3、margin，外部，只有宽度，使用父元素背景色，一般写为margin：0 auto
表示上下为0，左右自动居中
4、padding与margin支持四种写法，有顺序区分
（1）一个数值，表示上下左右都一样
（2）二个数值，上下、左右
（3）三个数值，上、左右、下
（4）四个数值，上、右、下、左
5、更改包围盒计算方式，border-box，
2.5 css中的display
1、inline 行内元素，不可以给宽高
2、block 块元素，占一行，可以给宽高
3、inline-block 行内块，多个块放在一行，可以给宽高
4、none 隐藏，不显示
2.6 css中的定位
1、static 静态定位，从左到右，从上向下
2、relative，相对定位，相对于文档流静态定位发生偏移，占用文档位置，可以top、left等约束
3、absolute 绝对定位，参考外层第一个非static标签发生偏移，不占用文档位置
4、fixed 固定定位，参考浏览器位置
5、sticky 粘性定位，没有达到粘性位置时相当于静态定位，达到粘性位置时相当于固定定位
2.7 css中的浮动与清除
1、float 浮动，分为left和right
（1）left 左浮动，靠左排列，排列在上一个左浮动的右侧
（2）right右浮动，靠右排列，排列在上一个右浮动的右侧
2、clear清除浮动
（1）left，左边不能有左浮动
（2）right，右边不能有右浮动
（3）both，清除左右浮动，后续元素不会被浮动元素覆盖
2.7 弹性容器
display：flex
常用容器属性：
1、flex-direction：row / row-reverse / column / column-reverse
2、flex-wrap：wrap / no-wrap / wrap-reverse
3、justify-content：
flex-start主轴开始位置；
flex-end主轴结束位置；
center主轴居中；
space-between中间有空白；
space-around两边中间都有空白
4、align-items：
flex-start交叉轴起始位置
flex-end交叉轴结束
center居中
5、align-content：
flex-start交叉轴起始位置
flex-end交叉轴结束
center居中
2.8 字体图标
自定义字体：@font-size：font-family：name，src：url（）
！imortant表示最高优先级
2.9 渐变与动画
transition：all 0.5s linear
动画：animation，@keyframes name { 0%{} 100%{}}
animation: name 0.5s linear infinite
transform：rotate（）；translate（）；scale（）
