css三大特性：
层叠性
- 一个标签可以有多个css样式
- 如果一个属性通过两个选择器设置到元素上，样式的层叠规则按照样式的声明顺序来层叠（遵循就近原则）
继承性
子标签会继承父标签的某些样式，比如文本颜色，字号
优先级
| 名称 | 权重 |
|---|---|
| 继承 | 0,0,0,0（最低） |
| ！important | 无限大 |
| *全部选择器 | 0,0,0,0最低 |
| 标签选择器 | 0,0,0,1 |
| 类，伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式 | 1,0,0,0 |
| width,height | 大于无穷大 |
- 如果权重相同，使用就近原则
- 如果有多个标签选择器，权重就直接相加
- 权重不能继承
- 权重不会进位
- 如果！important 与max/min，width max/min heigh同时都有，那么！important就不管用了
css常用的单位
| 名称 | 单位写法 |
|---|---|
| 像素 | px |
| 绝对单位（由父类字号决定） | em |
| 整个html字号决定 | rem |
| 百分比（相对于父类元素的比例） | % |
css里常用的
字体
字体大小
font-size
字体样式
font-style
字体粗细
font-weight
字体修饰
text-decoration
字体变更
font-family
组合w属性（上面所有的属性我都可以在这里定义）
font：
背景
背景颜色
设置颜色可以用
-
英文
-
16进制
-
rgb
-
rgba（透明度）后面的值是0~1的小数
background-color:
背景图片（如果既有背景颜色又有背景图片，会显示背景图片）
background-image:url(背景图片的地址)
设置宽，高
width:
height:
设置图片大小：
background-size(会自动平铺):
background-repeat：no repeat(不平铺)
background-position:top/center/botton
列表
列表样式类型:
无序列表ul
<ul>
<li></li>
<li></li>
<li></li>
</ul>
有序列表ol
<ol>
<li></li>
<li></li>
<li></li>
</ol>
列表常用方法：
列表标记的样式：
list-style: (需要的格式，如：数字，字母……);
可以有序变无序，无序变有序
区块：
定义一个元素的显示方式：
div{
display:(区块定义的方式 比如：none隐藏区块)
}
盒子模型
margin：外边距
border：div的边框
padding：div内的元素距离div边框的距离
盒子模型的宽：margin+border+padding+div大小
规定盒子模型如何显示
box-size :border-box 保证盒子模型的大小，不包括外边距
box-size:content-box 保证原始div的大小 不包括内边距和边框线
CSS定位：
文档流：
在网页中将窗体自上而下分成好多行，并在每行从左到右的顺序排列元素，即为文档流。
网页默认的布局方式。
定位 position：
static（就是默认的文档流）
absolute 绝对定位
相对于他的父元素的绝对定位
相对于你的父元素，你在什么地方
例子：
我们输入代码：
div2{
width: 300px;
height: 300px;
background-color: blue;
/* 绝对定位 */
position: absolute;
/* 我们定位完后给他一个类似“坐标”的东西 */
left: 100px;
top: 100px;
}
结论：
当我们设置了定位之后，原来的元素会脱离文档流，（可以说浮了起来），盖在了橘色上面
relative 相对定位
div2{
width: 300px;
height: 300px;
background-color: blue;
/* 相对定位 */
position: relative;
/* 我们定位完后给他一个类似“坐标”的东西 */
left: 100px;
top: 100px;
}
定位是相对于上一个元素的位置
fixed 固定定位
被定位的东西，会固定自己在页面中的位置，你拖动右边的导航条，它的位置也不会改变
子绝父相：
如果子元素，父元素都想有一个位置
子元素绝对，父元素相对
其他问题的一些补充
- 当我们使用了定位后，尽量不要使用margin，因为margin会根据该元素的初始位置来进行移动
margin 和 left top right bottom 有何区别
| 名称 | 性质 |
|---|---|
| margin | 设置是相对于自己的初始位置 |
| left、top、right、bottom | 相对于父类的位置，是定位父类的属性 |
可见性：
第一种方法：visibility:hidden （不仅在网页中消失，在f12调用后台时也会消失）
第二种方法：display：none （在网页中消失，但是在f12中依然可以看见）
溢出策略（超出的部分该如何处理）：
overflow:…………;
浮动 ：
使用float会让元素浮起来，浮动起来的元素自己原本的位置会空出来，没有浮动的元素会自动挤进去，导致其被浮动的元素盖住
内容坍塌：
如果一个父元素中的子元素全部浮动了，而父元素却没有浮动，就会导致父元素里的内容都没有了，可能会导致一些不好的结果
为了解决出现父级坍塌的情况我们可以有两种解决方法
- 让父级也浮动
- 清除浮动
只需要在浮动标签的下一个标签（不能是行级标签）设置clear：both
动画效果：
transition:（想要实现动画效果的属性及时间）
例子： transition: width 2s ease-in 3s,height 3s,background-color ease-out 2s;
在鼠标光标移上去时改变：div:hover {
width: 500px;
height: 500px;
background-color:aqua;
}
| 值 | 效果 |
|---|---|
| ease | 慢->快->慢 |
| ease-in | 慢->快 |
| ease-out | 快->慢 |
| ease-in-out | 慢->匀速->慢 |
我们还可以使用第二种方式：
先声明动画：
@keyframes myAnim {
0% {
width: 100px;
height: 100px;
background-color: orange;
}
25%{
……………………
……………………
}
引用自定义动画，延迟时间：
animation: myAnim 5s;
两种动画方式的区别：
trantransition和animate
transition只能通过固定的属性来开始与结束值