CSS

最新推荐文章于 2024-06-09 10:58:05 发布

探鱼不是鱼

最新推荐文章于 2024-06-09 10:58:05 发布

阅读量958

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/RollsRoycewk/article/details/109633727

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS

css简介

Cascading Style Sheet

层叠样式表，主要是控制网页的样式和布局使样式、布局和标记能够分离的标记性语言。

本质

选择，然后改变某个属性

属性名

属性名是CSS预定的，由一个或多个单词组成

值

定义对应的属性名应该显示的效果的参数

注意

每个`属性名/值`是一对数据后面要加上分号。

`属性名/值`不要横着写，不容易维护

浏览器在解释CSS的时候回忽略空格和回车

特性

层叠性

CSS样式允许重复声明，相互覆盖

继承性

被包含的元素拥有外层元素的样式(部分,不能继承的自行研究)

报错

Invalid property value

无效属性值

浏览器渲染流程

浏览器开始解析目标HTML文件，执行流的顺序为自上而下

HTML解析器将HTML结构转换为基础的DOM（文档对象模型），构造DOM树完成后，触发DomContendLoaded事件。

CSS解析器将CSS解析为CSSOM（层叠样式表对象模型），一棵仅包含样式信息的树。

CSSOM和DOM开始合并构成渲染树（render Tree），每个队列开始包含具体的样式信息。浏览器就是根据渲染树来替换页面的

计算渲染树中一个各个子系统的位置信息，即布局阶段

将布局后的渲染树显示到界面上

css双面渲染

根据浏览器的流程，当CSSOM还没内置完成时，页面是不会渲染到浏览器界面的，这也是为什么当CSS下载过慢时，会出现白屏的现象

CSS被视为透视渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直到CSSOM构建完成。

重绘重排

重排和重绘是DOM编程中耗能的首要之一,重绘不会引起重排，但重排一定会引起重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的

重拍(回归)

当渲染树中的一部分或者是全部，因为元素的尺寸，布局，隐藏等等改变引起页面的重新渲染，这个过程称作为重排，完成重排以后，浏览器重新重置受影响的部分到屏幕，该过程称为重绘

重拍的情况

添加或删除可见的DOM元素
元素位置改变
元素尺寸改变
元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）
页面渲染初始化（无法避免）
浏览器窗口尺寸改变

重绘

当渲染树（渲染树）中更新的属性只会影响元素的外观，风格，不会影响元素的布局的时候，浏览器需要重新设置当前元素的样式，被称为重绘。

样式标签和链接标签的书写位置

如果书写到非head标签的位置可能会引起一些问题

不适当维护：后期维护的时候需要花费时间去寻找代码书写位置

会引起页面的回流（重排）和重绘
页面从上至下解析，假设样式标签写在正文后边，在此样式之前，整个网页的文档已经渲染的差不多了，发现还有样式标签，页面就会重新计算页面的样式然后重新渲染，所以会引起重绘和重排，网页可能出现闪烁，并且加载变慢
所以style标签应该书写在head标签中

补充

calc()

我们可以把它当做一个函数，其实他是calculate（计算）缩写

是css3提供的一个新功能，主要用来计算长度

我们可以用它来给padding margin width height font-size等等计算大小值值是一个动态的

注意

使用+ - * /进行运算
可以使用百分比 px em rem等单位
可以单位混合计算
在使用的时候，尽量在 + - * / 前后添加一个空格

@import

@import “index.css”;
@import url(index.css);
@import url(“index.css”);

@import是CSS提供约会css文件的一种方式

使用@import方法，在style标签中约会

链接和inport的对比

功能范围不同

链接属于html标签@import只是css提供的约会css的功能

加载顺序不同

页面在加载的时候，链接♡的css会同时被加载@ import♡的css只有等页面全部下载完成以后才进行加载，所以可能会出现闪烁

兼容性

link所有浏览器都支持@import低版本ie不支持

使用js控制样式

JS只能控制link标签@import是不能够被JS控制的

CSS的使用

内联样式

<标签名 style=“属性1:值1;属性2:值2;…”>被标记的内容</标签名>

直接在html的标签中书写css。这是一种最原始也是最容易理解的

样式书写是样式名：样式值; （注意全部是英文半角符号）

内联式特点

冗余代码多，代码量大
不利于维护和修改
优先级相对而言较高，个别特殊的效果可以使用，但是不要重复

内嵌方式

可以把样式书写在style标签中,然后把style标签放在head标签中,使用css选择器选择你要控制的元素，然后书写样式

特点

统一放置在style标签当中，然后通过选择器，将规定样式和对应的标签建立联系，方便维护和修改
CSS样式修改时并不需要翻阅HTML代码，也不需要去针对每个HTML标签处理样式，只需要调整样式标签中的样式，就可以针对性修改，页面达到了样式与结构相分离
代码量少
相对整站来说，存在冗余代码

外部导入方式

在外部新建一个css文件（后缀是.css），把样式写在外部的css文件中

当一个页面需要外部css的时候，可以使用link标签把css发布进来，把link标签书写在head标签中 <link rel=“stylesheet” type=“text/css” href="./index.css">

link标签书写的位置应该和style是一样的

href：相关联css的路径
rel：stylesheet link版本的css和当前的文档html进行关联
类型：text / css约会的格式是text文本，是css文本

特点

将html和css完全分离成两个文件
一个css文件可以控制多个html文件
相对单页有冗余代码
相对来说有服务器压力

以上三种方式，当样式冲突时，采用就近原则。哪个属性离被修饰的内容近就使用哪个，如果没有属性冲突那么就采用叠加效果

选择器

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器,HTML页面中的元素就是通过CSS选择器进行控制的

通用选择器0000

.

所有后缀的所有文件
由于*会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用*通配符选择器
/*这里就把所有元素的字体设置为红色*/
*{ color : red; }

标签选择器0001

div{}

也称为类型选择器，直接使用的就是HTML标签名。一般利用标签选择器规定标签的默认样式

类选择器0010

.className

多个类名之间空格隔开
类选择器可以写为.c.d这种格式，表示的是这个元素应该是`class=“c
d”`，并且顺序不做限制
一个class可以设置多个类名，但是只能有一个class属性

链接伪类选择器0010

a:link

匹配的a标签，且a标签定义了超链接（具有href属性），并且未被访问过。

a:visited

匹配的a标签，且这个a标签定义了超链接并且被访问过。

动态伪类选择器0010

e:active

选择匹配的E元素，且匹配的元素被激活的那一刹那生效。

e:hover

选择匹配的E元素，且用户鼠标停留在E元素上生效。

ID选择器0100

#id

id类似身份证号,具有唯一性
id命名规范建议（类名命名方式也适用）

• id或者class必须以字母开头，不能以数字或者下划线开头

• 名字不出现汉字

• 不允许带有广告的英文单词出现：如：ad adv adver advertising
(防止浏览器当成垃圾广告处理掉过滤掉 )

• 除第一位后边小写字母、数字、连字符（ _ -）

• 见名知意

• 不要出现空格

组合选择器

b,i,p{…}

中间是逗号,
将多个选择器使用，隔开可以同时对多个选择器设置样式
如果多个元素有相同的样式，方法有两种

• 使用一个共同的类名

• 使用群组选择器

交集选择器

“交集”选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集

其中第一必须是标签名选择器，第二个必须是类别选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写

后代选择器

div b{…}

后代选择器使用空格间隔开（A B：在A元素中寻找后代（不一定是儿子）是B的元素）

LoVe/HAte原则

link -> visited -> hover -> active

在a链接上应用上面的标签必须遵守一个原则“爱恨原则”

权重值

权重值列表

通用选择器0000
标签选择器、伪元素选择器0001
类、伪类选择器、属性选择器0010
ID选择器0100
行内样式1000
!important最大
层次选择器拆分开并进行相加来进行计算

!important

• 作用是提高指定样式规则的应用优先权（优先级）

• 语法格式**{ cssRule !important
}**，即写在定义的最后面，例如：box{color:red !important;}。
行内样式 1000

样式来源

默认样式
继承的
通配符 * 匹配所有元素
标签名选择器
类名选择器
id名选择器
行内书写
!important

多个样式来源的优先级确定

!important > 行内书写 > id > 类 > 标签名 > 通配符 > 继承
!important > 行内书写 > id > 类 > 标签名 > 通配符 > 默认
样式继承不是一个默认行为，实际上而是看某一个属性的默认值是否是inherit。所以不比较继承和默认的优先级

相同优先级的选择器生效方式

当优先级相同的时候，在后边书写的样式优先级高

link元素其实也是把样式关联上，选择器优先级相同的情况写，后写的生效

CSS3选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H9VGHQDj-1605107796632)(media/256dcfe3ab817d358f47247625192ae2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KEElsCBP-1605107796638)(media/92ae8cde5ed4c5e9d906702c0c0949a9.png)]

层级选择器

子选择器

• `E > F`

• 匹配所有的F元素,且匹配的F元素是匹配的E元素的子元素
相邻兄弟选择器

• `E + F`

• 选择匹配的F元素,且F元素仅位于匹配的E元素的后面(同辈)
兄弟选择器

• `E ~ F`

• 选择匹配的F元素,且位于E元素后面的所有的F元素都会被选中(同辈)

属性选择器

`E[attr]`

• 选择匹配具有attr的E元素
`E[attr=‘val’]`

• 选择匹配具有attr的E元素，且attr的属性值为val。val的值严格区分大小写。
`E[attr*=‘val’]`

• 匹配E元素，且E元素定义了属性attr，attr的值任何位置包含了`val`就行。
`E[attr^=‘val’]`

• 用来匹配E元素，且E元素定义了属性attr，attr的值开始部分是`val`
`E[attr$=‘val’]`

• 用来匹配E元素，且E元素定义了属性attr，attr的值结束部分是`val`。

伪类选择器

`E:first-child`

• 选择父元素的第一个子元素并且该子元素为E。
`E:first-of-type`

• 选择父元素的第一个E元素
`E:last-child`

• 选择父元素的最后一个子元素并且该子元素为E。
`E:last-of-type`

• 选择父元素的最后一个E元素
`E:nth-child(n)`

•
首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合

• odd

• 奇数

• even

• 偶数

• 公式 Mn，M表示n的倍数。

• E:nth-child(2n)

• 数字

• 0,1,2,3,4…
`E:nth-of-type(n)`

• “nth-of-type”选择的是某父元素的子元素，而且这个子元素是指定类型。

动态伪类选择器

`E:focus`

• 匹配的E元素，且匹配的元素获得焦点时触发
`E:target`

• 匹配所有的E元素，且匹配的元素被相关的URL指向（锚点指向时生效）。

• 点击切换图片原理

• 将所有的图片层叠到一起。

• 通过片段标识符和`e:target`来确定当前的位置。

• 确定了位置之后更改z-index的值。
锚点伪类：link、visited
用户行为伪类：hover、active、focus
目标伪类target（IE9及以上）

UI状态伪类选择器

`E:checked`

• 选择匹配的E元素并且E元素已经被选择上（用于多选框和单选框）

伪元素选择器

**使用这两个选择器插入内容时要使用`content`属性**
`E::before`

• 选择匹配的E元素，并且在选择的元素前面插入内容。
`E::after`

• 选择匹配的E元素，并且在选择的元素后面插入内容。
content属性：

• none

• 默认值，不添加任何内容

• string

• 插入要插入的字符串,字符串，里面的东西都会被当做字符来对待。

• url

• (图像地址)，插入图像，指明地址。

• attr(HTML属性名)

• 将选中某个元素的属性名对应的值作为插入内容

• attr可以与字符串混写

• attr可以使用多次

• 如果引用的属性不存在，所在的位置将会显示一个空字符串。

• 插入生成的内容

定义了生成内容的方式，这种方式通过CSS插入而不是HTML标签插入内容。
注意：
生成的内容与元素之间没有空格。
生成的内容位于元素框的内部。
生成的内容默认会被放在inline中，可以使用display属性进行修改。
只要属性能够被继承，生成的内容会从它的依附的元素上继承属性值。

TEXT

font

字体类型

serif

• 衬线字体
sans-serif

• 无衬线字体
monospace

• 等宽字体

font-family:

后面跟字体的名字

• 常见中文字体：“Microsoft YaHei”、“SimHei”、“SimSun”
设定的字体名如果包含空格，你应该使用引号括起来。 ‘abc d’
我们会在多个字体的后面加上`sans-serif`

•
在font-famliy后书写多个字体，使用逗号隔开，浏览器会依次检测支持为止，否则将执行默认字体

外部引入字体包

<style>
@font-face {
font-family: “jier”;
src:url("…/images/abc.ttf");
}
.outer{
font-family: “jier”;
}
</style>

外部引入的字体包和某一个元素没有任何关系，而是本页面都可以使用这个字体
在css中使用@font-face来引入外部字体包
原来我们页面自带的字体包都有自己的名字，我们首先给引进来的字体包起一个名字,font-face中有一个font-famliy属性
是给字体包起名字的
还要使用src：url（）来引入字体包
根据你起得名字，来使用字体包

font-size:

px

• 像素
%

• 根据从父元素继承下来的大小来进行计算
em

• 相对于父元素继承下来的大小来进行计算
rem

• 它的值基于根元素的文本尺寸来进行定义。`<html>`

font-weight:

normal

• 正常字体
bold

• 粗体,通常对应的是数值700
100-900

•
为什么有时候没有效果，完全看你使用的这个字体是否安装了各种字体的变体，也就是你使用的字体得真正的映射了9级才可以
bolder:相对父级来说的，比父级要粗一个级别
lighter：相对父级来说，比父级细一个级别

font-style:

normal

• 默认值
italic

• 显示成斜体
oblique

• oblique 后可以跟一个旋转角度以deg为单位

• 谷歌只支持0deg

• 火狐只支持汉字和-90 -90度的设置

• font-style: oblique 0deg;
对于上边两种倾斜版本，使用上没有什么区别（italic会占用高度较小

font:font-style font-weight font-size font-family

一旦使用简写namefont必须有size和family
font-style和font-weight可以不写,顺序可以颠倒

color:

color属性: 设置文字颜色（可以继承的）

可以直接设置颜色的名字（开发中很少使用，因为不精确）

设置为三原色红r 绿g 蓝b

所有颜色都是由这三种颜色调制出来的
每一个颜色的值都是 0-255之间
rgb(30,120,200)
颜色还可以设置不透明度 ,可以使用 rgba(20,111,111,.7)

颜色还可以设置为十六进制（不能设置透明度

十六进制颜色提供简写：当1,2位一样并且3,4位一样并且5,6一样的时候
可以每一位简写一个
#112233–>#123 #aabb11–>#ab1 #000000–>#000 #111222–>#111222
#加上16进制的颜色值 6位

HSL设置颜色

H代表Hue 色调 0和360代表红色，选择范围是[0,360] 120代表绿色 240代表蓝色
S代表Saturation 饱和度 0-100%
L代表Lightness 亮度 0-100%
HSLA() 中 hsl代表的意思不变 a代表透明度 [1,0]

• color: hsl(0,100%,50%);
color: hsla(0,100%,50%,.3);

透明颜色

transparent

关于a标签颜色的继承

a标签比较特殊，如果a标签没有href属性，a标签没有默认样式，那么继承颜色生效
但是如果a标签拥有href属性，a标签链接的自带样色会盖过继承
a的4个状态（有链接、被点击后、点击中、鼠标悬浮）是有自己的样式的，只能通过伪类来控制这4中样式
所以在开发中给a标签设置颜色，需要直接对a标签进行设置

text-decoration:

字体的下划线不可继承
text-decoration可以有多个值。
text-decoration:underline line-through overline

none

标准的文本,将应用在元素上面的装饰线去掉

underline

文本的下划线

overline

上划线

line-through

贯穿线

虽然不继承，但是延伸到后代元素，因为后代元素属于这个元素的下划线范围

text-decoration其实是一个简写的属性

text-decoration-line：上划线下划线删除线
text-decoration-color：颜色
text-decoration-style：实线solid 虚线dashed 点线dotted 波浪线wavy

letter-spacing:

normal

`normal`，等同于`letter-spacing:0`

px

像素,可以设置字符间距的大小

word-break:

none

根据浏览器默认的设置来判断是否进行断句

break-all

如果使用break-all软换行（宽度不够自动换行）会出现任何字符之间。

keep-all

如果使用keep-all即使文本超出文本所在行的宽度也不会换行。
但是要注意特殊的标点符号。

text-indent:

px

像素

em

根据父元素继承下来的大小计算,1em=1个设置的字体大小,1em=当前文字的字号大小

text-align:

left

默认值,文字放到左边

right

文字放到右边

center

文字放在中间

justify

两端对齐

CSS3新增属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kun5ysZe-1605107796642)(media/256dcfe3ab817d358f47247625192ae2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IWNL4llj-1605107796647)(media/92ae8cde5ed4c5e9d906702c0c0949a9.png)]

text-shadow

color

• 阴影的颜色。如果不写就是文本颜色。
lrshadow

• left right
shadow`，**左右阴影**，如果为负数放在文本左侧，如果为正数放在文本右侧。
tbshadow

• `top bottom
shadow`，**上下阴影**，如果为负数放在文本上面，如果为整数放在文本下边。
blur

• 可选。模糊度。不写就没有模糊度。

text-shadow可以一次使用多个，这样让多个效果叠加。

h1:first-child{
font-size: 150px;
text-shadow: red 8px -5px,blue 8px -10px
}

只用来处理元素中的内容的对齐方式，对元素自身没有影响…只能用于块状元素或者行内块状元素（行内块状元素要设置了宽度)

将块状元素的文本缩进指定的长度,不能用于行内元素…文本缩进只会影响元素的第一行…在设定了元素的宽度，且元素中的内容超出了元素的宽度之后，将会超出显示

用来标明怎样对单词进行断句

background

前景色

前景色：前景色指元素的文本、周围的边框。通常使用color属性来设置前景色或使用border-color来设置边框的颜色。
边框颜色采用了字体颜色，如果没有设置border-color那么默认值是内部计算出来的是一个叫currentcolor的值，这个currentcolor始终等于color属性计算出来的值，所以边框颜色默认的时候是字体的颜色。如果设置了border-color，那么这个值将会覆盖currentcolor。

background-color:

背景色

和color的颜色一致十六进制 rgba hsl 颜色单词

background-image:

none

没有背景图

url()

设置背景图像的url的地址

和color的颜色一致十六进制 rgba hsl 颜色单词

在html中，由左至右是x轴方向由上至下是y轴方向 x和y的交叉是原点

background-repeat:

repeat

默认值，横向、纵向平铺

repeat-x

横向平铺

repeat-y

纵向平铺

no-repeat

不重复

background-position:

关键字

一般情况下来说接收两个值，第一个值表示横向的位置，第二个值表示纵向的位置。
如果只有一个关键字，另外一个假定为center。
在写两个横向的关键字或两个纵向的关键字时整个值将会被忽略。

left
right
top
bottom
center

px

相对于元素内边距的外边界（包括内容区、内边距）的左上角来进行定位。
第一个值也是横向偏移量，第二个值纵向偏移量。
如果横向的偏移量为正数那么背影图往右边走，负数背景图往左边走。
如果纵向的偏移量为正数那么背景图往下边走，负数背景图往上边走。

1.横向偏移量
2.纵向偏移量

background-attachment:

scroll

默认值。背景图是相对于元素自身固定，并且不随着它的内容滚动。

fixed

背景图相对于视口固定，所以页面滚动背景不动。

多背景图

需要两张图片配合
如果说一个元素中同时出现了背景图和背景颜色，那么优先显示背景图。但是背景颜色依然存在。（如果要让后面的背景颜色显示出来，前面的背景图需要有透明的部分）
多张背景图先写的图片放在上面，后写的放在下面。
background:img position/size repeat attachment origin clip color

background:img position/size repeat attachment origin clip color

CSS3新增属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FtalFEjh-1605107796651)(media/256dcfe3ab817d358f47247625192ae2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pG9RnroP-1605107796656)(media/92ae8cde5ed4c5e9d906702c0c0949a9.png)]

background-clip:

默认时边框从内容区域开始经过内边距一直延伸到边框的外边界。
用来控制背景延伸到哪里

border-box

• 默认值，延伸到边框外边界。
padding-box

• 延伸到内边距的外边界
conten-box

• 将背景限制元素的内容区域内
text

• 以区块的文字作为裁剪区域向外裁剪

background-size:

px

• 像素值
%

• 两个值图片的宽度图片的高度
contain

•
将背景图像等比例缩放到宽度或高度与容器的宽度高度相等，背景图始终被包含在容器内。
cover

• 等比例缩放到完全覆盖容器，背景图有可能超出容器（超出就超出了不要了。）。

background-origin:

背景定位基准

backgorund-position用来定位背景图的位置，默认时相对于padding的外边界来进行定位。

background-origin:value

padding-box

• 默认值。图像的定位是在padding的外边界。
border-box

• 背景图像定位的基准是在边框的左上角。
content-box

• 背景图像的左上角在内容区域的左上角

多背景图

`background:img position/size repeat attachment origin clip color`

需要两张图片配合
如果说一个元素中同时出现了背景图和背景颜色，那么优先显示背景图。但是背景颜色依然存在。（如果要让后面的背景颜色显示出来，前面的背景图需要有透明的部分）
background:img position/size repeat attachment origin clip color
html,body{
background:
url(./img/25945.png) 600px 300px /300px 300px no-repeat,
url(./img/timg6789.jpg) no-repeat;
}
多张背景图先写的图片放在上面，后写的放在下面。

尺寸与补白

width:

%

相对于包含块的块状元素的宽度来进行设置

auto

默认值,无特定宽度

• 对于块状元素,宽度默认是父元素的宽度

• 对于行内元素来说,宽度是内容的宽度

px

em

height:

auto

默认值,没有内容高度为0.行内元素设置行高不会影响高度,块状元素如果没有高度设置行高

%

使用百分比来设置高度,相对于包含块元素的高度来进行设置

px

em

min-width/min-hright:

元素的内容区域可以使用`min-width`和`min-height`定义最小值。取值和width、height是一样的。

max-width/max-height:

元素的内容区域可以使用`max-width`和`max-height`定义最大值。

margin:

值

px

• 像素
%

• 百分比外边距的值相对于父元素的内容区域的宽度来计算

格式

`margin:top/bottom left/right`
`margin:top left/right bottom`
margin:top right bottom left`
顺时针原则

单外边距

margin-top:
margin-right:
margin-bottom:
margin-left:

padding:

> 一般情况下我们是给块级元素使用内边距，但是可以设置各种边距在行内元素上。

适用于所有元素(块状、行内元素)
元素默认的时候没有内边距的
padding:value（不可继承的）
值的格式为顺时针设置

px

像素

em

%

使用百分比来设置内边距水平模式、垂直模式都相对于父级元素内容区域的宽度来进行计算。

适用于块状元素、行内块状元素

外边距的默认值是0,但是浏览器会给很多元素提供预设（自带默认）的样式，包括外边距。

行内元素上设置的上、下内边距对行高没有影响,行内块级元素可以设置内边距并且有正常的效果

border:

边框三要素

width

默认由某个浏览器决定,默认的时候是3个像素

style

none

• 默认,也就是没有边框样式.即使有宽度也没有边框
solid

• 实线
dashed

• 虚线
dotted

• 点状轮廓

color

子主题 1

去除边框样式

内嵌式

border-collapse: collapse;

• 让边框合并成一个

内联式

cellspacing=0;

• 让边框重叠

内联元素的边框

行内元素上设置的上边框和下边框对行高没有影响

行内元素上设置的左边框和右边框会将周围的文本推开

注意

背景颜色在边框中显示（实线的时候，我们看不到）

背景图片原点没有从边框开始而是从padding开始的，但是可能会平铺到边框中

元素显示模式

block

块级元素

独占一行，前面和后面都会有换行。多个块级元素会各自新起一行。
默认情况下block元素的宽度是父亲元素的宽度
块状元素可以独立的设置宽度和高度，但是即使设置了宽度，它仍然是独占一行。
人为设置的自身的宽度可以大于父元素的宽度也可以小于父元素的宽度。
常用的块级：div、h1~h6、p、ul、ol、li、dl、dt、dd、form

in-line

行内元素/内联元素

不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下才会进行换行。
行内元素设置宽度和高度没有效果
常用的行内元素：span、b、em、i、strong、a…
input是个例外,可以设置宽高

inline-block

内联块状元素

它在内部表现为块状元素，可以设置宽度和高度，在外部排列方式类似于内联元素，既水平排列。
常用的元素：img、表单中的元素

display

none

隐藏元素,是完全从文档中删除，对布局不会有影响。就想这个东西本来就没有一样

block

将元素显示为块状元素

inline

显示为行内元素

inline-block

显示为行内块状元素

inline-box:

所有的内联元素的样式表现都与行内盒子模型有关。
内联盒子（inline box），不会让内容成块显示，而是排成一排。
内联盒子类型：
如果内容被行内标签所包含（span、a、em），属于内联盒子。（上图中的实线部分）
如果只是光秃秃的文字，属于匿名内联盒子（虚线部分）

内联盒子组成:
上半行距
内容区域
下半行距
内容区域（content
area）：是一种围绕文字看不见的盒子。内容取余大小和font-size有关。
非替换元素，内联元素。
替换元素，内联块状元素（图片）。
行间距
多行文本之间相隔的距离
半行距
在CSS中间距被分散在文字的上方和下方
行框盒子line box
每一行都是一个行框盒子,每个行框盒子都由一个一个的内联盒子组成
包含盒子containing box
此盒子由一行一行的行框盒子组成
每个行框边框刚好与各行的顶边和底板刚好吻合

line-height

line-height - content area = 整个的行间距
整个的行间距 / 2 = 上半行间距或下半行间距
格式：line-height：定义行高，实际上是定义两行文字基线之间的距离。

baseline（基线），基线是小写英文字母x的下边缘，为了排列整齐用的。
如果是图片基线是底部。
x-heihgt，表示该字体中x的高度。
中线，指的是内容区域高度的1/2处的一条线。
上边线、下边线：内容区域的上变线和下边线。
单行使用,多行垂配合vertival-align

用来控制行高，一行文的高度。规范来说就是两行文字基线之间的距离

line-height和内联元素连接非常紧密，行高直接决定了内联元素占用的高度（不包括替换元素）

number

将数值作为行高的值。根据当前的font-size大小来进行计算。表示的是当前font-size的多少倍。
没有单位，比如1.5 就是当前元素文字大小的1.5倍

百分比：也是相对于当前元素的文字大小计算的，很少使用

px

不设置块状元素高度的情况下，line-height的改变会撑高盒子，文字垂直居中于盒子。也就是该盒子的高度和行高相同。
如果设置块状元素的高度，line-height改变只会将文字在垂直方向上改变不会改变盒子的高度。
如果我想让一行文本垂直居中于当前的元素时，行高等于元素的高度。

vertival-align

一种简单的 CSS 属性，用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

默认情况下，在一个行框中，所有内容都是基线对齐

但是图片没有基线，所以就把图片的底部当成了基线对了

vertical-align 可以设置让一个元素以自身的哪一个位置对齐

middle

元素的垂直中心点(中线)和父元素x-height的1/2处对其

baseline

默认值.强制元素的基线对齐,如果元素是图像,图像的底边与基线对齐

bottom

将内联盒子与行框的底边对齐

top

将内联盒子的顶边与行框的顶边对齐

使用 vertical-align 你能在不同场景下去进行灵活细微的元素对齐工作

float：只能对齐它们的顶部，而且可能导致布局塌陷，需要手动清除

position:absolute：会使元素脱离文档流，以致于它们不能影响周围的元素

手动添加内外边距的方法：需要父元素高度固定

transform:translateY：属于 CSS3 新特性，对 IE8、IE9 有一些兼容性的问题

仅限于inline、inline-block.多行居中,配合line-height

box-sizing:

默认情况下，块级元素的宽度等于内容区的宽和高。
我们可以使用box-sizing来让浏览器不这样计算。
格式：box-sizing:值（不可继承的）

content-box

默认值。内容区域宽度等于width、内容区域高度等于height。内边距和边框都在这个基础上面增加。（w3c盒子模型的计算方式，标准盒子计算方式。）

border-box

宽度、高度等于`内容的区+内边距+边框`，相应的内容区域会被缩小。（IE盒子模型的计算方式，也叫怪异盒子模型。）

overflow:

元素超出父级，不会影响父级的兄弟元素位置

overflow属性定义一个内容太大无法适应容器的时候应该怎么做

visible

超出元素的内容是可以见的

hidden

超出元素内容被隐藏

scroll

超出的元素内容会被剪切，但是会显示出滚动条可以拖动它显示出剩下的内容。

auto

浏览器自己确定

overflow auto和scroll的区别

auto

是自动生成滚动条，不超出不生成超出才生成

scroll

无论是否超出都会生成滚动条

overflow-x

overflow-y

只控制x和y的超出情况

visibility:

控制元素显示或者隐藏

hidden

元素不可见，但是依然像存在时影响文档的布局。虽然你看不到但是这个位置依然被保留。

保留原来的位置，其他元素的布局没有发生改变

相当于此元素变透明

visibility属性是继承的，里边的子元素也全部都继承属性，并且隐藏了

如果给子元素设置visible覆盖，那么子元素可以进行显示

visible

元素可见

opacity/filter/raba

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nncZeUPv-1605107796660)(media/256dcfe3ab817d358f47247625192ae2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vkpPu6tH-1605107796662)(media/92ae8cde5ed4c5e9d906702c0c0949a9.png)]

filter:opacity

img{
width: 500px;
filter: blur(2px) opacity(.6);
}

一般用在图像上，因为filter可以使用多个效果(叠加)

opacity:

opacity属性：指定了一个元素的透明度。当该属性的值被应用到某个元素上时，把这个元素当成一个整体来看待。(其中的内容、背景色、前景色、边框)

一般用在某个元素上，在动画中使用用来做淡入淡出效果。

当opacity作用在某一个元素上的时候，把这个元素和里边的内容当成一个整体看待
即使里边的元素没有继承opacity。它也和父级有一样的透明度

0~1

opacity属性的值是0~1的范围，0为完全透明，1为完全不透明。

子主题 3

rgba

rgba用来设置背景透明但是内容不透明的情况。

list

CSS中的每个列表选项是块级元素再加上记号

前面的盒子用来放记号，后面的盒子用来放内容。但是前面的盒子不参与文档布局。不管列表项在哪里记号都会随着列表项的移动而移动。

**每个列表外部的包含元素都会有默认值。margin-left、padding-left**

通常先将padding和margin都干掉，但是干掉之后，那么列表项的标志会跑到屏幕外面去，看不到。

list-style-type:

none

禁止在本该显示记号的位置上出现内容。但是不阻断有序列表的计算。

decimal

数值

disc

实心圆

list-style-image:

url(‘地址’)

list-style-position:

outside

叫标记放在标记盒子中

inside

将标记放在内容盒子中。（附加的标记盒子依然存在，只不过为空。）

table补充

表格不管单元格的内容是多少，一行中所有的单元格都具有相同的高度。同一列中，不管单元格的内容是多少，一列中的所有单元格都具有相同的宽度。

caption-side:

top

默认放在表格框上

bottom

放在表格框下

left和right不支持。

border-collapse:

- 单元格的边框

css中单元格边框有两种模式：

分离边框模式，在单元格与单元格之间又间隔时起作用。

折叠边框模型，从视觉上看单元格与单元格之间没有间隔，单元格之间的边框将合并或折叠在一起。

separate

分离边框模式（不常用，知道一下就行。）

collapse

table{
border-collapse: collapse;
}

折叠边框模式

为什么折叠边框中，单元格之间没有间隙：相邻的边框会折叠在一次，所以只会绘制一条折叠的边框。

float

float:

none

无浮动

left

让元素沿着容器左侧放置，允许文本和内联元素环绕它，它从正常的页面中移除，虽然还保持一点流动性

right

让元素沿着容器右侧放置，允许文本和内联元素环绕它，它从正常的页面中移除，虽然还保持一点流动性

clear:

clear:value;
清除浮动
格式：clear:value，适用于块级元素
clear属性用来设置元素自身怎么样，而不是float的元素怎么样。
clear是清除浮动是不准确的，浮动依然存在，并没有消除。
官方解释：元素盒子的边不能和前面的浮动元素相邻。

高度塌陷解决方法

父元素设置高度(障眼法)
父元素浮动
::after{}

xxx::after{
content:’’;
display:block;
clear:both
}

none

允许元素向另一个元素的任何一边浮动

left

元素左侧抗浮动

right

元素右侧抗浮动

both

两侧抗浮动

经常使用的是both，凡是使用clear:left或clear:right的时候都可以使用clear:both来代替。

clear属性只对前面的属性有效，对后面的浮动元素无效。

position:

static

默认值，正常生成元素框。块级元素生成矩形框，行内元素生成一个或多个行框，随父元素流动

偏移属性

top

right

bottom

left

relative

相对于自身来进行定位。相对定位的元素移动到其他地方，本来的位置不会被占据

其他元素没有受到任何影响
自身原来的位置也保留
和浮动可以一起使用

相对定位元素同时应用对立方向定位的值时，只有一个方向的定位属性起作用。同时使用top、bottom，是bottom失效，同时使用left、right时right失效。

absolute

absolute，绝对定位的元素从文档流中删除，其位置相对于容纳块来确定。也就是说绝对定位的陈元素可能会叠加到其他元素上，或被其他元素叠加。

容纳块

绝对定位的元素的容纳块是position的值不是static的最近的祖辈元素。

如果没有祖辈元素，元素的容纳块是初始容纳块。（所谓的初始容纳块是根元素的容纳块，由浏览器建立在大多数浏览器中根元素的容纳块是视口大小的矩形，页面中第一屏）

使用特点

同时使用四个偏移属性来定位元素，但是width和height为auto时，元素的宽度、高度将会自动计算（自动拉开）。
绝对定位后生成的是一个块级元素。
绝对定位的元素是其后代绝对定位元素的容纳块。

fixled

用来将固定定位的元素从文档流中删除。相对于视口来进行定位。

不为元素预留空间（脱离页面流）

z-index

auto，可以将auto当做0来处理。
当前元素的层叠水平一致、层叠顺序相同时，源代码后面的元素会覆盖前面的元素。
元素一旦成为定位元素，其z-index会自动生效，此时z-index的默认就是auto（也就是0）。
定位元素在非定位元素的上面。

基础

指定了一个定位属性的元素及其后代的层叠顺序

只有定位元素（非static值）拥有 z-index属性

z-index的值没有单位理论上来说 z-index的值大的元素会覆盖小的元素

定位元素默认的z-index 的值是 auto

特殊

如果一个拥有z-index属性的定位元素中子元素也设置了z-index
那么子元素会重新创建一个层叠上下文，子元素的z-index只能在当前的层叠上下文中对比排列

z-index为负< background< border< 块级元素 <浮动元素 <内联元素 <没有设置z-index的定位元素 < z-index为正

0

默认

数字

值可以为任何整数（正数、负数）,值越大离我们就最近，值越小离我们越远。值大的元素遮盖掉其他元素。

auto

元素一旦成为定位元素，其z-index会自动生效，此时z-index的默认就是auto（也就是0）

filter:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6xCK1SGk-1605107796666)(media/256dcfe3ab817d358f47247625192ae2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z9jSAVpM-1605107796667)(media/92ae8cde5ed4c5e9d906702c0c0949a9.png)]

blur

值越大越模糊。默认为0，不模糊。可以使用px或em作为单位。

opacity

透明度。0~1，1为完全不透明。0为完全透明。

grayscale

灰度，值为0时没有变化，值为1时完全变成灰色图像。

invert

将元素所有的颜色做反向处理。值为0时没有变化，值为1时进行颜色的反转。

所谓的反转就是拿255减去颜色的r、g、b的值。

brightness

调整亮度。如果值为0那么完全为黑色，值越大亮度就会越高。

sepia

调整元素为红褐色。值为0时没有变化为1时元素变为红褐色。

transition

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gio7cknL-1605107796670)(media/256dcfe3ab817d358f47247625192ae2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kq6vxX8d-1605107796672)(media/92ae8cde5ed4c5e9d906702c0c0949a9.png)]

过渡是元素从一种样式逐渐改变为另外一种的效果。
步骤：
指定要添加效果的css属性。
指定效果的持续时间。

简写格式

`transition:属性要过渡多少时间过渡的效果（快、慢）延迟时间 , 属性
要过渡多少时间过渡的效果（快、慢）延迟时间 , 属性要过渡多少时间
过渡的效果（快、慢）延迟时间`

transition: 属性要过渡多少时间过渡的效果（快、慢）延迟时间。

transition-property:

格式：transition-property:value，只有在该属性中定义的值（其他的属性名），才会以动画的形式持续一段时间而不是瞬间发生变化。

none

不过渡任何属性

all

过渡所有的属性,不是所有的属性都能过渡

属性的值能够使用数字值的都支持过渡，不能转换为数字值的不能使用过渡。

`display:none`不支持过渡。因为不是数值。

其他的值

transition-property:width,height;

transition-duration:

过渡的持续时间
格式：transition-duration:value，指定的是从一个状态过渡到另外一个状态要多久。

0s

默认为为0。

值：单位为s或ms。

如果让transition-duration支持多个属性，并且每个属性各自使用不同的持续时间，那么可以使用类似：

`transition-duration:1s,2s;`

transition-timing-function:

ease

慢速开始，然后加速，然后再慢下来。

linear

整个过渡过程保持相同的速度。

ease-in

慢速开始，然后加速

ease-out

快速开始，然后减速。

cubic-bezier()

cubic-bezier(.71,.58,.22,1.22)，使用贝塞尔曲线的值来控制速度。

https://cubic-bezier.com/#.17,.67,.83,.67

transition-delay

0s

默认为0，过渡立即开始，元素的状态发生变化就开始过渡。

其他的规则和`transition-duration`的规则是相同的。

反向过渡

如果只在:hover上面声明过渡，那么只在鼠标移入时才会触发过渡。移除时瞬间变为原来的状态。如果想让移除时也是有过渡效果那么我们就需要将过渡应用在默认状态上。

如果加在默认状态上，各个属性通过相同的过渡回到默认状态，延迟相同，但是时序函数是相反的。

gradient

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3n1g7Vbn-1605107796675)(media/256dcfe3ab817d358f47247625192ae2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ZC81kkt-1605107796677)(media/92ae8cde5ed4c5e9d906702c0c0949a9.png)]

渐变指从一个颜色到另一个颜色的平滑过渡。它是图像，可以在CSS中任何一个使用图像的地方使用。
渐变的最大特点就是没有固定尺寸。
渐变分为线性渐变、径向渐变
在上面的基础上又添加了循环渐变和不循环渐变。

linear-gradient:

/* background-image: linear-gradient(red,blue); */
/* background-image: linear-gradient(to right,yellow 0%,red 10%,green 50%,green
100%); */
线性渐变指沿着一条线进行填充得到渐变。
这条线是贯穿元素的中心点的一条线，这个线称为梯度线。

格式:

：`linear-gradient:[方向/角度] color1 color2…`

color

background-image: linear-gradient(yellow, green,blue)

简单的颜色值，你可以任何类型的颜色值，包括rgba、transparent，颜色可以有两个或多个。

如果有多个颜色则平均分配在梯度线上。
颜色详细设置

默认的时候颜色平均分配在梯度线上，可以给颜色值指定一个位置，让它不平均分配。
background-image: linear-gradient(to
right,yellow,red,green);，yellow在0%的位置插入，red在50%的位置插入，green在100%的位置插入。
可以指定px 或 %单位插入到指定颜色的后面。

background-image: linear-gradient(to right,yellow 0%,red 10%,green 30%,blue
50%);，
0的位置插入了黄色，30的位置插入了绿色（0~30之间就是黄色到绿色的过渡），50的位置插入了蓝色。
排布的颜色没有到梯度线的末端将会将最后一个颜色一致延伸下去。
通过上面的规则我们可以来实现急停的效果。

deg

角度的设置

梯度线的颜色的分配

梯度线在分配颜色的时按照梯度线的90度的地方分散开来，分散出来了很多的虚拟的线条来进行无线的延伸。

方向

方向列表

to bottom
默认值
to top
梯度线方向向上
to left
梯度线方向向左
to right
梯度线方向向右
to left top
左上角
to left bottom
左下角
to right top
右上角
to right bottom
右下角

radial-gradient

径向渐变，沿着一个中心点向四周扩展颜色并且平滑过渡。
radial-gradient([大小][at point] color1 color2…);
默认时，径向渐变在中间显示，如果是在正方形渐变为圆形，矩形元素渐变为椭圆形。
控制大小
一个值或两个值
如果是一个值得到是圆形的渐变，值为半径。background-image:
radial-gradient(50px,red,blue);
如果是留个值，得到的是椭圆形渐变，第一个值为椭圆的宽度的一半，第二个值为椭圆的高度的一半。
我们得到的渐变的形状和所在的图像的尺寸，没有关系。如果是圆得到的就是圆形渐变，如果是椭圆得到的就是椭圆形渐变。
梯度射线，梯度射线从渐变的中心向右延伸渐变的其他部分根据这根线构建。
颜色的详细设置
默认时，如果有多个颜色则默认平均分配在梯度射线上（颜色和颜色之间尽量平滑混合），我们可以指定一个位置，让其不平均。
颜色后面可以加px 或 %
at point ，默认时径向渐变在的中心在元素的中心，可以使用at point 来进行改变。
point的值为background-position属性的值。
/* background-image: radial-gradient(50px,red,blue); */
background-image: radial-gradient(100px 100px at 30% 30%,red 20px,yellow);

repeating-linear-gradient

斑马线
background-image:repeating-linear-gradient(135deg,rgb(250, 226, 1) 0%,rgb(250,
226, 1) 10%,rgb(0, 3, 0) 10%,rgb(0, 3, 0) 20%);
重复性线性渐变
重复性渐变使用repeating-linear-gradient重复性渐变在梯度线上不断循环排布声明的颜色，最后一个颜色的长度值用于定义图案的整体长度，超过该长度之后就开始循环了。
<style>
h1{
margin:0;
padding:0;

width:500px;
height:100px;
border:1px solid pink;

background-image: repeating-radial-gradient(yellow,blue);
}
</style>
<h1></h1>
上面的代码不会循环渐变，因为使用的默认值，渐变在中心点扩散到元素四周。所以必须限制径向渐变的尺寸，才会在第一次渐变结束后开始重复。

flex

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0wzHx06D-1605107796681)(media/256dcfe3ab817d358f47247625192ae2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e9BqkVaF-1605107796682)(media/92ae8cde5ed4c5e9d906702c0c0949a9.png)]

弹性盒子布局：弹性布局、弹性盒子、flex布局、伸缩布局、伸缩盒子。
弹性盒子是一种强大的布局方式，也比较简单。通过弹性盒子可以指明空间的分布方式、内容的对齐方式。而且他能够改变元素的顺序。
弹性盒子比较突出的特点是，让元素对不同的屏幕不同的显示设备做到更好的适应。
弹性布局是父元素和子元素之间的关系。
弹性容器
父元素:弹性空间或弹性容器
在元素上声明：display:flex就已经激活了弹性盒子布局。这个元素随着成为了弹性容器。弹性容器负责在所占的空间内布置子元素、控制子元素的布局。
弹性元素
子元素：弹性项或弹性元素
弹性容器的子元素成为弹性元素（只有直接子元素使用弹性盒子布局，后代元素不受影响。）
弹性的元素包括弹性容器的子元素、生成的内容（::before、::after生成的内容）。
在弹性容器中，各弹性元素在主轴上排列。

### 主轴

主轴：内容沿着主轴开始流动，指定弹性元素的流动方向。默认主轴是水平方向，左边开始、右边结束。

### 垂直轴

垂直轴（交叉轴、侧轴、辅轴），弹性元素沿着此轴进行堆叠，指放置新弹性元素行的方向。垂直轴始终与主轴垂直，垂直轴是从上面开始，到下面结束。

flex-direction:

row

主轴的起始边在弹性容器左边，结束边在弹性容器右边(默认值)

row-reverse

主轴的起始边在弹性容器右边，结束边在弹性容器的左边。

column

主轴的起始边在弹性容器上面，结束边在弹性容器的下边。**垂直轴变成了横向。**

column-reverse

主轴的起始边在弹性容器的下边，结束边在弹性容器的上边。**垂直轴变成了横向**

flex-wrap:

nowrap

默认时会沿着主轴在一行上面排列，不会换行。

wrap

超过弹性容器，将会沿着垂直轴的方向进行换行

justify-content:

flex-start

flex-start，默认值，弹性元素紧靠主轴起始边。

flex-end

弹性元素紧靠主轴结束边

center

将弹性元素作为一个整体，居中显示于主轴的中点。

space-between

元素包含空间

space-around

将余下的空间除以该行的弹性元素的个数，得到每个弹性元素应该分配到的空间，然后将这个空间分成两份放在弹性元素的左边和右边。

space-evenly

空间包含元素

align-items:

stretch

（默认值）：如果子元素没有设置高度或高度设置为auto，将沾满整个容器（行）的高度。

flex-start

将各弹性元素与弹性容器垂直轴起始边那一侧对齐。

flex-end

将弹性元素与弹性容器垂直轴的结束边那一侧对齐。

center

弹性元素中点将与所在行的垂直轴的中点对齐

.

align-self:

auto

默认值，其对齐方式继承自容器的align-item属性。

flex-start

将元素与弹性容器的各行的垂直轴开始那一侧对齐。

flex-end

将元素与弹性容器的各行的垂直轴结束那一侧对齐。

center

弹性元素的中点与所在行的垂直轴中点对齐。

stretch

如果项目为设置高度或设置为auto，将占满整个容器的高度。

子主题 6

align-content:

设置弹性元素如何在垂直轴上分布
align-items属性定义在弹性元素的垂直方向上的对齐方式。(设置弹性元素在当前行的位置分布)
设置整个弹性元素如何对齐
align-items是对每行进行对齐。align-content，是将整个弹性容器看成是一个整体然后进行对齐。
align-content:属性对单行弹性盒子模型无效（必须得有flex-wrap:wrap）
align-content存在时align-items不起作用。
align-content和align-items的区别在于:align-content将所有元素看成一个整体然后进行操作，align-item是针对于每一行的操作。

flex-start

flex-end

center

space-between

sapce-evenly

flex-grow:

弹性增长因子（设置在子元素上）
flex-grow，适用于弹性元素，用来定义有多余的空间时是否允许弹性元素增大，以及允许增大时占用多少空间。

0

默认值

number

用数值来定义扩展比率。不允许负值

order

弹性元素排序（设置在子元素上）
默认时，弹性元素的显示和排序顺序与在源码中的顺序一致。order属性可以修改单个弹性元素的显示顺序。
格式：order:value，用于弹性元素。
默认情况下，所有弹性元素的顺序都是0。
修改弹性元素的视觉顺序，可以把order属性设置为一个非零的值。正数或负数。
order的数值越大越在主轴上靠后显示。
注意：只是视觉上的变化，就想在源码中的顺序发生了改变，但是实际上没变

0

默认情况下，所有弹性元素的顺序都是0。

number

order的数值越大越在主轴上靠后显示。

flex-shrink:

收缩因子
用的少。
flex元素仅在默认宽度之和大于容器时才会触发收缩。flex元素收缩时最小宽度不能小于其中内容的宽度。
如果我要控制收缩需要用到flex-shrink，适用于弹性元素。缩减因子定义的是空间不够放置所有弹性元素，而且弹性元素不能增加尺寸或不允许换行时如何分配缺少的空间
calc(50% + 50px);
对于元素宽度相等情况下可以使用我们刚才用的取份数的方法，但是如果元素宽度不相等：
缩小比例=缺少空间/((宽度1* 缩减因子) + …(宽度n*缩减因子))
缩小比例=250/(400*0.7 + 300*0.8+ 300*1) = 0.3048780487804878
最终缩小的宽度= 弹性元素宽度*（缩减因子*压缩比例）
最终缩小的宽度 = 400 * 0.7 * 0.3048780487804878
85.36585365853658
弹性元素的宽度-最终缩小的宽度= 现在的宽度。
400-85.36585365853658

1

默认的值为1，使用其它指默认是始终是一个数字。

number

用数值来定义收缩比率。不允许负值

只是视觉上的变化，就想在源码中的顺序发生了改变，但是实际上没变

2D/3D动画

transform

transform-style:

preserve-3d

• 当子元素需要3d变换的时候，需要在父级开启3d

• 配套:

• perspective: 300px;

• 开启近大远小的效果
子主题 2

transform-origin:

x

• 固定值（left center right）百分比 px单位
x

• 固定值（top center bottom）百分比 px单位

transform:totate()

totate()

• deg

• 值为正：顺时针
rotateX()

• deg

• 沿着x轴旋转
值为正：上部分向屏幕里移动，下部分向屏幕外移动
默认沿着y轴的中心，和x轴旋转
totateY()

• deg

• 角度为正的时候：左侧出来右侧进入

transform:translate()

translate()

• ranslate(x,y)

• 如果只传入一个参数，则只代表x
translateX()

• px %

• 值为正则向右移动
translateY()

• px %

• 值为正则向下移动
translateZ()

• px

• 值为正,则向前移动,类似于放大,但是不是

transform:scale()

scale

• 一个参数

• 1个参数控制x和y 2个参数分别为x和y
scaleX()

• 正负数

• x轴改变(缩放)
scaleY()

• 正负数

• y轴改变(缩放)

transform:skew()

skew

• deg

• 一个参数只代表x
两个参数代表x 和 y
skewX()

• deg

• 子主题 1
skewY()

• deg

• 子主题 1

多个变形使用一个transform属性否则会覆盖多个变形书写顺序会影响显示效果

旋转后移动

transform:rotateY(30deg) translateX(30px);

移动后旋转

transform: translateX(30px) rotateY(30deg);

animation

@keyframes

• 用来定义一个关键帧

• 格式是@keyframes name {}
关键帧不是针对某个元素定义的，而是定义好之后，任意元素都可以使用

• @keyframes change1 {
from{
background-color: green;
}
to{
background-color: pink;
}
}

•
关键帧如果没有书写开始和结束状态，或者开始和结束状态没有某个属性的时候，默认状态就是他的开始和结束状态
animation-name: change1;
animation-duration: 2s;
/* 动画方式，控制的是每两个关键帧之间的方式 */
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
animation-delay: 1s;
/* 动画执行次数是个number 或者infinite代表无穷 */
animation-iteration-count: infinite;
animation-direction: alternate;

animation:change1 2s linear 1s infinite alternate;
animation:change1 2s linear 1s infinite alternate;

animation-fill-mode:

forwards

• 结束后保持最后一帧
backwards

• 开始前延迟等待的那段事件保持第一帧
both

• 开始和结束都设置
animation-fill-mode控制元素在动画之前等待的时候和结束后的状态

逐帧动画

逐帧动画其实控制的是timing-function（动画方式）让位置移动变成阶跃式变化
animation:bike .1s steps(32) infinite;

viewport

vw单位:

`1vw=当前屏幕宽度的1%`也可以理解为1vw占据当前屏幕1份。

移动端适配

一般移动端设计稿的宽度为750px 460px，因为网页设计图是2倍图。iphone678这三个型号上。

1. html的fonts-size设置为5.3332vw；

```html
html{
font-size:5.3332vw;
}
```

2. 在使用vw的单位的地方使用rem并且除以40就可以了。

设计稿上元素宽度为70px，那么你写css的

`width:calc(calc(1rem * 70) / 40);`

@media

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KRtjNZ2T-1605107796686)(media/256dcfe3ab817d358f47247625192ae2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U1dJrP2M-1605107796688)(media/92ae8cde5ed4c5e9d906702c0c0949a9.png)]

媒体查询类型

all

所有能够呈现内容的媒体。

print

打印机或是文档的打印预览

screen

呈现文档的屏幕媒体，电脑显示器运行在这上面的web浏览器。

speech

语音合成器，屏幕阅读器。

媒体特性

min-width

指的web浏览器中的视图区域加滚动条的宽度大于指定的宽度。（可以理解为最小值为xxx，反过来想大于等于时候才成立。）

max-width

指web浏览器中视口区加滚动条的宽度小于等于指定的宽度。

orientation

指定了设备处于横屏还是竖屏，通过width和height来进行判断

portrait

如果height大于或等于width时返回**portrait** (可以看做竖屏)

landscape

如果width大于或等于height时返回`landscape`看做是横屏状态。

color

是否是彩色设备

用法

link

<link rel=“stylesheet” href="./screen.css" media=“screen” type=“text/css”>
<link rel=“stylesheet” href="./print.css" media=“print” type=“text/css”>

style

<style media=“screen”>
h1{
background-color: dodgerblue;
font-size: 300px ;

}
</style>
<style media=“print”>
h1{
font-size: 20px;
color: firebrick;
}
</style>

media模块

<style>
body{
background-color: hotpink;
}
@media screen {
body{
background-color: pink;
text-align: center;
}
h1{
font-size: 80px;
}
}
@media print{
h1{
font-size: 100px;
color: red;
}
}
</style>

根绝媒体特性查询

整体格式：media=“媒体类型逻辑关键字（媒体特性）”
不光可以使用媒体类型来进行查询还可以根据媒体特性应用样式。比如显示器的尺寸。
<link href=“test.css” type=“text/css” rel=“stylesheet” media=“print and
(color),screen and (color)”/>
上面代码是用来匹配（打印设备并且是彩色的），(显示设备并且是彩色的)，使用逗号只要匹配上任意一个条件就会引入test.css中的代码。
每个像print and
(color)，这种我们称为媒体描述符，一个媒体描述符我们是由一个媒体类型和多个媒体特性组成的，多个媒体特性要放在圆括号中。
<link href=“test.css” type=“text/css” rel=“stylesheet” media=“screen and
(min-width:600px) and (max-width:800px)”/>
上面的代码用来匹配如果是屏幕设备并且最小宽度是600px并且最大宽度800px引入test.css
<link href=“test.css” type=“text/css” rel=“stylesheet” media="(min-width:600px)
and (max-width:800px)"/>这行代码也是合法的相当于<link href=“test.css”
type=“text/css” rel=“stylesheet” media=“all and (min-width:600px) and
(max-width:800px)”/>

media="媒体类型逻辑关键字（媒体特性）

web中常用媒体查询

/当做手机、小屏幕/
@media (max-width:768px) {
body{
color:red;
}
}

/当做小屏幕设备、平板电脑/
@media (min-width:768px) and (max-width:992px) {
body{
color:hotpink;
}
}

/中等屏幕设备，pc电脑桌面/
@media (min-width:992px) and (max-width:1200px) {
body{
color:green;
}
}
/大屏幕设备/
@media (min-width:1200px){
body{
color:skyblue;
}
}

厂商前缀

如果在源代码中发现类似`-webkit-`类似开头的代码，这种东西叫厂商前缀。浏览器厂商通过它来标记实验性或专属的属性。

目前厂商前缀使用的趋势有所减缓，新版本浏览器逐渐删除了对前缀的属性的支持（但是这种现象还会存在）。

`-moz-`，firefox浏览器

-ms-`，微软

`-o-`，opera的浏览器

`-webkit-`，safari或chrome浏览器。

css中的颜色

16进制的值。

英文单词。 pink blue yellow

rgb颜色值：格式：`rgb(红,绿,蓝)`，值0~255之间的值。

`rgb(27,72,114)`

rgba颜色值：格式：`rgba(红,绿,蓝,透明度)`，前面三个和rgb相同，后面一个a代表的是透明度，0为完全透明，值越大透明度越低，可以使用`.5`代表就是。值的区间就是`0~1`。

底部留白问题

产生原因

在HTMl5的文档声明中，内联元素所有解析和渲染表现如同每个行框盒子前面有一个`空白的节点`，这个节点透明，没有宽度，没办法获取。但是只在设置了`<!DOCTYPE html>`时才会出现。

有了所谓的`空白节点`就是在图片前面有一个看不到内容。即使是内容，那么默认就是采用的`vertical-align:baseline`对齐，图片是行内块状元素，它的基线是图片的底部，所以才会导致图片下面有一段空白。

解决办法

图片块状化,块状化之后就没有所谓的基线对齐了

底线对齐法

父元素的font-size设置为0

去除图片默认间隙

<h>和<a>默认样式

后代的标签可以继承父标签中所有关于设置文本的CSS属性（除了text-decoration），继承的权重是0。

对于a标签来说默认对字体颜色进行了设置，所以会覆盖掉继承下来的颜色。

h标签默认对字号进行了设置，所以也会覆盖继承下来的字号。

权重值拼的是自己的权重值，继承下来的属性不会参与到权重比较中去。

外边距折叠

产生原因呢

为什么设计成外边距折叠：实际上就是为了页面排版美观。

- 情况一：盒子的下margin和它下一个兄弟元素的上margin产生了折叠。

- 折叠的时候上、下外边距谁的大就使用哪个值
- 解决办法:
- 设置第一个元素inline-block
- 直接设置元素一边的外边距（设置上外边距或下外边距）

- 情况二：盒子的上margin和它第一个子元素的上margin产生的折叠（父级塌陷）

解决办法

- 产生外边距折叠的根本原因：margin之间有直接接触。
- 解决办法:
- 父元素设置边框
- 父元素设置内边距

外边距折叠只有块状元素的垂直外边距会折叠，左右外边距不会折叠的

纵向格式化

块级元素的内容决定高度。如果给块级元素设定的具体的高度高于我们内容的高度，那么多出来的内容有点像内边距。如果你给元素设置的高度小于内容的高度，具体的行为靠overflow属性的值。

`包含它的父块级元素的高度 = 子元素的margin-top + 子元素的border-top +
子元素的padding-top + 子元素的height+子元素的padding-bottom + 子元素的
border-bottom + 子元素的margin-bottom。`

高度、上、下外边距可以设置为auto。内边距和边框必须为具体的值，否则取默认值默认为0。

height、marign-top、margin-bottom，两个设置为具体值一个为auto。

_height、margin-top、margin-bottom，其中margin-top和margin-bottom都设置为具体的值，height的值设置为auto，这个时候高度不会被自动拉开。_

height、margin-top、margin-bottom都设置为auto之外的值。

height、margin-top、margin-bottom其中两个值设置为auto。

_margin-top或margin-bottom为auto，二者自动计算去0。_

某一外边距和height设置为auto时，外边距为auto的那个值将会被设置为0，height被设置为内容高度。

横向格式化

默认情况下块级盒子组成部分（横向）
包含它的父块级元素的宽度 = 子元素的margin-left + 子元素的border-left +
子元素的padding-left + 子元素的width+子元素的padding-right + 子元素的
border-right + 子元素的margin-right。
七个属性中只有子元素的width、子元素的margin-left、子元素的margin-right可以设置为auto。其他的属性只能设置为具体值或使用默认值（默认值为0）。
width、margin-left、margin-right，其中两个设置为具体的值，一个为auto的情况。
这种情况下，设置为auto的值的那个属性必须满足上面所说的公式，你可以将auto理解为补全总和。
width、margin-left、margin-right，三个属性都设置为auto之外的值
这种情况下margin-right不生效，这种情况CSS中叫过度约束。
如果margin-left和margin-right两个设置为auto
那么两侧外边距相等元素在父元素中间显示。
某一外边距和width设置为auto时
外边距为auto的那个值等于0，width被设置为填满容纳块所需的值
如果三个属性都设置为auto
那么两边的外边距都设置为零，width则是要多宽有多宽