一、css简介
1.css的简称层叠样式表，当前使用的版本时css3.0
2.语法：
selection{
attribute：value；
}
3.引用方式
行内样式：在标签内写样式
内部式：在head标签中采用style标签包裹书写样式
外联式：css样式写在css文件中，在html页面采用link标签引用
二、选择器 selection
1.通配符：*
2.id选择器
3.标签选择器
4.类选择器
5.属性选择器：标签[属性]/标签[属相=属性值]
6.伪类选择器
常规伪类：标签后跟两个冒号(e::after/before/hover)
结构伪类：e:nth-child
ui状态伪类：选中-checked/可用的- enabled/不可用的-disabled
否定伪类：e:not(f)
目标伪类：e:target 当元素e是目标时，实现样式，配合a标签使用
三、盒子模型
1.什么时盒子模型?
一种思维模式，用于布局的
2.组成
尺寸、边框、内外边距
尺寸：width/height
边框：border
内边距：padding
外边距:margin
注意：
1.padding会撑大盒子
2.关于margin的bug问题处理
1.粘连问题
现象：子元素用设置上边距，无法成功。
用内上边距实现
给父元素设置上边框
给父元素设置overflow:hidden
2.塌陷问题
现象：2个元素在垂直方向上一个设施下边距，一个设置上边距导致塌陷
在一个兄弟元素上添加足够多的距离
3.模式
1.在默认情况下有文档声明的就是标准盒子模型，没有在低版本就是怪异盒子模型；
2.转换：
box-sizing:content-box:标准/border-box：怪异
3.区别：
元素实际占据的位置宽高计算的方式不同
标准的是计算的尺寸+边框+内外边距
怪异的是计算的尺寸+外边距
4.弹性盒子flex
1.定义：一种新的布局方式，让元素有能力控制子元素的排列方式；
2.语法
display:flex/inline-flex
3.容器上的属性
1.主轴上排列上的方式
flex-direction:row/colunm/row-reverse/colunm-reverse
2.主轴上的排列方式
justify-content
flex-start:在开始位置，默认
center：在中间位置
flex-end：在结束位置
space-between：两者之间
space-evenly：均分间隔
space-around：间隔在周围
3.是否换行：flex-wrap
nowrap：不换行
wrap：换行
wrap-reverse:方向换行
4.复合属性(主轴方向、换行)：flex-flow
flex-direction的值
flex-wrap的值
5.设置项目在侧轴上的排列方式
align-items:
flex-start：在开始位置，默认
center：在中间位置
flex-end：在结束位置
flex-basiline:基于基准线
6.多根轴线时
align-content：
stretch：拉伸铺满
flex-start:在开始位置，默认
center：在中间位置
flex-end：在结束位置
space-between：两者之间
space-evenly：均分间隔
space-around：间隔在周围
4.项目上的属性
1.设置项目是否缩小
flex-shrink
2.设置是否项目放大
flex-grow
3.设置项目单独对齐方式
align-self
4.复合属性
flex:1; ----1 1 auto
5.设置项目的排序
order
四、浮动
1.定义
用于实现一行多列或者图文环绕的效果
2.语法
float:left/right
五、CSS核心样式属性
1.文本属性
文字颜色：color
文字大小：font-size
字体类型：font-family
文字粗细：font-weight：加粗(700/blod) 正常（400/normal）
文字样式：font-style:倾斜（italic/oblique) 正常（normal）
文本修饰线：text-decoration:none/下划线（underline）/删除线（line-through)
行高：line-height
文本对齐：text-align(letg/right/center/justify)
文本缩进：text-indent
2.列表相关
list-style:none 去掉列表样式
3.背景相关的属性
background-color:颜色
background-image:url(路径) 背景图
background-repeat:no-repeat 平铺背景
background-position:定位
background-attachment:fixed 固定背景
4.文字阴影
text-shadow：x轴方向偏移 y轴方向偏移 模糊程度 阴影颜色
5.盒子阴影
box-shadow：x轴方向偏移 y轴方向偏移 模糊程度 阴影颜色 inset（内阴影，不设置外阴影）
6.圆角半径
border-radius
7.背景大小
background-size
8.自定义字体
@font-face{
font-family:'自定义字体名称'；
src：url（路径）；
}
六、文本溢出
单行文本溢出显示省略号
1.设置宽度width
2.强制不换行white-space:nowrap
3.超出隐藏overflow：hidden
4.溢出文本显示省略号text-overflow:ellipsis
多行文本需要JS来实现
七、元素类型
元素分类
块级元素：独占一行，是一个完整的盒子，可以设置宽高；
行级元素：有多宽就占据多宽，不是一个完整的盒子，不可以设置宽高；
行块元素：有多宽就占据多宽，是一个完整的盒子，可以设置宽高。
元素嵌套规则
块级元素里面可以有任何元素，行级元素只能有行级元素；
a标签里面可以有块级元素；
ul/ol里面只能有li，li的外面只能有ul/ol；
p标签里面只能有行级元素。
元素类型转换
display:inline/block/inline-block:行级元素/块级元素/行块元素
八、定位-position
什么是定位？
将元素放到指定位置。
属性
static：默认定位，没有定位方式，按照原来的方式排列。
fixed：固定定位，基于浏览器当前屏进行定位；
absolute：绝对定位，基于最近被设置非静态定位的上级元素定位，如果都没有，就基于浏览器第一屏进行定位，会随内容滚动而滚动。
relative：相对定位，基于元素本身所在的位置，会占据原来的位置；
stickg：粘性定位。
Z轴上的堆叠层次
z-index：相对值，数字；元素默认为0，越大越靠上，可正可负，该元素要生效必须设置非静态定位。
九、透明
opcity:0-1;占据原来的位置，可以点击和触摸
兼容写法
低版本的浏览器需要写上filter：alpha（opcity：0-100）
其他几种显示与隐藏的方法：
颜色：rgba方式，用于颜色的透明度，
visibility：hidden/visible：占据原来的位置，不可以触摸和点击
display:none/block；不占据原来的位置；
十、BFC
什么是BFC？
是一个独立的区域，区域与区域之间不会互相影响。
触发/创建BFC的方式有那些？
1.浮动
2.使用定位：absolute、fixed
3.overflow的属性值不为默认值的；
4.display的属性值为：inline-block，flex,inline-flex
解决问题：
margin的粘连问题和塌陷问题
清除浮动
两列自适应布局/品字形布局
十一、兼容问题
同一个页面在不同的浏览器或版本中显示的效果不一样；解决方式：css3-浏览器私有前缀
常见的浏览器
十二、渐变、过渡、动画、2/3D转换
1.渐变
线性渐变
普通线性渐变：
background：linear-gradient（color1，color2）
渐变方向：
background:linear-gradient(to direction，color1，color2)
对角渐变：
background:linear-gradient(to direction1 direction2，color1，color2)
角度渐变：
background:linear-gradient(*deg,color1，color2)
比例渐变：
background:linear-gradient(color1 *%,color2 *%)
径向渐变
普通渐变：
background：radial-gradient(color1,color2)
比例渐变：
background：radial-gradient(color1 *%,color2 *%)
形状渐变：
background：radial-gradient(circle/ellipse,color1,color2) // 圆/椭圆
重复渐变：
线性重复
background：repeating-liner-gradient(color1 *%,color2 *%);
径向重复
background：repeating-radial-gradient(color1 *%,color2 *%)
2.过渡
让变化慢慢进行，必须是可以变化的数值的东西；
transition：变化的属性 变化的时间 延迟时间 变化的曲线（一般采用匀速变化linear）
注意：它是需要:hover/:active来进行触发
3.动画
首先要定义动画，在需要执行的选择器内使用执行动画操作
定义动画-关键帧
@keyframes 动画名 {
0%{
开始的样式
}
*%{
中间状态的样式；
}
100%{
结束状态的样式
}
}
执行动画
animation：动画名 动画执行的时间 延迟时间 执行次数 执行方向 变化曲线
执行次数：数字/infinite(无穷)
执行方向：alternate（交叉）
变化曲线：linear（线性）
动画执行状态
animation-play-state:
running:执行
paused：暂停
4.2D/3D转换
对元素进行移动，缩放、转动、拉伸等效果（改变元素形状、大小、位置的效果）
2D转换
移动：transform:translate(*px,*px):在X轴方向平移 在Y轴方向平移，
旋转：transform：rotateX/rotateY(*deg):在X轴方向旋转，在Y轴方向旋转
缩放：transform:scale(X,Y),默认为1，可以取负值，取负值时，会先旋转180°，再缩放；
倾斜：skew:(*deg)
3D转换：
特点：近大原小，物体后面遮挡不可见（伪3D）
移动：transform：translate(*px,*px,*px) :X,Y,Z方向平移
旋转：transform：rotateX/rotateY/rotateZ(*deg):在X轴方向旋转，在Y轴方向旋转,在Z轴方向旋转
透视：perspective：*px 在Z轴方向的视距
转换基点：改变元素转换前的参照点，默认时center
transform-origin：X{left/right}/Y{top/bottom}
3D呈现：用于实现子元素是否开启3D效果
transform-style:flat(默认)/prserve-3d(开启)
\
