<!-- display:none与visibility:hidden
display:none 隐藏相对应的元素且不占该元素原来所占的空间
visibility:hidden 隐藏相对应的元素且挤占该元素原来的空间
px 长度单位 表示一个像素点 em 相对长度单位 表示当前元素的字体大小 rem相对与html元素声明字体大小
简述浮动布局及其工作方式
1. 浮动布局（x轴）
float:left
浮动元素：
1) 脱离文档流
2) 块元素的宽度不再是100%，由内容决定
3) 块元素不再支撑其父元素
4) 同一层次（兄弟关系）浮动元素会在一行排列，当浮动元素宽度总和大于父元素的时候会发生换行。
clear
清理浮动
left 不与左浮动元素在同一水平线上
right 不与右浮动元素在同一水平线上
2. animation
animation-name 动画名称 animation-timing-fuction：时间曲线函数 animation-duration 动画持续时间
animation -delay 延迟时间 animation-direction 动画执行方向 animation-iteration-count 动画执行次数
animation-fill-mode 填充模式，动画结束后保留哪一帧规则 animation-play-state: paused; 动画状态
animation 速写形式 animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation : 动画名 | 持续时间 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 ；
持续时间： 1S 或者 1000ms （单位可用s和ms）
过渡方式： 跟transition取值一样
次数： 3 或 2.1 或者 infinite（无限循环）
方向： reverse | alternate（偶数次反向播放、奇数次正向播放） | alternate-reverse（alternate反之）
填充： none | forwards | backwards | both
forwards ： 当动画完成后，保持最后一个属性值，（在最后一个关键帧中定义）
是否暂停： paused | running
—简述伸缩盒布局
伸缩盒容器 伸缩盒子元素
1) 概念
伸缩盒容器 div.container 、ul.container
伸缩盒元素 div、li
主轴 默认主轴x轴，伸缩盒中，伸缩盒子元素沿着主轴来进行排列
交叉轴 与主轴垂直的轴
2) 规则
伸缩盒容器
display:flex;
强制让它的子元素沿着主轴方向中显示，并且子元素不会脱离文档流，交叉轴上元素的高度如果没有指定，应该和父元素保持一致。
flex-direction:row;
定义主轴方向，row 表示主轴是x轴，column表示主轴为y轴
flex-wrap:nowrap
当子元素的长度加起来超过主轴上的父元素的宽度，默认不换行，
align-items: stretch;
定义伸缩盒容器中的子元素在交叉轴上的排列方式
justify-content:space-around;
定义伸缩盒容器中的子元素在主轴上的排列方式
伸缩盒元素
flex-basic: 主轴上的基础长度（基本工资）
flex-grow: 主轴上剩余空间分配的份数（分红）
flex-shrink: 主轴上亏损空间的分摊份数（亏损）3
盒子的水平居中
1） margin： 0 auto；
2） .content{
position: relative;
width: 400px;
height: 400px;
aqua;
}
.box{
position: absolute;
margin-left: 50%;
left: -50px;
width: 100px;
height: 100px;
bisque;
}
3）使用伸缩盒子
display: flex;
justify-content: center;
align-items: center;
4）边框盒子 和内容盒子
边框盒子 实际宽=内容款+padding+boder
内容盒子 实际宽=width+padding+boder
5）css3选择器
核心选择器 id class 标签选择器 并且 和 普遍*
层次选择器 子选择器> 后代选择器空格 兄弟选择器 ~当前之后所有 +当前元素之后
属性选择器
伪类选择器：:nth-child :visited :active :hover :focus
伪元素选择器::after ::before
6)选择器优先级
html 1000 id 100 类 伪类10 元素 伪元素1 当权值相等 后者覆盖前者 ！important
7）文本在盒子垂直居中
#div1{
width:200px;
height:200px;
position: absolute; //父元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的 height，width
margin-left: -100px;
}
//方法二:未知元素的高宽
#div1{
width: 200px;
height: 200px;
#6699FF;
margin:auto;
position: absolute; //父元素需要相对定位
left: 0;
top: 0;
right: 0;
bottom: 0;
}
