CSS的学习记录

CSS的引入方式

 

- 内联样式(行内样式)

把css代码直接写在现有的HTML标签中

注意：

样式的内容写在元素的开始标签里，并且css样式代码要写在style=""双引号中，多条css样式写在一起中间用分号隔开。

代码：

效果：

- 内部样式表

可以同时为多个元素设置样式

注意:

-style标签要写在head标签的开始标签和结束标签之间(也就是和title标签是兄弟关系)

-style标签中默认type="text/css"

代码：

效果：

- 外部样式表

将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入

这样可以在不同的页面中使用同一个样式表

1.用link标签引入

代码：

效果：

2.用import方式导入

@import引入方式会先加载html，再加载css；当网络环境较差时，会出导致页面效果较差的现象 引入要写在style标签里的最前面，否则不会生效或者直接在外部css文件中直接使用

代码：

效果：

CSS选择器

- 标签选择器

格式：标签名{ }

注意: ​

标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签 ​

代码：

 效果:

  - id选择器

格式：#id{  }

注意: ​

1.每个标签都可以设置id ​

2.在同一个界面中id的名称是不可以重复的 ​

id的名称是有一定规范的

​ 1. id的名称只能由字母/数字/下划线组成

2. id名称不能以数字开头 ​

3. id名称不能是HTML标签的名称​

代码：

效果：

 - 类选择器

格式：.类名{  }

注意: ​

1.每个标签都可以设置类名

2.在同一个界面中class的名称是可以重复的 ​

3.类名的命名规范和id名称的命名规范一样

4.在HTML中每个标签可以同时绑定多个类名，格式: ​ <标签名称 class="类名1 类名2 ..."> ​

代码：

 

效果：

id和class的区别：

id相当于人的身份证不可以重复，class相当于人的名字可以重复

一个HTML标签只能绑定一个id名称，但可以绑定多个class名称

- 后代选择器

格式: ​ 选择器1 选择器2{  ​ } ​

先找到所有名称叫做"选择器1"的标签, 然后再在这个标签里去找所有名称叫做"选择器2"的标签

注意: ​

1.后代不仅仅是儿子, 也包括孙子/重孙子等所有后代

2.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器 ​

3.后代选择器可以通过空格一直延续下去

代码：

效果：

 - 子元素选择器

格式: ​ 选择器1>选择器2{ ​ }

注意: ​

1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签 ​

2.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器 ​

3.子元素选择器可以通过>符号一直延续下去

代码：

 效果：

后代选择器和子元素选择器之间的共同点

​ 1.都可以使用标签名称/id名称/class名称来作为选择器

​ 2.都可以通过各自的连接符号一直延续下去

后代选择器和子元素选择器之间的区别 ​

1.后代选择器使用空格作为连接符号，子元素选择器使用>作为连接符号 ​

2.后代选择器会选中指定标签中所有的后代标签，子元素选择器只会选中特定的儿子标签

 - 交集选择器​

格式: ​ 选择器1选择器2{ ​ ​ } ​

注意: ​

1.选择器和选择器之间没有任何的连接符号 ​

2.选择器可以使用标签名称/id名称/class名称 ​

代码：

效果：

- 并集选择器

格式: ​ 选择器1,选择器2{ ​  ​ } ​

注意: ​

1.并集选择器必须使用,来连接 ​ 2.选择器可以使用标签名称/id名称/class名称

代码：

 效果：

- 兄弟选择器

1.相邻兄弟选择器 CSS2 ​

给指定选择器后面紧跟的那个选择器选中的标签设置属性 ​

格式: ​ 选择器1+选择器2{ ​  ​ } ​

注意: ​

相邻兄弟选择器只能选中紧跟其后的那个标签

代码：

效果：

 2.通用兄弟选择器 CSS3 ​

给指定选择器后面的所有选择器选中的所有标签设置属性 ​

格式: ​ 选择器1~选择器2{ ​  ​ }

代码：

效果：

- 伪类选择器

伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中

- 序选择器（结构伪类选择器）

1.同级别中的第几个 ​

:first-child 选中同级别中的第一个标签 ​

:last-child 选中同级别中的最后一个标签 ​

:nth-child(n) 选中同级别中的第n个标签 ​

:nth-child(odd) 选中同级别中的所有奇数 ​

:nth-child(even) 选中同级别中的所有偶数 ​

:nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增，例如(3n+1)分别对应1,4,7..... ​

:nth-last-child(n) 选中同级别中的倒数第n个标签 ​

:only-child 选中父元素仅有的一个子元素E。仅有一个子元素时生效 ​​ ​

2.同级别同类型中的第几个 ​

:first-of-type 选中同级别中同类型的第一个标签 ​

:last-of-type 选中同级别中同类型的最后一个标签 ​

:nth-of-type(n) 选中同级别中同类型的第n个标签 ​

:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签 ​

:only-of-type 选中父元素的特定类型的唯一子元素

- 动态伪类选择器

E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上 ​

E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上 ​

E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上 ​
E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上。

 - a标签的伪类选择器

格式 ​

:link 修改从未被访问过状态下的样式 ​

:visited 修改被访问过的状态下的样式 ​

:hover 修改鼠标悬停在a标签上状态下的样式 ​

:active 修改鼠标长按状态下的样式 ​

注意：

1. a标签的伪类选择器可以单独出现也可以一起出现 ​ 

2. a标签的伪类选择器如果一起出现, 那么有严格的顺序要求 ​

默认状态:link->被访问状态:visited->鼠标悬停状态:hover->鼠标长按状态:active ​

（编写的顺序必须要遵守爱恨原则 love hate ​）

 代码：

效果：

代码：

效果：

 代码：

效果：

代码：

效果：

- 否定伪类

可以从已选中的元素中剔除出某些元素 ​

格式： （选择器）​:not(选择器) ​

代码：

效果：

- 伪元素选择器

使用伪元素来表示元素中的一些特殊的位置 ​

::after ​ 表示元素的最后边的部分，一般需要结合content这个样式一起使用，通过content可以向after的位置添加一些内容

代码：

效果：

（不能选中复制）

::before ​ 表示元素最前边的部分 ​

代码：

效果：

::first-letter ​ 为第一个字符设置样式 ​

代码：

效果：

::first-line ​ 为第一行设置一个样式

代码：

效果：

- 属性选择器

格式: ​ [attribute]

[attribute=value] ​

作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性 ​

常用于区分input属性

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">

-属性的取值是以什么开头的 ​

[attribute|=value] CSS2 ​

[attribute^=value] CSS3

<input type="text" name="user-name" id="">
<input type="password" name="username" id="">

两者之间的区别: ​

CSS2中的只能找到value开头,并且value是被-和其它内容隔开的 ​

CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开

-属性的取值是以什么结尾的 ​

[attribute$=value] CSS3

-属性的取值是否包含某个特定的值的 ​

[attribute~=value] CSS2 ​

[attribute*=value] CSS3 ​

两者之间的区别: ​

CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的 ​

CSS3中的只要包含value就可以找到

代码：

 效果：

代码：

效果：

 

 - 通配符选择器

给当前界面上所有的标签设置属性 ​

格式: ​ *{ ​ ​ } ​

注意: ​ 通配符选择器在设置属性之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差

代码：

效果：

- 组合选择器

多个选择器组合使用。例如 "div.one" 表示class为one的div元素

CSS三大特性

- 继承性

作用: 给父元素设置一些属性, 子元素也可以使用 ​

注意: ​

1.只有以color/font-/text-/line-开头的属性才可以继承 ​

2.在CSS的继承中只要是后代都可以继承 ​

3.继承性中的特殊性 ​

(1) 不能继承a标签的文字颜色和下划线

(2) 不能继承h标签的文字大小

代码：

 效果：

- 层叠性

作用: 层叠性就是CSS处理冲突的一种能力 ​

注意: 层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性

- 优先级

当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

- 优先级判断的三种方式

-间接选中（指继承）时就近原则 

-相同选择器(直接选中) ​ 并且都是同类型的选择器, 那么就是谁写在后面就听谁的

-不同选择器(直接选中) ​ 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠 ​

id>类>标签>通配符>继承>浏览器默认

代码：

 效果：

-优先级之!important

可以将被指定的属性的优先级提升为最高

注意: ​

1.!important只能用于直接选中, 不能用于间接选中 ​

2.通配符选择器选中的标签也是直接选中的 ​

3.!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升 ​

4.!important必须写在属性值的后面，分号前面 ​

代码：

 效果：

- 引入方式的优先级

行内      权值1000

ID选择器     100

类选择器    10

标签、伪元素选择器     1

通配符、复合选择器、否定伪类   0

继承的样式没有权值

就近原则：哪一种设置方式距离元素最近，谁的优先级更高；

文本属性

- 颜色属性

在CSS中通过color属性来修改文字颜色

1.英文单词

2.rgb

rgb是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色) ​

格式: rgb(0,0,0) ​

格式中的第一个数字设置三原色的光源元件红色显示的亮度，第二个数字设置绿色，第三个数字设置蓝色 ​

每一个数字的取值是0-255之间, 0代表不发光, 255代表发光, 值越大就越亮

3.rgba

格式：rgba(255,0,0,0.2)

rgba中的rgb和前面的一样 ​

a代表透明度, 取值是0-1, 取值越小就越透明 ​

4.十六进制

格式：#FFEE00

十六进制中是通过每两位表示一个颜色 ​

FF表示R EE表示G 00表示B（rgb取色法）

代码：

- font-style 用于打开和关闭斜体文本

格式：font-style: ; ​

取值： ​

normal ：正常的 （默认）

italic : 倾斜的 ​

快捷键： ​ fs font-style: italic; ​ fsn font-style: normal;

- font-weight 为字体设置粗细程度

格式： font-weight: ; ​

取值: ​

bold 加粗 ​

bolder 比加粗还要粗 ​

lighter 细线（默认）

数字取值： ​ 100-900之间整百的数字，400 等同于 normal，700 等同于 bold

快捷键 ​ fw font-weight:; ​ fwb font-weight: bold; ​ fwbr font-weight: bolder;

- font-size 为文字指定大小

格式：font-size:  px; ​ 

注意： 通过font-size设置大小一定要写px ​

快捷键 ​ fz font-size:; ​ fz30 font-size: 30px;

- font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体

格式：font-family:" ";

通用字体 (直接使用，不需要加引号) ​

serif:有衬线的字体,笔画结尾有特殊的装饰线或衬线 ​

sans-serif:无衬线的字体，笔画结尾是平滑的字体 ​

monospace:等宽字体，用于代码，字体中每个字宽度相同 ​

cursive:草书，这种字体有的有连笔，有的还有特殊的斜体效果。 ​

fantasy:装饰字体 ，具有特殊艺术效果的字体

注意： ​

1.如果取值是中文，需要用双引号或者单引号括起来，多个单词组合也要加 ​

2.设置的字体必须是用户电脑里面已经安装的字体 ​

3.如果设置的字体不存在, 那么系统会使用默认的宋体来显示

4.如果设置的字体不存在,可以给字体设置备选方案 ​ 格式:font-family:"字体1", "备选方案1", ...; ​

5.中文字体可以处理英文, 而英文字体不能处理中文 ，如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面 ​

6.最常见的字体有以下几个 ​ 中文: 宋体/黑体/微软雅黑 ​ 英文: "Times New Roman"/Arial

并不是名称是英文就一定是英文字体，如：宋体 SimSun ​ 黑体 SimHei ​ 微软雅黑 Microsoft YaHei

快捷键 ​ ff font-family:;

- 缩写格式

缩写格式: ​ font:style weight size family; ​ 例如: ​ font:italic bold 10px "楷体";

注意点: ​

1.sytle，weight可以省略，size，family不能省略 ​

2.style和weight的位置可以交换 ​

3.size一定要写在family的前面, 而且size和family必须写在所有属性的最后

- WebFont

WebFont-为你的网页锦上添花_字体网

当用户电脑中没有安装对应字体的时候，webFont可以加载网络字体进行显示。

代码：

效果：

- 字体图标

目前比较流行的开源字体图标库有 ​

iconfont iconfont-阿里巴巴矢量图标库 ​

font-awesome Font Awesome，一套绝佳的图标字体库和CSS框架

-iconfont使用步骤

1.打开iconfont网站

2.搜索要使用的图标

3.将喜欢的图标加入到购物车，前提是需要登录iconfont

4.打开购物车，下载代码到本地

5.下载后，将对应的文件夹放到项目目录下

6.在对应的页面中，通过link标签引入iconfont.css，直接根据对应的类名使用即可

-iconfont多色图标使用步骤

1.搜索或选择多色图标

2.选择合适的图标加入购物车

3.将图标添加至项目，没有项目创建即可

4.在项目中选择symbol，生成线上链接或下载到本地

5.引用线上js地址，直接使用script标签引入即可；下载到本地，引入iconfont.js到项目中即可

代码：

- 文本装饰的属性

格式:text-decoration:  ; ​

取值: ​

underline 下划线 ​

line-through 删除线 ​

overline 上划线 ​

none 什么都没有, 最常见的用途就是用于去掉超链接的下划线 ​

快捷键: ​ td text-decoration: none; ​ tdu text-decoration: underline; ​ tdl text-decoration: line-through; ​ tdo text-decoration: overline;

- 文本水平对齐的属性

格式: text-align:  ; ​

取值: ​ left 左 ​ right 右 ​ center 中 ​

快捷键 ta text-align: left; ​ tar text-align: right; ​ tac text-align: center;

- 文本缩进的属性

格式: text-indent:xxem; ​ 其中是em单位, 一个em代表缩进一个文字的宽度

快捷键 ti text-indent:; ​ ti2e text-indent: 2em;

- 设置或者取消字体改变

用于使文本显示为全大写或全小写

text-transform：；允许字体改变，文本变形

none 防止任何改变

uppercase 将文本转换为大写

lowercase 将文本转换为小写

capitalize 将所有单词第一个字母转换为大写

full-width 转换为类似于一个等宽字体

- 字体阴影

格式: text-shadow:  ; ​

取值: ​

none:取消所有阴影 ​

h-shadow :必需。水平阴影的位置。允许负值。

v-shadow :必需。垂直阴影的位置。允许负值。 ​

blur:可选。模糊的距离。 ​

color:可选。阴影的颜色。

代码：

列表样式

- 默认样式

ul,ol 元素的margin-top，margin-bottom均为16px(1em) ， padding-left为40px(2.5em) ​

li 元素没有设置默认的空白（行间距） ​

dl 元素的margin-top，margin-bottom均为16px(1em),但是没有内边距 ​

dd 元素的margin-left为40px(2.5em) ​

p 元素的margin-top，margin-bottom为16px(1em)

- list-style-type 设置列表项标志类型

取值:

none : 没有样式

disc : 实心小圆圈（默认）

circle : 空心圆

square : 实心正方形 ​

decimal : 十进制数，从1开始

lower-roman : i, ii, iii, iv, v… ​

upper-roman : I, II, III, IV, V… ​

decimal-leading-zero :01, 02, 03, … 98, 99 ​ ...

代码：

效果：

- list-style-position 设置列表项标志出现的位置

取值: ​

outside : 列表项标志出现在主块框的外部 ​

inside : 列表项标志出现在主块框的内部

代码：

 效果：

- list-style-image 自定义设置列表项标志

取值: ​ url() : 指定图标位置

代码：

效果：

- list-style

列表样式的速记写法 取值:[<type>][<image>][<position>]

其他样式

- line-height

设置文本的行高 取值为绝对单位或者相对单位

- display

显示方式的切换

inline 行内显示，宽高无效

block 块级显示，宽高有效

inline-block 为了能够让元素既能够不独占一行, 又可以设置宽度和高度

none 不显示，不占据屏幕空间

flex 伸缩盒布局

- visibility

显示与隐藏

hidden 隐藏，占据屏幕空间

visible 显示

- opacity

透明度，0-1之间的取值，取值为0的时候隐藏，占据屏幕空间

- overflow 溢出处理

hidden 超出内容隐藏

auto 超出产生滚动条

scroll 滚动条

- cursor

指定光标的样式

default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

盒子组成

盒子属性

文档中的每个元素都可以被看作是一个矩形盒子。

margin

外边距：代表盒子四周的区域。相邻元素的边距会合并（margin collapsing）

border

设定介于padding的外边缘与margin的内边缘之间，默认值为0

padding

内间距：在任何定义的边界内的元素内容周围生成空间

width & height

用于设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度。

- width & height

width

内容宽度，块级元素默认 100%，单位：px em %

height

内容高度，默认 0 ，由子元素填充，单位可以： px em %

max-width

定义元素的最大宽度。该属性值会对元素的宽度设置一个最高限制。不允许指定负值。

min-height

属性设置元素的最小高度。该属性值会对元素的高度设置一个最低限制。不允许指定负值。

- 边框属性

1.边框属性的格式

边框宽度 ​ border-width:   px;

边框样式 ​ border-style:  ; ​

边框样式取值： ​

none 无边框

dotted 点状边框。在大多数浏览器中呈现为实线。 ​

dashed 虚线。在大多数浏览器中呈现为实线。 ​

solid 实线。

double 双线。双线的宽度等于 border-width 的值。 ​

groove 3D 凹槽边框。其效果取决于 border-color 的值。 ​

ridge  3D 垄状边框。其效果取决于 border-color 的值。 ​

inset 3D inset 边框。其效果取决于 border-color 的值。 ​

outset 定义 3D outset 边框。其效果取决于 border-color 的值。 ​

边框颜色 ​ border-color:  ; ​

2.1连写(同时设置四条边的边框) ​

border: 边框的宽度 边框的样式 边框的颜色;

快捷键: ​ bd+ border: 1px solid #000;

注意: ​

1.颜色属性可以省略, 默认黑色 ​

2.样式不能省略, 省略之后就看不到边框了 ​

3.宽度可以省略

2.2连写(分别设置四条边的边框) ​

border-top: 边框的宽度 边框的样式 边框的颜色; ​

border-right: 边框的宽度 边框的样式 边框的颜色; ​

border-bottom: 边框的宽度 边框的样式 边框的颜色; ​

border-left: 边框的宽度 边框的样式 边框的颜色;

快捷键: bt+ border-top: 1px solid #000; br+ bb+ ​ bl+

2.3连写(分别设置四条边的边框) ​

border-width: 上 右 下 左; ​

border-style: 上 右 下 左; ​

border-color: 上 右 下 左;

注意: ​

1.这三个属性的取值是按照顺时针来赋值

2.这三个属性的取值省略时的规律 ​

2.1 上 右 下 - 左边的取值和右边的一样 ​

2.2 上 右 - 左边的取值和右边的一样，下边的取值和上边一样

2.3 上 - 右下左边取值和上边一样

3.非连写(方向+要素)

border-left-width: 20px; ​ border-left-style: double; ​ border-left-color: pink;

4.border-radius

为元素指定圆角边框的半径取值：绝对值 px、mm 、cm 相对值 em 、rem %

代码：

- 外边距属性

1.外边距：标签和标签之间的距离

2.格式

2.1非连写 ​ margin-top: ; ​ margin-right: ;margin-bottom: ; ​ margin-left: ;

浏览器默认左对齐

2.2连写 ​ margin: 上 右 下 左;

3.这三个属性的取值省略时的规律

3.1上 右 下 - 左边的取值和右边的一样 ​

3.2上 右 - 左边的取值和右边的一样 下边的取值和上边一样 ​

3.3上 - 右下左边取值和上边一样

注意: ​ 外边距的那一部分是没有背景颜色的

4.外边距合并现象

在默认(标准流)布局的垂直方向上, 默认情况下外边距会合并, 谁的外边距比较大就听谁的。

水平方向上的外边距会叠加.

- 内边距属性

1.内边距：边框和内容之间的距离就是内边距

2.格式

2.1非连写 ​ padding-top: ; padding-right: ; ​ padding-bottom: ; ​ padding-left: ;

注意: ​

1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化 ​

2.给标签设置内边距之后, 内边距也会有背景颜色

2.2连写 ​ padding: 上 右 下 左;

3.这三个属性的取值省略时的规律

3.1上 右 下 > 左边的取值和右边的一样 ​

3.2上 右 > 左边的取值和右边的一样 下边的取值和上边一样 ​

3.3上 > 右下左边取值和上边一样

CSS盒模型

- 内容盒子(W3C盒子)

默认盒子模型 W3C盒子

使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。

width 属性仅表示盒子内容所占的宽度

height 属性仅表示盒子内容所占的高度

W3C盒子

内容区的宽

width

内容区的高

height

盒子的宽

width+paddingLeft+paddingRight+borderLeft+borderRight

盒子的高

height+paddingTop+paddingBottom+borderTop+borderBottom

所占屏幕空间的宽

width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRigh

所占屏幕空间的高

height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom

内容盒子也称为普通盒子，其特点为：当我们为一个盒子指定width属性的时候，实际上width仅为内容的宽度，当padding和border变大的时候，内容宽度不变，盒子所占的总体宽度要变大。

- 边框盒子(IE盒子模型)

边框盒子模型

IE盒子使用box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。

IE盒子

内容区的宽

width-paddingLeft-paddingRight-borderLeft-borderRight

内容区的高

height-paddingTop-paddingBottom-borderTop-borderBottom

盒子的宽

width

盒子的高

height

所占屏幕空间的宽

width+marginLeft+marginRight

所占屏幕空间的高

height+marginTop+marginBottom

边框盒子也称为怪异盒子，其特点为：当我们为一个盒子指定width属性的时候，实际上width包含了border和padding的宽度，如果border不变，padding变大，这时候内容会变小。

- 盒子模型注意点

1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子(子元素)顶部的外边距, 外面一个盒子(父元素)也会被顶下来。

原因

子元素和父元素上边框重合在一起。 ​ 因为父元素的第一个子元素的顶部外边距margin-top如果碰不到有效的border或者padding，就会不断一层一层的找自己父元素的麻烦。只要给父元素设置一个有效的border或padding就可以有效的管制这个 margin-top，防止它越级，把自己的margin-top当成父元素的margin-top执行。

2.如果外面的盒子不想被一起顶下来,可以给外面的盒子添加一个边框属性。

3.一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑 margin，margin本质上是用于控制兄弟关系之间的间隙的。

4.只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

5.在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中 ​ margin:0 auto = margin:0 auto 0 auto，表示上下为0，左右为auto； ​

6.margin: 0 auto; 只对水平方向有效, 对垂直方向无效

盒子背景样式

- background-color 背景颜色

专门用来设置标签的背景颜色的 ​ 取值: ​ 具体单词，rgb，rgba，十六进制

快捷键: ​ bc background-color: #fff;

- background-image 背景图片

专门用于设置背景图片的 ​ 快捷键: ​ bi background-image: url();

注意: ​

1.图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址 ​

2.如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充

3.如果网页上出现了图片, 那么浏览器会再次发送请求获取图片

- background-repeat 背景平铺属性

专门用于控制背景图片的平铺方式的

取值: ​

repeat 默认, 在水平和垂直都需要平铺

no-repeat 在水平和垂直都不需要平铺 ​

repeat-x 只在水平方向平铺 ​

repeat-y 只在垂直方向平铺

 快捷键：bgr background-repeat:

- background-position 背景定位属性

专门用于控制背景图片的位置 ​

格式: ​ background-position: 水平方向 垂直方向;

取值 ​ 具体的方位名词 ​ 水平方向: left center right ​ 垂直方向: top center bottom

具体的像素 ​ 例如: background-position: 100px 200px; ​ 一定要写px ​ 具体的像素是可以接收负数的

 快捷键: bp background-position: 0 0;

注意: ​ 同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色

-背景属性的缩写

背景属性缩写的格式 ​ background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;

快捷键: ​ bg+ background: #fff url() 0 0 no-repeat;

注意：background属性中，任何一个属性都可以被省略

背景关联方式：

默认情况下背景图片会随着滚动条的滚动而滚动（可以修改此种关联方式）

修改背景关联方式：

格式 ​ background-attachment：scroll;

取值： ​ scroll 默认值， 会随着滚动条的滚动而滚动 ​

fixed 不会随着滚动条的滚动而滚动

快捷键: ​ ba background-attachment:;

-背景图片和插入图片区别? ​

1.背景图片仅仅是一个装饰, 不会占用位置，而插入图片会占用位置

2.背景图片有定位属性, 可以很方便的控制图片的位置，插入图片没有定位属性

3.插入图片的语义比背景图片的语义要强, 如果想图片被搜索引擎收录, 推荐使用插入图片

CSS布局

- 标准流(文档流/普通流)排版方式

标准流(文档流/普通流)处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在标准流(文档流/普通流)中。 ​

-元素在标准流(文档流/普通流)中的特点 ​

块元素 ​

1.块元素在标准流(文档流/普通流)中会独占一行，块元素会自上向下排列。 ​

2.块元素在标准流(文档流/普通流)中默认宽度是父元素的100% ​

3.块元素在标准流(文档流/普通流)中的高度默认被内容撑开 ​

内联元素 ​

1.内联元素在标准流(文档流/普通流)中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。 ​

2.在标准流(文档流/普通流)中，内联元素的宽度和高度默认都被内容撑开

注意：

1.浏览器默认的排版方式是标准流

2.在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素 ​

3.在标准流中有两种排版方式, 一种是垂直排版（块级元素）, 一种是水平排版 ​（行内/行内块级元素）

4.如果希望块元素在页面中水平排列，可以使块元素脱离标准流(文档流/普通流)，使用float来使元素浮动

浮动可选值： ​

none，默认值，元素默认在标准流(文档流/普通流)中排列 ​

left，元素会立即脱离标准流(文档流/普通流)，向页面的左侧浮动 ​

right，元素会立即脱离标准流(文档流/普通流)，向页面的右侧浮动

当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离标准流(文档流/普通 流)，它下边的元素会立即向上移动，前面一个元素就会盖住后面一个元素。 ​

元素浮动以后，会尽量向页面的左上或者是右上漂浮，直到遇到父元素的边框或者其他的浮动元素。

如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。

浮动的元素不会超过他上边的兄弟元素，最多一边齐。

浮动流排版方式

1.浮动流是一种"半脱离标准流"的排版方式 ​

2.浮动流只有一种排版方式, 就是水平排版，它只能设置某个元素左对齐或者右对齐

- 浮动元素字围现象

浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置

代码：

 效果：

注意:
1.浮动流中没有居中对齐, 也就是没有center这个取值
2.在浮动流中是不可以使用margin: 0 auto;

特点: ​

1.在浮动流中不区分块级元素/行内元素/行内块级元素，无论是什么元素都可以水平排版 ​

2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高 ​

3.浮动流中的元素和标准流中的行内块级元素很像

- 高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时子元素无法撑起父元素的高度， 导致父元素的高度塌陷。父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。 ​

-解决高度塌陷 ​

1.将父元素的高度写死，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度 ​

2.可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度。但是会在页面中添加多余的结构。

​ clear属性取值: ​

none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动) ​

left: 不要找前面的左浮动元素 ​

right: 不要找前面的右浮动元素 ​

both: 不要找前面的左浮动元素和右浮动元素 ​

3.通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动

代码：

（方法一：在子元素的最后添加一个空白的div）

（方法二：通过伪元素选择器清除浮动）

 效果：

BFC

BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响

BFC的布局规则

1. 内部的Box会在垂直方向一个接着一个地放置。

2. Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。

3. 每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。

4. BFC的区域不会与float box重叠。

5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

6. 计算BFC的高度时，浮动子元素也参与计算。

哪些元素会生成BFC

1.根元素（html）

2.float属性不为none

3.position 为absolute或fixed

4.display为inline-block/table-cell/table-caption/flex/inline-flex

5.overflow不为visible　

BFC的作用

1.解决浮动元素令父元素高度坍塌的问题

方法：给父元素开启BFC

原理：计算BFC的高度时，浮动子元素也参与计算

     /* BFC */      overflow: hidden;

2.两栏自适应布局

方法：给固定栏设置固定宽度，给不固定栏开启BFC。

原理：BFC的区域不会与float box重叠

 

效果：

三列布局：两边定宽，中间自适应

 代码：

 效果：

定位布局

1.静态定位（ Static positioning）

是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。

position: static;

2.相对定位（ Relative positioning ）

相对定位就是相对于自己以前在标准流中的位置来移动 ​

position: relative; ​

使用top,right,bottom,left来控制

注意：

1.相对定位是不脱离标准流的, 会继续在标准流中占用一份空间

2.在相对定位中同一个方向上的定位属性只能使用一个

3.相对定位不脱离标准流, 所以区分块级元素/行内元素/行内块级元素

4.当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

代码：

 效果：

3.绝对定位（Absolute positioning）

绝对定位就是相对于body来定位 ​

position: absolute;

- 绝对定位参考点

1.默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点。 ​

2.1只要是这个绝对定位元素的祖先元素都可以 ​ 2.2指的定位流是指绝对定位/相对定位/固定定位 ​ （只有静态定位不行）

3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。

注意：

1.绝对定位的元素是脱离标准流的 ​

2.绝对定位的元素不区分块级元素/行内元素/行内块级元素 ​

3.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点 ​

4.一个绝对定位的元素会忽略祖先元素的padding

代码：

 效果：

绝对定位-子绝父相

相对定位弊端: ​ 相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面 ​ 绝对定位弊端: ​ 默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化 ​

子绝父相：子元素用绝对定位, 父元素用相对定位

代码：

 效果：

-绝对定位水平居中

只需要设置绝对定位元素的left:50%; ​ 然后再设置绝对定位元素的 margin-left: -（元素宽度的一半）px;

4.固定定位（Fixed positioning）

position: fixed; ​

固定定位可以让某个盒子不随着滚动条的滚动而滚动。

注意: ​

1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间

2.固定定位和绝对定位一样，不区分行内/块级/行内块级

5.粘滞定位（ Sticky positioning ）

position: sticky;

结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

设置了position: sticky的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

如果设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动（此时相当于fixed定位）。

设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可

使用条件：

父元素不能overflow:hidden或者overflow:auto属性。

必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

父元素的高度不能低于sticky元素的高度

sticky元素仅在其父元素内生效

 z-index

1. 默认情况下所有的元素都有一个默认的z-index属性, 取值是0。z-index属性的作用是专门用于控制定位流元素的覆盖关系的

2.默认情况下定位流的元素会盖住标准流的元素 ​

3.默认情况下定位流的元素后面编写的会盖住前面编写的 ​

4.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面 ​

注意: ​

1.如果两个元素的父元素都设置了z-index属性, 那么谁的z-index属性比较大谁就显示在上面

2.如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效

代码：

 

效果：

 

flex布局属性

容器属性

• flex-flow

• flex-direction

• flex-wrap

• justify-content

• align-items

• align-content

元素属性

• order

• flex-grow

• flex-shrink

• flex-basis

• flex

• align-self

flex弹性盒模型

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。

1.每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。

2.每根轴都有起点和终点。

3.弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。

4.弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。

主轴

flex布局是一种一维布局模型，一次只能处理一个维度（一行或者一列）上的元素布局。

我们可以在弹性容器上通过flex-direction修改主轴的方向。如果主轴方向修改了，那么：

1.交叉轴就会相应地旋转90度。

2.弹性元素的排列方式也会发生改变，因为弹性元素永远沿主轴排列。

flex-direction

取值：row(默认) 、 row-reverse 、 column 、 column-reverse

用于控制项目排列方向与顺序，默认row，即横向排列，面对屏幕从左向右；

row-reverse同为横向排列，项目顺序为面对屏幕从右向左。

column为纵向排列，项目顺序面对屏幕从上到下，

column-reverse同为纵向排列，项目顺序为面对屏幕从下到上。

 代码：

效果：

 

 

 

 

 

 

flex-wrap属性

沿主轴的排列处理

通过设置flex-wrap属性可使得主轴上的元素不换行、换行、反向换行。

取值：nowrap(默认) 、 wrap 、 wrap-reverse

nowrap表示不换行，即项目会强行等分容器宽度从而不换行，元素被压缩

wrap表示换行，即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。

wrap-reverse同样表示换行，需要注意的是第一排会紧贴容器底部，而不是我们想象的项目6紧贴容器顶部，效果与wrap相反。

代码:

效果：

 flex-flow属性

flex-flow属性是flex-deriction与flex-wrap属性的简写集合

默认属性为row nowrap，即横向排列，且不换行

justify-content属性

取值：flex-start(默认) 、 flex-end 、 center 、 space-between 、 space-around 、 space-evenly;

用于控制项目在主轴的对齐方式

默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。

space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。

space-around为项目之间间距为左右两侧项目到容器间距的2倍

space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。

代码：

效果：

align-items属性

取值：flex-start 、 flex-end 、 center 、 baseline 、 stretch(默认)

用于控制项目在交叉轴排列方式，默认stretch，即如果项目没设置高度，或高度为auto，则占满整个容器。

flex-start会让项目在交叉轴紧贴容器顶部，flex-end与之相反：

center在交叉轴中心位置排列：

baseline比较特殊，它让项目以第一行文字的基线为参照进行排列：

注意，常理来说justify-content与align-items默认分别处理项目主轴，交叉轴的对齐方式，但如果修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理交叉轴，align-items处理主轴。

代码：

效果：

 想要使一个子元素垂直水平居中，只需要设置其父元素

justify-content: center; /* 水平居中 */
align-items: center;     /* 垂直居中 */

3.6.align-content

取值：flex-start 、flex-end、center、space-between、space-around、space-evenly、stretch(默认);

用于控制多行项目的对齐方式，如果项目只有一行则不会起作用，需设置flex-wrap: wrap；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。

flex-start ，center，flex-end 与align-items属性表现一致：

space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍。

space-evenly同理，项目之间间距与项目到容器之间间距相等，space-between为上下两侧项目紧贴容器。

代码：

效果：

项目属性

容器属性是加在容器上的，项目属性是写在项目上的

order

取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

代码：

效果：

flex-grow

取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；

注意：即便设置了固定宽度，也会放大。

假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会占满剩余所有空间。

假设只有第一个项目默认为0，后面两个项目flex-grow均为1，那么后两个项目平分剩余空间。

假设第一个项目默认为0，第二个项目为flex-grow:2，最后一个项目为1，则第二个项目在放大时所占空间是最后项目的两倍。

代码：

效果：

3.10.flex-shrink

取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；

注意：即便设置了固定宽度，也会缩小。

但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

flex-basis

取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖widtn属性。

flex

取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。

还有最常用的flex:1 === flex: 1 1 0px

align-self

取值：auto(默认) 、flex-start 、flex-end 、center 、baseline 、stretch

表示继承父容器的align-items属性。如果没父元素，则默认stretch。

用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。

代码：

效果：

CSS过渡-Transitions

-过渡三要素

1.必须要有属性发生变化 ​

2.必须告诉系统哪个属性需要执行过渡效果 ​

3.必须告诉系统过渡效果持续时长

-过渡触发

1、:hover 鼠标悬停触发

2、:active 用户单击元素并按住鼠标时触发

3、:focus 获得焦点时触发

4、@media触发 符合媒体查询条件时触发

5、点击事件 用户点击元素时触发

transition-property

规定应用过渡的 CSS 属性的名称。

none 没有属性会获得过渡效果。 ​

all 所有属性都将获得过渡效果。 ​

property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-duration

定义过渡效果花费的时间。默认是 0。

time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果。

transition-timing-function

规定过渡效果的时间曲线。默认是 "ease"。

linear:以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ​

ease:慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ​

ease-in:以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ​

ease-out:以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ​

ease-in-out:以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 ​

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay

规定过渡效果何时开始。默认是 0。

time 指定秒或毫秒数之前要等待切换效果开始

注意:

当多个属性需要同时执行过渡效果时用逗号隔开即可 ​

transition-property: width, background-color; ​ transition-duration: 5s, 5s;

transition 是 transition-property， transition-duration，transition-timing-function，

transition-delay的速写形式，分别表示过渡属性，持续时间，时间曲线，过渡延迟

div {
   transition: <property> <duration> <timing-function> <delay>;
}

过渡连写格式

transition: 过渡属性 过渡时长 运动速度 延迟时间;
transition: width 5s linear 0s,background-color 5s linear 0s;
transition: background-color 5s linear 0s;
transition: width 5s,background-color 5s,height 5s;

过渡连写注意:

1.和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可 ​

2.连写的时可以省略后面的两个参数

3.如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为 ​ transition:all 0s;

动画

Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）

过渡和动画之间的异同

1.不同点

过渡必须人为的触发才会执行动画，动画不需要人为的触发就可以执行动画

2.相同点

过渡和动画都是用来给元素添加动画的

过渡和动画都是系统新增的一些属性

过渡和动画都需要满足三要素才会有动画效果

animation-name

指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画

告诉系统我们需要自己创建一个名称叫做animiationName的动画

通过@keyframes来设置动画序列，序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。

0%表示动画的初始时间，也可以通过from关键字表示。100%表示动画的结束时间，也可以通过to关键字表示。

关键帧： ​ @keyframes animiationName{ ​ keyframes-selector{ ​ css-style; ​ } ​ }

animation-duration

动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长

time 指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。

animation-timing-function

设置动画将如何完成一个周期，告诉系统动画执行的速度

linear 动画从头到尾的速度是相同的。 ​

ease 默认。动画以低速开始，然后加快，在结束前变慢。 ​

ease-in 动画以低速开始。 ​

ease-out 动画以低速结束。 ​

ease-in-out 动画以低速开始和结束。 ​

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay

设置动画在启动前的延迟间隔。

time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0

animation-iteration-count

定义动画的播放次数。告诉系统动画需要执行几次

n 一个数字，定义应该播放多少次动画 ​

infinite 无限次往返执行

animation-direction

指定是否应该轮流反向播放动画。

normal 默认的取值, 执行完一次之后回到起点继续执行下一次 ​

alternate 往返动画, 执行完一次之后往回执行下一次 ​

reverse 反向执行

animation-fill-mode

规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

none: 不做任何改变 ​

forwards: 让元素结束状态保持动画最后一帧的样式 ​

backwards: 让元素等待状态的时候显示动画第一帧的样式 ​

both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

animation-play-state

告诉系统当前动画是否需要暂停

running: 执行动画 ​ paused: 暂停动画

动画模块连写格式

animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);

-动画模块连写格式的简写

animation:动画名称 动画时长;

animate.css

Animate.css | A cross-browser library of CSS animations.

1.引入animate的cdn或本地animate.css文件

2.给指定元素加入class"animate__animated <动效名称>"

2D转换模块

transform 属性向元素应用从2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或者倾斜。

-旋转 rotate

transform: rotate(45deg); ​

其中deg是单位, 代表多少度

-平移 translate

transform: translate(100px, 0px); ​

第一个参数:水平方向 ​ 第二个参数:垂直方向

-缩放 scale

transform: scale(1.5); ​ transform: scale(0.5, 0.5); ​

第一个参数:水平方向 ​ 第二个参数:垂直方向 ​

注意: ​

如果取值是1, 代表不变 ​

如果取值大于1, 代表需要放大 ​

如果取值小于1, 代表需要缩小 ​

如果水平和垂直缩放都一样, 那么可以简写为一个参数

-综合转换连写格式

transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5); ​

注意: ​

1.如果需要进行多个转换, 那么用空格隔开 ​

2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的 ​

-形变中心点

transform-origin: ​

第一个参数:水平方向 ​ 第二个参数:垂直方向

注意: ​取值有三种形式 ​

具体像素 ​ /transform-origin: 200px 0px;/ ​

百分比 ​ /transform-origin: 50% 50%;/ ​ /transform-origin: 0% 0%;/ ​

特殊关键字 ​ /transform-origin: center center;/ ​

默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

-旋转轴向

-默认情况下所有元素都是围绕Z轴进行旋转 ​

transform: rotateZ(45deg); ​ 围绕z轴旋转 ​

transform: rotateX(45deg); ​ 围绕x轴旋转 ​

transform: rotateY(45deg); ​ 围绕y轴旋转 ​

-perspective

属性定义3D元素距视图的距离，以像素计，该属性允许改变3D元素查看3D元素的视图，当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身

1.透视 :近大远小 ​

2.透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。

- 媒体查询与弹性盒布局的适用情况

媒体查询：当页面的结构发生变化的话最好使用媒体查询。 ​

弹性盒：如果只是宽高的变化，尽量使用弹性盒

@media 媒体类型 and （媒体特性）{你的样式}

使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如：(max-width: 480px)

与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，而不是使用小于（<）和大于（>）这样的符号来判断。

 

-媒体类型

all	所有媒体（默认值）
screen	彩色屏幕
print	打印预览

-媒体属性

width	（可加max min前缀）
height	（可加max min前缀）
device-width	（可加max min前缀）
orientation	portrait竖屏/landscape横屏

- 最大宽度max-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。

@media screen and (max-width:580px){
body {
  background-color: red;
}
}

上面表示的是：当屏幕小于或等于580px时,页面的背景颜色变为红色。

- 最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
 .wrapper{width: 980px;}
}

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

- 多个媒体特性使用

Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。 ​ 当屏幕在600px~900px之间时，body的背景色渲染为“blue”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
 body {background-color:blue;}
}

- 设备屏幕的输出宽度Device Width

在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。

-逗号分隔列表

当使用媒体查询的逗号分隔列表时，如果列表中的任何媒体查询为true，样式表都会被运用。在逗号分隔列表中的每个媒体查询都被作为独立查询对待，运用到一个媒体查询上的任何操作符都不影响其它的。

例如，如果你想应用一套样式在宽度大于等于700px的设备上，或者采用横向模式的便捷式设备上，你可以这样：

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

如果我使用的设备的屏幕宽度大于700px，媒体查询将返回true，样式将被运用。如果我使用的是横向的便捷式设备，第一个媒体查询返回false，但第二个媒体查询将返回true，样式仍将被使用。

- not关键词

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：

@media not print and (max-width: 1200px){样式代码}

上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

- only关键词

only操作符表示仅在媒体查询匹配成功时应用指定样式。 ​ 可以通过它让选中的样式在老式浏览器中不被应用

media="only screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media="only"，因为没有一个叫only的设备，所以实际上老式浏览器不会应用样式

media="screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media="screen"，它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式。所以，在使用媒体查询时，only最好不要忽略

- 在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

-在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。

<link rel="stylesheet" type="text/css" href="style.css" media="print and (max-width:480px), screen and (min-width:960px)" />

上面代码中style.css样式被用在宽度小于或等于480px的打印预览上，或者被用于屏幕宽度大于或等于960px的设备上。