/*[margin外边距]
margin属性值最多有四个：
①只写一个值：四个方向的margin均为这个值
②只写两个值：上、右两个方向，下默认=上，左默认=右
③写三个值：上、右、下三个方向，左默认=右
④写四个值：上、右、下、左四个方向
⑤写三个值+auto：控件居右显示
margin:50px 30px 40px auto;距离父容器右侧30px
⑥margin：0 auto;设置控件在父容器中，水平居中
*/
margin:0 auto;
}
/*[border边框]
border有三个属性值：宽度width 样式style 颜色color
原则上三个属性都需要手动指定（color不写时，默认为黑色）*/
/*[padding内边距]
使用方式，同margin①~④
注意：使用padding会将整个控件撑大，使用时需注意控件可视区域的实际大
小。*/
/* [border-radius 圆角]
* 1、可以接受8个属性值： X轴(左上、右上、右下、左下)/Y轴
* 例如：border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
* 2、只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角，默认=
左下角
* 例如：border-radius: 50px 0px ;
* =border-radius: 50px 0px 50px 0px;
* =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
*
* 3、只写一个数，默认8个值均相等。
*/
/* [box-shadow 盒子阴影]
* 1、六个属性值，空格分割：
* x轴阴影距离：(必选) 可正可负，正——右移 负——左移
* y轴阴影距离：(必选) 可正可负，正——下移 负——上移
* 阴影模糊半径：(可选) 只能为正，默认为0。数值越大，阴影越模糊
* 阴影扩展半径：(可选) 可正可负，默认为0。数值增大，阴影扩大。数值减小，
阴影缩小
* 阴影颜色：(可选) 默认为黑色
* 内外阴影：(可选) 可选值：inset(内阴影) 默认为外阴影
*/
box-shadow: 0px 0px 10px 0px blue inset;
/*[相对定位relative]
1、使用position：relative;设置元素为相对定位的元素;
2、定位机制：
①：相对于自己原来文档流中的位置定位，当不指定top等定位值时，不会改变元素位置
②：相对定位元素，仍会占据原有文档流中的位置，而不会释放。
3：使用top、left、bottom、right调整位置。当left和right同时存在，left生效。当top和bottom同时存在，top生效。
*/
/*[绝对定位absolute]
1、使用position：absolute;设置元素为绝对定位元素。
2、定位机制：
①相对于第一个非static的祖先元素（即使用了relative/absolute/fixed定位的祖先元素）进行定位;
②如果所有祖先元素均未定位，则相对于浏览器左上角定位;
③使用absolute的元素，会从文档流中完全删除，原有空间释放不再占有;
[固定定位fixed]
1、position：fixed;是一种特殊的绝对定位，父容器无法使用relative锁住
2、定位机制：永远相对于浏览器进行定位。
[z-index属性]
1、作用：设置定位元素的z轴层叠顺序
2、使用要求：
①必须是定位元素才能使用。relative/absolute/fixed
②使用z-index需要考虑父容器的约束。如果父容器为z-index：auto，则子容器的z-index可以不受父容器的约束;
如果父容器z-index进行了设置，则子容器的层叠将以父容器的z-index为准（在同一父容器的不同子元素，仍可以通过自己
的z-index调整层叠关系）。
3、z-index：auto & z-index：0的异同：
①z-index：auto为默认值，与z-index：0处于同一平面。
②z-index：auto不会约束子元素的z-index层次，而z-index：0会约束子元素必须与父元素处于同一平面
4、z-index相同（处于同一平面的定位元素）的层叠关系：后来者居上
*/
/*绝对定位元素水平居中的方式：
1、left：50%;
2、设置margin-left为-width/2：margin-left：-50px;*/
/*[1、实现块级元素在块级元素中水平垂直居中]
①设置子容器为定位元素：
② left：50% margin-left：-width/2;
top：50% margin-top：-height/2;
*/
/*【2、使用负边距增大元素宽度】
①不指定子容器宽度，指定高度或填充内容;
②margin：0px -50px;可以使左右两边，均超出父容器50px*/
/*第二部分应用，解决div中多个li间距问题*/
* background-origin：设置背景图的定位方式。border-box从边框外缘开始，padding-box从边框内缘，content-box从文字内容区开始
* background-origin不改变背景图显示区域大小，只决定左上角定位位置。
* background-clip：裁切背景图和背景色显示区域。border-box从边框外缘开始显示，padding-box从边框内缘开始显示，content-box从文字内容区开始显示 。不在显示区域内的背景图或背景色，会被裁切不显示
* background-clip不改变定位位置，只是通过裁切显示部分区域。
*/
/*transform定义变换：
常用变换：translate 平移
scale 缩放
rotate 定义旋转
transform可同时进行多种变换，多种变换之间空格分隔;
例如：transform：scale(1.8,3.0) translateY(0px)
transform-origin：定义变形起点。
可选值：left/center/right top/center/bottom
或者，直接写X Y轴坐标点。
例如transform：rotate（180deg）;
transform-origin：right bottom;
表示绕右下角旋转180度
*/
/*transition属性：定义过渡
①参与过渡的属性，可以单独指定某个CSS属性，也可以all/none
②过渡开始到过渡完成的时间， .3s .5s
③过渡的样式函数，常选ease
④过渡开始前的延迟时间，可以省略
* transition属性可以同时定义多个过渡效果，用逗号分隔
* 例如：transition：color .3s ease，border .5s linear*/
/*[CSS3 动画的使用]
1、声明一个动画(关键帧)
@keyframes name{
from{}
to{}
}
阶段写法：
① 每个阶段用百分比表示，从0%到100%
② 起止必须设置即0%和100%或者from和to
2、在CSS选择器中，使用Animation动画属性，调用声明好的关键帧
【Animation:缩写顺序】
Animation-name 动画名称(@keyframes 名称)
Animation-duration 动画持续时间
Animtaion-timing-function动画速度曲线 常选ease
Animtaion-delay 动画延迟时间
Animation-iteration-count 播放次数，默认为1，无限次Infinite
Animation-direction 设置对象动画在循环中是否反向运动 （ Alternate 逆向播放）
* animation-fill-mode 设置对象动画时间之外的状态（forwards： 停留在动画结束状态 backwards:停留在动画开始状态）
>>> 注意animation-name和animation-duration必须设置
>>> animation可以同时设置多个动画 动画之间用,分隔
animation:frame1 .3s,frame2 .5s……
*/