Css

行内式，内嵌式，外部样式表
选择器
- 元素选择器（例如input,li）
- class选择器：.classA{}
- id选择器：#id {}
- 复合选择器：
  - 子类选择器：.classA > li{}
  - 后代选择器：.classA li{}
  - 并集选择器：.classA,.classB{}
  - 相邻兄弟选择器：.classA+.classB{}
  - 伪类选择器：.classA :hover
    - hover：悬浮在元素上面时的
    - nth-child(i)：第i个元素，如果是nth-child(2n)就是偶元素
    - before：在前面加东西，其中有content属性表示内容是什么
    - after：在后面加东西，其中有content属性表示内容是什么
  - focus伪类选择器：用于选取获得焦点的表单元素
- 子类会继承父类的样式（例如color是继承的，border是继承的）
属性选择器：
- input[tyepe="text"]{}
font: style size weight family表示字体
- style：样式：有normal，italic
- weight：粗细，一般用的是bold（700），normal（400），或者也可以通过数字调节，越小越细。
- size：大小，后面跟px，或者em()（可以在所有浏览器中自动调整文本的大小）
- family：字体
- 以上属性都可以单独设置，例如font-size = xxx
Text：设置文本
- color：颜色，可以有color:red，color:#000000，color:rgb(255,0,0);
- text-align：对齐方式，center，right，justify（每一行被展开为宽度相等，左右外边距是对齐）
- text-decoration：设置或者删除文本的装饰（一般用来删除a的默认样式）
- text-transform：转变为全部大写uppercase，或者小写，首字母大写
- text-indent：文本缩进。指定第一行的缩进
line-height：设置文本行高
background：设置背景
- background-color：背景颜色
- background-image:url('xxx')：背景图片
- background-repeat：设置在某一方向重复，比如有repeat-x，no-repeat
- background-position：改变图像在背景中的位置
- background-attachment：设置背景是否固定或者随着页面的其余部分滚动，fixed或者scroll或者local
- background-size：设置图片大小，可以有cover，contain
border width style color：边框
- border-radius：边角弧度大小（用于设置圆角边框）
- border-width：边框大小
- border-style：边框样式，例如dotted（点线边框），dashed（虚线边框），solid（实线边框），double（两个边框）
- border-color：边框颜色,可以设置为透明transparent用这个实现三角形效果
margin：外边距，可以用auto
padding：内边距。可以用auto
box-sizing：表示如何计算一个元素的总宽度和总高度
- border-box：表示将border和padding的值算在元素里面，采用内减模式
- content-box：默认值，如果一个元素设置为width=100px，然后设置border-width=10px，那么盒子总宽就变成了120px
display显示
- none：隐藏元素（使元素完全消失，和visibility:hidden不一样，后者是元素仍然存在，只是元素隐藏了）
- block：块元素，占用全部宽度，前后都有换行符
- inline：内联元素
- flew：弹性，为父亲设置为flew
  - 子类写flex: 2表示它占2份（默认是每个元素占1份）
  - 默认主轴为row，也就是按行放。flex-direction:column就可以设置列为主轴
  - 父类justify-content：定义主轴的样式，属性有flex-start/end，space-around/between，stretch
  - 父类flex-wrap：可换行，不然他们会挤在一行。属性有wrap，nowrap
  - 父类align-items：侧轴样式，适合单行的时候用
  - 父类align-content：侧轴样式，适合多行的时候用
  - 子类align-self：可以有自己的样式，比如父类设置了align-items: flex-end，子类可以设置自己为flex-start

Float：浮动，使元素脱离文档流

可以用来图文环绕，让块标签在一行相邻布局（如果用行内块会有间距）
left或者right
浮动元素会脱标，可以覆盖基本的元素，不能覆盖文字，不能用text-align和margin居中

浮动会有问题，有时候会要清除浮动，例如：

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7    <title>Document</title>
 8    <style>
 9        .top{
10            margin: 0 auto;
11            width: 1000px;
12            /* height: 300px; */
13            background-color: pink;
14        }
15        .bottom{
16            height: 100px;
17            background-color: gray;
18        }
19        .left{
20            float: left;
21            height: 300px;
22            width: 280px;
23            background-color: green;
24        }
25        .right{
26            float: right;
27            height: 300px;
28            width: 700px;
29            background-color: skyblue;
30        }
31    </style>
32</head>
33<body>
34    <!-- 浮动标签不能撑起父级标签的height 因为不是标准流里的 -->
35    <!-- 父子级标签 子是浮动 父没有高度 那么子后面的标准流就会跑上来 -->
36    <div class="top">
37        <div class="left">
38
39        </div>
40        <div class="right">
41
42        </div>
43    </div>
44    <div class="bottom"></div>
45</body>
46</html>

在父元素内容最后加一个块级标签，设置clear:both

1.clearfix{clear:both}
2...
3    class="top"{
4        ...
5        <div class="clearfix">
6    }
7...

父元素加上伪类元素，设置块级，并且clear:both(推荐使用)

 1.clearfix::after{
 2    clear:both
 3    content:''
 4    display:block
 5    height:0
 6    visbility:hidden
 7}
 8...
 9class="top clearfix"{
10}
11...

在上面的基础上改变一些，双伪类

1.clearfix:after,.clearfix:before{
2    content:''
3    display:table;
4    clear:both
5}

让父元素加上一个overflow:hidden（不推荐）

position位置
- static：默认，没有定位
- absolute：相对于最近的已定位的父元素，如果没有就是相对于<html>
- relative：相对定位，是相对于正常位置移动（但是原本所占的空间不会变化）
- 一般是子绝父相（子绝对定位，父相对定位）
- fixed：相对于浏览器窗口固定，即使窗口是滚动的他也不会移动
- sticky：粘性定位，一开始是relative的，然后页面滚动超出目标区域的时候，会变成fixed的。
  
  元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
  
  这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
z-index：层叠性
- 默认为0，值大的优先显示，如果相等就比较代码顺序
- 标准流 < 浮动 < 定位
overflow：控制内容溢出元素框的时候添加滚动条
- visible：默认值，内容会直接成现在元素框外
- hidden：超出的看不见
- scroll：增加滚动条
- auto：如果超出了，会显示滚动条
- inherit：继承父类的overflow属性
vertical-align：垂直对齐
- 行内块和行内标签是默认文字基线对齐的
cursor：鼠标光标显示
- text：文字
- move：移动
- pointer：点击
opacity：透明值，1表示完全不透明，0表示完全透明

transform：转换
- translate()：从当前元素位置移动
- rotate()：在一个给定度数顺时针旋转的元素
- scale()：元素增加或者减少的大小，取决于宽度和高度的参数
transition：过渡，从一种效果到另一种效果
- transition: width 1s linear 2s表示对宽度，时间1s，过去时间曲线为线性，，开始时间是2s后
- transition-property：规定应用过渡CSS属性的名称
- transition-duration：过渡效果花费的时间
- transition-timing-fuction：时间曲线，默认是ease。还有linear
- transition-delay：延迟时间
@keyframes动画

例如：
```
 1@keyframes myfirst{
 2    0%{
 3        background: red;
 4    }
 5    100%{
 6        background: yellow;
 7    }
 8}
 9
10div{
11    animation: myfirst 5s;
12}
```
- 需要创建动画，并且绑定在一个选择器上，至少需要名称 + 时间
- animation-duration：动画持续时间
- animation-timing-function：动画速度曲线，默认是ease，还可以有linear
- animation-delay：定义动画什么时候开始，默认是0
- animation-iteration-count：规定动画被播放的次数，默认是1
- animation-direction：规定动画是否在下一周期逆向播放。默认是normal，还可以是reverse，alternate（在奇数次正向，偶数次反向），alternate-reverse
- animation-play-state：规定动画是否正在运行或者停止（可以使用属性暂停动画或者开始），属性有paused和running