一，CSS盒模型
1，当父盒子包裹子盒子，且上边线重合时，给子盒子添加margin-top时，子盒子与父盒子的上边线并不能分开，,而是导致，两个盒子同时下来,而是导致，两个盒子同时下来
使两条上边线分开的解决办法
1，给父盒子添加一点padding-top：1px； 不推荐使用，会导致父盒子结构多余1px的padding
2,给父盒子添加1px的border-top；会导致1px的多余空间，不推荐使用；
3，给父盒子或子盒子添加浮动； 可能会由于浮动一定程度的影响页面的布局；
4， 给父盒子添加overflow:hidden;属性；推荐使用的方式
2，border-radius 圆角
1，border-radius可以接收8个属性值（空格分开），分别表示 x轴（左上，右上，右下，左下）/Y轴（左上，右上，右下，左下）
2，缩写形式
只写x轴，Y轴默认等于X轴； 四个角写不全，默认对角相等； 只写一个值，默认8个数均等
eg：border-radius:50px 20px ;
=border-radius:50px 20px 50px 20px ;
=border-radius:50px 20px 50px 20px/50px 20px 50px 20px ;
3，当圆角弧度>=正方形边长的一半，将会显示为圆形。
3，border-image 图片边框
1，border-image:共可以放10个属性值：
① 图片路径：url（）
② 图片的切片宽度：4个值；分别代表上下左右四条边；
通过4条切线，可以将图片分为九宫格，九宫格四个角分别对应边框的四个角（不会进行任何拉伸），
九宫格四条边分别对应四条边框（会根据设置进行拉伸/铺完/重复等操作）
注意：写的时候，一定不能带px单位
③ 边框的宽度：4个值：分别代表上下左右四条边的宽度；（值的大小，表示填充图片的大小，包括4个角处图片的大小）
注意：写的时候，必须带px单位。与切片宽度用/分隔！！！
④ 边框的重复方式： stretch-拉伸 round-铺满 repeat-重复
【round和repeat的区别】
round：会对四条边进行适当的拉伸压缩，确保四条边可以重复整数次。
repeat：会保持四条边的宽度长度比例不变，可能导致四角出，无法显示一条完整的边
2，属性值的写法：border-image：① ②/③px ④；
3，border-image在webkit内核的浏览器中，必须带-webkit-前缀
4， box-shadow盒子阴影,
1,6个属性值：空格分离
① X轴阴影距离（必选），可正可负，正--右移；负--左移
② Y轴阴影距离（必选），可正可负，正--下移；负--上移
（阴影相对原对象上下左右移动的距离，这不改变阴影的大小）
③ 阴影模糊半径（可选），只能为正，默认为0，数值越大，阴影越模糊；
（在已有阴影的边缘模糊一段距离）
④ 阴影扩展半径（可选），可正可负，默认为0，数值越大，阴影扩大；数值越小，阴影缩小。
（在已有的阴影上往外扩展距离）
⑤ 阴影颜色（可选），默认黑色。
⑥ 内外阴影（可选），默认为外阴影， inset：内阴影
注意： 没有outset
5，显示三角形
<div style="border: 50px solid rgba(255,0,0,0);width: 0;height: 0;
border-left: 50px solid red;"></div>
6，显示正六边形
<div style="border: 30px solid rgba(255,0,0,0);width: 60px;height: 0;
border-bottom: 50px solid red;"></div>
<div style="border: 30px solid rgba(255,0,0,0);width: 60px;height: 0;
border-top: 50px solid red;"></div>
二， 浮动
1,标准流中的块级盒子，宽度将会自动伸展为100%， 而浮动盒子，宽度不会自动撑开,由文字内容撑开
2,当一个盒子浮动，标准流中未浮动的其他盒子，将视浮动盒子不存在，而占据盒子原来的位置，（浮动盒子，会盖在这个盒子的上方），但是，未浮动盒子中的文字内容，将会受到浮动盒子宽度的印象，（未浮动盒子的内容，不会）
3，由于第二条的原因。
可以给受影响的盒子，添加clear属性，清除浮动盒子对自身的影响
clear可选值： left--清除左浮动影响， right--清除有浮动影响；both--同时清除左右浮动影响
4,父盒子没有指定高度。如果，子盒子没有浮动，则父盒子的高度可以被子盒撑开。 如果，父盒子中的所有子盒子都浮动，则父盒子高度将变为0
5，解决所有子盒子都浮动，父盒子高度都塌陷的问题
1，给父盒子也添加浮动，
2，给父盒子添加overflow：hidden；属性 （推荐使用！！！！）
3，在父盒子最后添加一个高度为0 的空div。给这个div添加clear：both；属性，清除浮动效果
4， ④可以将第三条的div，用为对象选择器：：after实现；
#div::after{
display:block;
content:"";
height:0px;
clear:both;
}
#div::after{
display:block;
content:"";
height:0px;
clear:both;
}
6，盒子模型分类
1，标准盒子（W3C盒子）：我们设置的高宽，仅仅包含content的部分；再添加padding或border，会导致盒子变大
2，IE盒子（怪异盒子）：我们设置的高宽，仅仅包含padding的部分；再添加padding或border，会导致盒子变小
三，定位
一，相对定位 relative（ 原来的位置相对于现在的位置）
1，使用position：relative：设置元素相对定位元素；
2，使用top，left，right，bottom调整元素的位置
当left和right同时存在时，left生效，当top和bottom同时存在时，top生效
3，定位机制：
①相对定位是相对于自己原来的位置定位。当top等属性不指定时，元素位置不发生改变
②相对定位，不会释放掉元素在原有文档流中的位置，不会影响其他文档流元素的位置；
4，关于元素z轴重叠：
①定位元素默认的z轴高于普通的文档流元素
②同为定位元素，“后来者居上”。即后面的盖住前面的
③ 同为定位元素，可以使用z-index手动调节定位元素的上下层z轴顺序；即属性值大的在上面
z-index默认为0（无论是否为定位元素，z-index属性值高者在上即：当定位元素的z-index小于普通文档流时，普通文档流在上），且只能作用于定位元素。
二，绝对定位
1，使用position：absolute：设置元素为绝对定位
2，定位机制
①相对于第一个非static）定位的祖先元素进行定位。 即：相对于使用了relative，absolute，fixed定位的祖先元素进行定位
②如果所有的祖先元素都未定位，则相对于浏览器左上角进行定位
③使用absolute的元素，会从文档流中完全删除。原有空间会被释放 (也有后来者居上)当祖先元素用relative定位时，祖先元素位置移动时，里面的所有元素都等同移动
三，固定定位 fixed
1，使用position：fixed：设置固定定位
固定定位是一种特殊的绝对定位，只是祖先元素无法使用定位锁住
2，定位机制
永远相对于浏览器的左上角进行定位，且不随滚动条的滚动而滚动
四，z-index属性
1，作用：根据z-index属性设置的 数值，决定元素在z轴方向上的层叠顺序
2，使用要求：
①z-index 只能给定位元素调整层叠顺序。 relative，absolute，fixed
② 元素的z-index属性要考虑父容器z-index的约束
》》如果，父容器设置了z-index属性。则子容器的所有元素，将不能脱离父容器的约束。
即，父容器设置了z-index，则子容器只能以父容器的数值为准。 再给与子容器设置z-index，只能调整子容器在父容器层次之内的层叠次序）
》》如果，父容器没有设置z-index，或者设置为z-index：auto；则子容器调整z-inded将不受父容器层次的约束
3，z-index：auto；和z-index：0；的异同
同 ①z-index：auto；是默认值，与z-index：0；处于同一平面；
异 ②z-index：0；会约束子元素必须与父容器在同一平面；
z-index：auto；不会约束子元素的层次。
五，clip属性
1，作用：clip属性用于裁切图片标签，显示图片的指定区域
2，使用要求：clip属性只能作用于有absolution或fixed定位的图片标签上
3，clip属性，只接受一个rect（）函数，函数传入四个值，
上下两个值得距离都是从上边量取，左右两个值都是从左边量取
eg： clip: rect(0px,126px,126px,0px);
六，负边距
1， 水平居中
1,实现块级元素在父容器中水平居中
①设置子容器为定位元素
②left：50%； margin-left：-width/2；
top：50%; margin-top:-height/2;
2，使用负边距增大元素的宽度
①，子容器的宽度不指定；只指定高度或者由内容撑开高度；
②，margin：0px -50px；可以使左右两边，均超出父容器50px
CSS新增属性
一. display属性
可以设置元素以何种状态显示，可选值：
none：隐藏元素；
block：显示为块级元素；
inline：显示为行级元素；
inline-block：显示为内联块级元素本身将是一个行级元素，但是，拥有块级元素的所有属性，比如宽高，margin，padding等。。。
【常见的inline-block级别的标签】
<img/> <input/> <textarea></textarea> <td></td>
二. 隐藏一个元素的方式
1，宽或高设为0px，配合overflow：hidden；属性
2，display：none； 显示display：block：
3，opacity：0；设为全透明。但是元素的空间会占据
4，visibility：hidden；隐藏元素，但是元素所在空间依然会占据。与opacity：0；效果很像
显示隐藏的元素：，visibility：visible
三. CSS3新增的属性前缀
1，-webkit-：chrome/Safari浏览器
2，-moz-：火狐浏览器
3，-ms- ：IE浏览器
4，-o- ： Opra 欧朋浏览器
四. CSS长度单位
1，px 表示长度。长度是固定的，表示占分辨率的几个像素点
2，% 表示相对于默认值的宝粉笔
3,em: 长度与元素的字号挂钩 即，长度为几倍字号
4，rem: 与根元素的字号挂钩。即，与HTML标签的font-size挂钩。
如果，不设置则默认字号为16px。
五. em与rem的区别
1，em是与当前元素自身的font-size挂钩，如果当前元素没有设置，则向上查找最近的祖先元素，知道跟字号。
2，rem与当前元素无关，直接与跟字号挂钩。
六. CSS3背景属性
1，backgroud-clip:设置背景图或背景色的裁切显示区域。（不改变图片的位置，只改变图片的显示区域）
border-box从边框边缘开始显示，
padding-box，从边框内缘开始显示
content-box，从文字内容开始显示
》》如果不在显示区域的背景图或背景色，会被裁切不显示。
2，background-origin: 设置背景图从哪里开始定位。
》》border-box 背景图左上角从边框外援开始
》》padding-box，背景图左上角从内缘开始
》》content-box，背景图左上角从文字内容开始
3，background-origin:不会改变背景图显示区域的大小，只是决定背景图左上角从哪里开始定位。
backgroud-clip:只负责裁切出显示区域，但是并不关心背景图定位在哪里。
4,background-attachment:背景图的附着方式
》》scroll：背景图跟随区域滚动。默认效果。
》》fixed：背景图充满整个区域并且背景图是固定的，不随滚动条滚动
5.background缩写形式
backgroud:background-color background-image background-repeat background-attachment background-position ;
七. transition: all .5s linear;过渡属性接受4个属性值
1，设置哪个CSS属性参与过渡；可以直接指定all/none
2，过渡多少时间完成，通常，.3s .5s
3，过渡的样式效果。通常选ease
4，过渡延时几秒后在开始，可省略
transition:属性可以同时定义多个过渡效果，用逗号隔开
eg：transition:height .5s linear ease,width .5s linear ease;
八. transform:定义变换属性
1，常用的变换属性
》》translate（10px，10px）平移，第二个不写，默认为0，
》》scale（1.1）缩放，第二个不写，默认等于第一个，
》》rotate（90deg）旋转 ，默认绕z轴转，可以使用rotatex（） 绕x轴转等
》》skew（20deg，20deg）扭曲；水平，垂直方向扭曲多少度
2，transform-origin：定义变换起点，常用于旋转变换
可选值：left/center/right bottom/center/top
也可以直接指定x，y轴坐标点，第一个数为x轴
例如： transform：rotate（90deg）；
transform-origin：right bottom；
表示：绕右下角旋转90度
CSS动画的使用
1，声明一个关键帧（动画）
@keyframes name{
from{}
to{}
}
阶段的写法
①，可以直接使用from-to的写法
②，可以设置0%-100%的写法，但开头和结尾必须是0%和100%
2，在CSS选择器中，使用animation调用声明好的动画；
【animation的缩写形式】
Animation-name:动画名称。--就是我们声明的关键帧name
Animation-duration：动画持续时间
Animation-timing-function：动画速度曲线。--常选 ease
Animation-delay：动画开始的时间，延迟时间
Animation-iteration-count：动画播放次数，默认为1.--infinite：无限次播放
Animation-direction：动画在下一个是否逆向播放，默认为normal--表示不进行逆向播放。--alternate--下次逆向播放，即从100%到0%
Animation-fill-mode：表示动画结束后，停留在何种状态，要使用该属性，必须无限次播放。
forwards--结束状态；backwars--初始状态；默认效果
》》animation-name和animation-duration必须设置，其他的选填；
》》animation可以同时设置多个动画，多个动画之间用逗号隔开
animation：framel 1s，frame2 2s.....