css

动画的定义 可以使用==@Keyframes来定义动画==，Keyframes表示“关键帧”，在项目上线前，要不上@-webkit-这样的私有前缀 动画的调用 定义动画之后，就可以使用animatio

transition过渡 transition过渡属性是css3浓墨重彩的特性，过渡可以为==一个元素在不同样式之间变化自动添加“补间动画” 兼容性 过渡从IE10开始兼容，移动端兼容良好 曾几何时，

旋转变形 将tranform属性的值设置为rotate(),即可实现旋转变形 transfrom:rotate(45deg) 若角度为正，则顺时针方向旋转，否则逆时针方向旋转。 transform-o

径向渐变 盒子的background-imge属性可以用==radial-gradient()== 形式创建径向渐变背景 background-image:radial-gradient(50% 50

background-position属性 background-position属性可以设置背景图片出现在盒子的什么位置 background-position:100px 200px; 同样可以使

background-attachment属性 决定背景图像的位置是在是口内固定，或者随着包含它的区块滚动。 background-attachment : scroll |fixed | local

盒模型计算 box-sizing属性 将盒子添加了box-sizing:border-box;之后，盒子的width 和 height 数字就表示盒子实际占有的宽高（不含margin)了，即paddi

背景裁切 background-clip属性用来设置元素的背景裁切到哪个盒子，兼容到IE9 background-clip:border-box;-----背景裁切到border区域 backgrou

背景尺寸 background-size属性用来设置背景图片的尺寸，css3新增属性 兼容到IE9； background-size:10px (宽度） 10px (高度）； 参数值也可以是百分数来设

背景颜色 设置元素的背景颜色 ： background-color : 颜色 | transparent transparent是全透明黑色（black) 的速记法，类似 rgba (0,0,0,0这

圆角设置 border-radius属性 border-radius属性的值通常为px单位，表示圆角的半径。 border-radius属性可以单独设置四个圆角 border-radius: 左上 右

border属性 border:1px solid red; 边框的三要素小属性 小属性 意义 border-width 线宽 border-style 线型 border-color 线颜色 四个方

固定定位 固定定位注意事项 固定定位只能以页面为参考点，没有子绝父相的性质 固定定位脱离标准文档流 固定定位小案例

绝对定位 position:absolude; 以坐标系进行描述 left到左边的距离 ；right 到右边的距离 ； top 到上边的距离 ；bottom 到下边的距离 作用：使元素脱离常规流 特点

相对定位： 盒子可以相对自己原来的位置进行位置调整，称为相对定位。 position属性 位置描述词 top 属性 ：向下移动 left 属性： 向右移动 bottom 属性 ：向上移动 right

方法一 使用overflow：hidden;使父盒子形成BFC从而达到清除浮动效果 方法二 给后面的父盒子设置clear:both属性。 clear 表示清除浮动对自己的影响，both 表示左右浮动都

BFC规范 如何创建BFC BFC其他作用 BFC可以取消margin的塌陷 BFC可以阻止元素被浮动的元素覆盖。。。。无现实意义 ，只需记住其能够完场此效果即可 浏览器差异 IE6，7 浏览器使用h

注意事项 垂直显示的盒子，不要设置浮动，只有并排的盒子才要设置浮动。 大盒子带着小盒子跑 构建网页布局时，首先对整个网页进行大块分割，进行浮动设置，，再对分割成的小块进行浮动设置。

浮动的顺序贴靠 子盒子会按照顺序进行贴靠，如果没有足够的空间，则会寻找在前一个兄弟元素。 浮动元素一定能设置宽高浮动元素不再区分块级元素，和行内元素，已经脱离文档流，一律能够设置宽高，即使它是span

继承性 文本相关的属性普遍具有继承性，只需要给先祖标签设置，即可在后代所有标签中生效。 如：color font-开头的 list-开头的 text-开头的 line-开头的 因为文字相关属性有继承性