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