css随笔

一、position用法及作用

1.语法格式（设置在style样式中）

position:[样式值]；

2.常用属性值的作用

static：默认值；
fixed：使得html元素脱离文档流飘起来，相对于浏览器窗口定位的；
relative：不会使html脱离文档流，相对于原来位置定位；
absolute：脱离文档流，飘起来，相对于第一个position值为非static的父标签进行定位；

3.脱离文档流后具体位置锁定

position: relative; right:10px;bottom: 10px;//表示相对于自身原来的位置距离右边和底边均为10px;

4.图片插入（引入素材）

<img src="../img/1.jpg" style="width: 960px;height: 356px;">

5.cursor属性

cursor:pointer;//鼠标扶上变手指

6.line-height

line-height:[与设置的height相同时，可实现垂直居中];

7.line-height与font的冲突

html中，当有line-height属性时，font属性不能缩写；否则垂直居中会失效
解决方法：

	font：[字体大小值]/[line-height值]；如：font:10px/70px ;

8.margin属性

		<div style=" margin-bottom:150px; background-color: red; width: 300px; height: 100px;"></div>
		<div style="margin-top: 50px; background-color: blue;width: 300px; height: 100px;">
		
		<i style=" margin-right:150px; background-color: red; width: 300px; height: 100px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>
		<i style=" margin-left:150px; background-color: lightblue; width: 300px; height: 100px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>

上下两块级元素之间同时设置间距，会冲突，默认选择较大的那个；
左右两行内元素之间同时设置间距，则会直接叠加；无冲突；