20220825 第七小组 王茜

css三大特性

层叠性：

1.如果样式冲突，遵循就是就近原则，哪个声明样式离结构近，就执行哪个样式 ​ 2.如果样式不冲突，就不层叠

一个标签可以有多个CSS样式，层叠样式规则：按照样式的声明顺序来层叠

前提：选择器必须是同一种

继承性：

字标签会继承父标签的某些样式。文本颜色，字号，背景颜色...

权重不能被继承

优先级：

类 > 标签 > id

权重：

1.继承的样式权重为最低0 ​ 2.行内样式权重最高100 ​ 3.如果权重相同，就近原则 ​ 4.!important 命令，无限大

CSS权重公式： 贡献值

继承、* 0，0，0，0

标签选择器 0，0，0，1

类，伪类选择器 0，0，1，0

ID选择器 0，1，0，0

行内选择器 1，0，0，0

！important 无穷大

width，height 大于无穷大

css常用的单位：

1、px像素：

绝对单位，一个像素代表一个点。如100px*100px的正方形，宽度100个点，高度100个点。

2、em是相对单位。

它会参考它的父级元素。字体，父级元素的字体是16px，要设置元素的字体大小为2em，当前元素的字体大小就是32px。

3、rem相对单位。

由整个HTML字号决定，由页面决定。当我们改变了浏览器的字号设置，页面的字号也会随之发生变化。应用在老人版。

4、百分比：

相对于父级元素的比例。

css常用属性

字体大小	font-size: 100px;
字体样式	font-family: '楷体';
行高	line-height: 200px;
粗细	font-weight: bold;
字体修饰	text-decoration: line-through;
字体倾斜	font-style: italic;
背景颜色	background-color: rgba(red, green, blue, alpha);除了三原色外还有透明度，0为全透明，1没有透明度

定位

文档流

在网页中将窗体自上而下分成好多行，并且在每行从左到右的顺序排列元素，即为文档流，网页默认的布局方式。

定位position

1、static：文档流，默认的

2、absolute：绝对定位，相对于一个父元素的绝对定位

当设置了绝对定位之后，原来的元素会脱离文档流，在页面上浮起来

3、relative：相对定位，相对于上一个元素的位置

4、fixed：固定定位

父相子绝：父元素相对定位，子元素绝对定位

浮动

清除浮动

<div style="clear: both;"></div> 

可见性，隐藏性

溢出：overflow：hidden

布局

双列布局（两列布局）

三列布局

动画

针对于火狐浏览器: -moz-animation: ;

针对于Safari和Google： -webkit-animation: ;

针对于Opera浏览器： -o-animation: ;

延迟：

悬停时使用

transition只能通过固定的属性来开始与结束值

transition: width 2s ease-in 3s,height 3s，background-color 3s;

动画：

animate

弹性布局flex布局

块级元素和行内块级元素

1、父容器要加上display：flex

排列方向：

row：从左到右

row-reverse：从右到左

如果一条轴线上放不下，换行的方式：flex-wrap，flex-wrap-reverse

设置主轴的排列策略：justify-content：center

交叉轴：align-items：center