全局选择器：可以与任何元素匹配，优先级最低，一般做样式初始化

*{}

类选择器：规定用圆点 . 来定义，针对你想要的所有标签使用优点灵活

class(以"."来定义)属性的特点：1.类选择器可以被多种标签使用

                        2.类名不能以数字开头 

                        3.同一个标签可以使用多个类选择器，要用空格隔开

ID选择器（以“#“来定义）：针对某一个特定的标签来使用，只能使用一次。

字体属性：颜色（color）,大小(font-size)，加粗[font-weight:bold(粗)/bolder（更粗）/light（细）/lighter（更细）/100~900(400=默认，700=bold)]，文字样式[font-style:normal(默认)/italic(斜体)]

背景属性：background-color：设置背景颜色

             background-image：设置元素的背景图像 元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下
             
             background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分

             background-repeat：设置如何平铺背景图像(默认值是水平垂直都平铺)

         background-size：设置背景图像的大小

       background-position：设置背景图像的起始位置，其默认值是：0%0%

文本属性：

text-align ：元素文本的水平对齐方式

text-decoration：规定添加到文本的修饰，下划线、上划线、删除线等

text-indent：规定文本块中首行文本的缩进

**表格边框 **（border）：大小（px），边框线样式（solid实线），边框线颜色 （color）

**折叠边框 **（border-collapse）：设置表格的边框是否被折叠成一个单一的边框或隔开

表格宽度和高度 width和height属性定义表格的宽度和高度

表格文字对齐 表格中的文本对齐和垂直对齐属性（默认为左中对齐）

text-align：设置水平对齐方式，向左，右，或中心

                垂直对齐属性设置垂直对齐（上top ，中center ，下bottom）

**表格填充 **：如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性

表格颜色 ：下面的例子指定边框的颜色，和th元素的文本和背景颜色

关系选择器分类：

后代选择器 ：选择所有被E元素包含的F元素，中间用空格隔开

子代选择器 ：选择所有作为元素的直接子元素F,对更深一层的元素不起作用，用>表示

相邻兄弟选择器 ：选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素(向下选择)

通用兄弟选择器 ：选择E元素之后的所有兄弟元素F，作用于多个元素，用～隔开

CSS盒子模型(Box Model）

外边距(margin),边框(border),内边距(padding),和实际内容(content)

弹性盒模型(flex box)：需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

display：display:flex开启弹性盒 /display::flex:属性设置后子元素默认水平排列 /flex-direction弹性子元素在父容器中的位置

row:横向从左到右排列（左对齐），默认的排列方式

   row-reverse:反转横向排列（右对齐，从后往前排，最后一项排在最前面）

column:纵向排列

          column-reverse:反转纵向排列，从后往前排，最后一项排在最上面

justify-content（内容对齐)：应用在弹性容器上，把弹性项沿着弹性容器的主轴线(main axis)对齐

align-items：设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式 语法

flex-start弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界

flex-end弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界

center弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）

定义位（position）:元素的定位类型

z-index：元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

border-radius

border-radius：npx（左上）npx（右上）npx(右下)npx（左下）

四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角

三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角

两个值：第一个值为左上角与右下角，第二个值为右上角与左下角

一个值：四个圆角值相同

box-shadow（阴影）向框添加一个或多个阴影。

动画：使元素从一种样式逐斩变化为另一种样式的效果 ，可以改变任意多的样式任意多的次数，用百分比来规定变化发生的时间，或用关键词"from"和"to",等同于0%和100% 。0%是动画的开始，100%是动画的完成。 @keyframes创建动画 使用@keyframes规则，你可以创建动画

name:动画名称，开发人员自己命名；** percent**:为百分比值，可以添加多个百分比值

animation执行动画

切换背景颜色

呼吸效果

媒体查询

meta标签：使用设备的宽度作为视图宽度并禁止初始的缩放。在head标签里加入这个meta标签。

width=device-width宽度等于当前设备的宽度 /initial-scale初始的缩放比例（默认设置为1.0） /maximum-scale允许用户缩放到的最大比例（默认设置为1.0）/user-scalable用户是否可以手动缩放（默认设置为no）

使用字体图标步骤

1.注册账号并登录 2.选取图标或搜索图标 3.添加购物车 4.下载代码 5.选择font-class引用