定位
position: static //静态定位
position: relative //相对定位
top:25px; left:30px; //相对于原本在文档流中的位置的偏移，原来占据的空间没有动，其他元素也没有动
position: absolute //绝对定位
top:25px; left:30px; //脱离文档流，相对于顶级元素body重新定位，原来占据的控件被回收
position: fixed //固定定位
top:25px; left:30px; //完全移出文档流， 类似绝对定位
页面滚动时，固定定位不随页面滚动而移动（其定位上下文是视口）
绝对定位随页面滚动而移动（其定位上下文是body）
定位上下文
<div id='outer'>
<div id='inner'>this is text</p>
</div>
div#outer {position: relative; 250px; margin: 50px 40px; border-top: 3px solid red;}
div#inner {position: absolute; top: 10px; left: 20px; background: #ccc;}
父元素设定relative，子元素设定absolute，形成定位上下文
内部div跟着外部div移动而移动
内部div的top和left属性的设定是相对于外部div定位
显示属性
p {display: inline;} //块级元素变成内联元素
a {display: block;} //内联元素变成块级元素
p {display: none;} //元素及其后代元素都不在页面中显示，原先占据的空间被回收
p {visibility: hidden;} //元素由visible变为隐藏，原先占据的空间仍然存在
css背景属性
background-color
background-image: url()
background-repeat: repeat/no-repeat/repeat-x/repeat-y/round/space
background-position: center center //5个关键字（left top right bottom center）
background-position: 50% 50% //百分比
//背景尺寸
background-size: 50% //缩放图片，使其填充背景区的一半
background-size: 100px 50px //把图片调整到100px宽，50px高
background-size: cover //拉大图片，完全填满背景区；保持宽高比
background-size: contain //缩放图片，恰好适合背景区；保持宽高比
//背景粘附
background-attachment: scroll(默认) //背景图片随元素滚动而移动
background-attachment: fixed //背景图片不随元素滚动而移动
背景渐变
linear-gradient(线性渐变)-从一端延伸到另一端
radial-gradient(放射渐变)-从一点向四周发散
注意厂商前缀
background: linear-gradient(color1, color2) //默认从上到下，即0%-100%
background: linear-gradient(color1, color2, color3) //0%-50%-100%
background: linear-gradient(left, color1, color2) //从左到右
background: linear-gradient(-45deg, color1, color2) //左上到右下
background: radial-gradient(color1, color2, color3)
//默认渐变形状
background: radial-gradient(circle, color1, color2, color3)
//圆形渐变
background: radial-gradient(50px 30px, circle, color1, color2, color3)
//设置渐变圆心位置
渐变点
background: linear-gradient(color1, color2 50%, color3)
//50%处有一个渐变点
background: linear-gradient(color1 20%, color2 50%, color3 80%)
//20%、80%处有两个渐变点
background: linear-gradient(color1, color2 25%, color3 50%, color4 75%, color)
//25%、50%、75%处有三个渐变点
background: linear-gradient(color1, color2 25%, color3 25%, color3 75%, color2 75%, color1)
//为同一渐变点设定两种颜色，能实现突变的效果
厂商前缀（VSP）
-moz-transform: skewX(-45deg) //firefox
-webkit-transform: skewX(-45deg) //chrome,safari
-ms-transform: skewX(-45deg) //IE
-o-transform: skewX(-45deg) //opera
transform: skewX(-45deg) //w3c标准属性
//必须加VSP的：
border-image, linear-gradient, radial-gradient, transform-origin, background-image
translate, transition, transform, background(针对背景图片和渐变)