一丶box-show盒子阴影
* 共6个属性值，用空格分割
* 1水平阴影距离 可正可负 必选，正数右移 负数左移
* 2垂直阴影距离 可正可负 必选 上 下
* 3阴影模糊半径 正能正 非必选 默认0 数值越大 阴影越模糊
* 4阴影扩展半径 可正可负 非必选 默认0 数值增大 阴影扩大 反之 缩小
* 5阴影颜色 非必选 默认黑
* 6内外阴影 非必选 默认外 inset内阴影
outline 外围线
* 在元素边框以外 不占任何空间 可能会覆盖边框周围的内容
* 写法与border相同
二丶盒子的浮动
规律1
* 标准流模型中的块级盒子，默认宽度100%
* 浮动流的块级盒子，宽度不会自动伸展，而是由内容决定
规律2
* 当一个盒子浮动后 标准流中的其他未浮动盒子将视浮动盒子不存在
* 将占据浮动盒子位置 将盖在浮动盒子上面
* 但是 未浮动盒子中的文字内容 将会受到宽度的影响
* 浮动盒子不能盖住不浮动盒子的文字内容
* 浮动能够打破文档流但不能打破文字流
规律3
* 可以设置clear属性 使标准盒子不受浮动盒子影响
* clear
* 清除其他元素浮动，对自身盒子的影响
* left清除左 right清除右 both左右
规律4
* 如果父盒子没有高度，而父盒子里的所有子盒子全部浮动，将导致
* 父盒子的高度塌陷
* 、
*
* 解决塌陷的问题
* 1添加overflow: hidden;
* 2让父盒子也浮动（父盒子有宽度）
* 3在父盒子最后添加一个空div 高度0 设置clear:both 清除浮动
* 4使用伪对象选择器 生成一个空的元素
三丶
CSS动画的使用
* 1.声明一个动画
* @keyframes name{
from{}
to{}
}
* 阶段的写法
* 直接使用from-to的写法
* 可以设置0%-100%的写法，开头结尾必是0 100
* Animation-name:动画名称
transition
* 过渡属性 共接收四个属性值
* 1参与过渡的CSS样式属性 可以为all none
* 2.过渡的时间 通常.3s .5s
* 3.过渡的样式效果 通常ease
* 4.过渡延迟几秒后开始 可省略
* transition 可以同时接收多个效果 中间用逗号间隔
常用的变换属性
* translate(100px,100px) 平移 Y轴不写默认为0
* transform:scale(1.5); 缩放 致谢一个值表示XY都缩放
* transform:rotate(180deg);旋转 默认Z轴
* transform:skewX(45deg);倾斜多少度
*
* 2.transform 可以接收多个变换函数，中间用空格间隔
* transform-origin: right bottom; 定义变换起点 长与旋转配合
* 可选值 left center right top center bottom 也可指定坐标位置
四 丶响应式布局
在移动开发或者响应式布局必用viewport
使用媒体查询方法
1.直接在CSS中使用：
@media类型（all screen）and 条件1 and条件2{
CSS选择器{
CSS属性
}
}
2.使用link标签链接CSS
使用media属性进行媒体查询
<link rel="stylesheet" type="text/css" href=""/ media="all" and()>
3.使用@import url(".css") all and;导入CSS进行媒体查询
五丶弹性布局
弹性布局
* 1.弹性布局的使用
* 1.给父容器添加display：flex或display: inline-flex;可以设置在当前容器内使用弹性布局排列
* 2.flex表示当前容器为块级 inline-flex行级
* 3.当前容器内一旦使用弹性布局，则子元素的float和clear属性失效 但是position依然可以使用
* 2.作用与容器的属性
* 1.flex-direction设置主轴方向
* row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿
* flex-wrap: wrap;如果一条轴线排不下，如何换行
* wrap：换行，第一行在上方
* nowrap（默认）：不换行
* wrap-reverse：换行，第一行在下方
* 3.flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
* 4.justify-content属性定义了项目在主轴上的对齐方式
* flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
5.align-items属性定义项目在交叉轴上如何对齐。适用于一行 多行断行不适合
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
6.align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
1.flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
2. order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
3.flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小