一、选择器
继承 *通配符 .class类选择器 #id选择器 行内样式 !important
后代选择器中间加空格 子选择器中间加> 兄弟选择器(所有的兄弟)中间 相邻兄弟选择器中间用+号 属性选择器 [name='sss'] 伪类选择器 : 伪元素选择器：：
二、文本相关样式
Background-color 背景颜色 Font-size 字体大小 Family 家庭 Font-style 字体样式 Italic 文字倾斜
Normal 让倾斜的字体正常 font-weight 文字粗细 text-align 对齐方式
Text-decoration=none 没有装饰文本 Overline 上划线基本不用 Line-through 删除线
Text-indent 段落的首行缩 Line-height 行间距 Text-align：center
布局相关样式
一/清除浮动的方式
1/Overflow：hidden
2/在父元素后面添加一个块元素,在给块元素设置clear:both
3/用伪元素: .clearfix::after{
Conten:’’
Display:block
Clear:both}
4/.clearfix::after {
Content:’’
Display:block
Clear:both
Height:0;
Visibility:Hidden}
5/.clearfix::before,.clearfix::after {
Content:’’
Display:table:
}
.clearfix::after {
Clear:both;}
定位position
z-Index：提高定位的层级
相对定位：relative
绝对定位：absolute
静态定位：static
固定定位：fixed
文字相关布局
顶线Top line
中线 middle line
基线 base line
底线 bottom line
文字后面带省略号
White-space：normal默认的，如果文字显示不开，自动换行。
White-space:nowrap 强制文字不许换行
Text-overflow：ellipsis
单行文本显示不出来带省略号
Text-overflow：allipsis
后面是多行位子显示不出
盒子相关属性
Border-radius值修改边框角度 Display不：none不占有位子 Visibility:显示元素 Visible：可见
Hidden：隐藏 Overflow 溢出 scroll显示滚动条 Vertical-align:Middle 让文字和图片垂直居中
Opacity：透明度
图片、动画相关属性
Background-size:背景图缩放 Animation-name:动画名称
Animation-duration：
@keyframes：规定动画
Animation：动画属性的简写
Animation-name：规定keyframes动画的名词
Animation-duration：花多长时间
Alternate：逆向播放
Steps：分几步完成动画
Animation-timing-function：steps（n）
默认是ease
移动盒子布局
Transform:translate(50%)指移动相对于自身的50% Rotate（x,y,z）：沿着x/y/z轴旋转 使用的单位是deg
Transition:all 0.3s; 过度 Transform:scale:缩放，优势不会影响其他盒子
Flex
**给父亲设置的******
Display：flex
先确定好主轴
Flex-direction：设置元素排列方式，主轴
Row(x)、column(y)
在设置主轴元素
Justify-content：设置主轴子元素排列方式
Flex-start：默认，从左往右
Flex-end：从右往左，从下往上
Center：居中
Space-around：平分剩余空间
Space-between：先贴边，在平分
Flex布局默认是不换行的，
Flex-wrap：是否换行，wrap换行
Align-items:设置侧轴单行元素排列方式
Flex-start：上到下
Flex-end：下到上
Center：挤在一起居中
Stretch：拉伸，但盒子不要高度
Align-content-设置侧轴多行元素排列方式
默认值Flex-start：上到下
Flex-end：在侧轴尾部开始排列
Content：在侧重中间排列
Space-around：子元素在侧轴平分剩余空间
Space-between：子元素在侧轴先分布两头，在平均分布
Streth：设置子项元素高度平分父元素高度（拉伸）
Flex-flow是Flex-direction、Flex-wrap的简写
给子设置
Flex：1 平分剩余空间的一份
Align-self 可以设置某一个盒子 在主轴上的排列方式
Order：数值越小，排列往前
Flex布局
Overflow-y：auto 设置Y轴的滚动条由内容滚动
