HTML5开发系列（9）之 CSS高级技巧

1.鼠标样式属性：

1.1 cursor：default 默认的鼠标样式

1.2 cursor:pointer 小手的样子

1.3 cursor：text 勾选文本的样式；

1.4 cursor：move 拖动的样式；

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul li:nth-child(1){
				cursor: default;
			}
			ul li:nth-child(2){
				cursor: pointer;
			}
			ul li:nth-child(3){
				cursor: text;
			}
			ul li:nth-child(4){
				cursor: move;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>默认</li>
			<li>小手</li>
			<li>文本</li>
			<li>拖动</li>
		</ul>
	</body>

2.轮廓 outline

比如input默认有一脸色的轮廓线；

和border（边框）很像；

一般情况下都是去掉这种样式的；

			input{
				outline: 0;/*去除轮廓线*/
			}

3.文本区域 textarea

默认是可以拖动改变文本域大小的，在实际开发中是去掉这个属性的；

resize:none;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		
			textarea{
				resize:none
			}
		</style>
	</head>
	<body>
		
		<textarea name="" rows="30" cols="10"></textarea>
	</body>
</html>

扫描二维码关注公众号，回复： 3370792 查看本文章

4.垂直对齐

vertical-align ：垂直对齐属性，但是对于块元素是无效的；

有baseline 、top、 middle、bottom 四种对齐方式；

只有对行内元素和行内块才有效，必须保证在一行显示的才行；

控制文字和图片垂直关系；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		
			img{
				vertical-align: middle;
			}
			textarea{
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<img src="img/dongman.gif"  />一个gif图片
		<hr />
		<textarea name="" rows="30" cols="10"></textarea>文本输入区域
	</body>
</html>

5.空白缝隙问题：

图片和表单等行内块元素的底线会和父盒子的基线对齐；所以在有些浏览器上回有缝隙；

解决方法：

1.可以显示转换成块元素；

2.默认是vertical-align:baseline；但是这种有缝隙，所以该成top midden bottm都可以解决缝隙问题；

6.文字溢出的处理方案：

6.1 自动换行

work-break：break-all 允许才分单词进行换行；

keep-all 必须是带有连字符才能换行；

6.2 一行显示

while-space：nomal 默认是这样；

while-space：nowrap 强制一行显示；

6.3 省略显示

1.首先要一行显示；强制的 while-space：nowrap；

2.隐藏超出的部分 overflow: hidden;

3.设置省略号 text-overflow: ellipsis;