css设计指南-笔记5

定位

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; width: 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(针对背景图片和渐变)