CSS高级技巧

最新推荐文章于 2022-11-04 19:19:26 发布

_wjl_

最新推荐文章于 2022-11-04 19:19:26 发布

阅读量172

点赞数

分类专栏： web前端文章标签：鼠标样式取消轮廓线行内块和文字对齐超出的部分省略号

web前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式，表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。防止表单域拖拽

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本

鼠标放我身上查看效果哦：

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
</ul>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标样式</title>
	<style>
	div {
		width: 100px;
		height: 100px;
		background-color:  purple;
		cursor: default;/*小白  默认*/
	}
	.pointer {
		cursor: pointer;
		background-color: skyblue;
	}
	.move {
		cursor: move;
		background-color: green;
	}
	.text {
		cursor: text;
		background-color: orange;
	}
	</style>
</head>
<body>
	<div>鼠标经过div 会变换样式 小白</div>
	<div class="pointer">鼠标经过div 会变换样式 小手</div>
	<div class="move">鼠标经过div 会变换样式 移动</div>
	<div class="text">鼠标经过div 会变换样式 文本</div>
</body>
</html>

尽量不要用hand 因为火狐不支持 pointer ie6以上都支持的尽量用

轮廓 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作

 outline : outline-color ||outline-style || outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是： outline: 0;

 <input  type="text"  style="outline: 0;"/>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单轮廓线</title>
	<style>
	input {
		outline: 1px solid red; 
		/* outline: 0 ; 一般设置为0或none 取消轮廓线 */
		border: 1x solid blue;
	};
	</style>
</head>
<body>
	<input type="text">
</body>
</html>

在这里插入图片描述

防止拖拽文本域resize

resize：none 这个单词可以防止火狐谷歌等浏览器随意的拖动文本域。

右下角可以拖拽：

右下角不可以拖拽：

<textarea  style="resize: none;"></textarea>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>防止拖曳文本域</title>
	<style>
	textarea {
		resize: none;
	}
	</style>
</head>
<body>
	<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>防止拖曳文本域</title>
	<style>
	textarea {
		resize: none; /*  防止拖曳 */
		outline: none; /* 取消轮廓线 */
		width: 200px;
		height: 120px;
		border: 1px solid gray;
	}
	</style>
</head>
<body>
	<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

在这里插入图片描述

vertical-align 垂直对齐

以前我们讲过让带有宽度的块级元素居中对齐，是margin: 0 auto;

以前我们还讲过让文字居中对齐，是 text-align: center;

但是我们从来没有讲过有垂直居中的属性，我们的妈妈一直很担心我们的垂直居中怎么做。

vertical-align 垂直对齐，这个看上去很美好的一个属性，实际有着不可捉摸的脾气，否则我们也不会这么晚来讲解。

vertical-align : baseline |top |middle |bottom

设置或检索对象内容的垂直对其方式。
在这里插入图片描述

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，
特别是行内块元素， 通常用来控制图片和表单等。

图片、表单和文字对齐

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片与文字对齐</title>
	<style>
	div {
		width: 200px;
		height: 100px;
		background-color: pink;
		margin-left: auto;
		margin-right: auto;  /* 左右自动 盒子居中对齐 */
		text-align: center; /*  文字水平居中 */
		/*vertical-align: center;  对于块级元素无效 */
	}
	img {  /* 行内块 */
		/* vertical-align: baseline; 默认的基线对齐 */
		vertical-align: middle; /* 中线对齐  top 顶线对齐*/
	}
	textarea {
		height: 300px;
		width: 500px;
		vertical-align: top;  /* 顶部对齐 */
	}
	</style>
</head>
<body>
	<div>文字居中</div>
	<hr>
	<!-- 图片和文字默认的是基线对齐 我们想要的是 中线对齐 -->
	<img src="../images/3.jpg" alt="">
	萌萌的
    <hr>
    用户留言：
    <textarea name="" id="" cols="30" rows="10"></textarea>

</body>
</html>

在这里插入图片描述

去除图片底侧空白缝隙

有个很重要特性你要记住：如果一个元素没有基线，比如图片或者表单等行内块元素，则他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。
解决的方法就是：

给img vertical-align:middle | top等等。让图片不要和基线对齐。
给img 添加 display：block; 转换为块级元素就不会存在问题了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>解决图片底部有缝隙的问题(2种)</title>
	<style>
	div {
		width: 222px;
		height: 220px;
		background-color: gray;
	}
	img {
		/*display: block; 1. 转换为块级元素 */
		vertical-align: middle; /*  2. 设为middle | top */
	}
	</style>
</head>
<body>
	<div>
	    <img src="../images/3.jpg" alt="">
	</div>
</body>
</html>

溢出的文字隐藏

word-break:自动换行

normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行。

keep-all 只能在半角空格或连字符处换行。

主要处理英文单词
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>word-break:自动换行</title>
	<style>
	div {
		width: 120px;
		height: 20px;
		border: 1px solid #f00;
		/* word-break: break-all; 允许单词拆开显示 */
		word-break: keep-all;  /* 不允许拆开显示  连字符特殊 */
	}
	</style>
</head>
<body>
	<div>
	my name is Andy.
	</div>
</body>
</html>

white-space

white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

normal : 　默认处理方式
nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

可以处理中文

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>white-space</title>
	<style>
	div {
		width: 120px;
		height: 20px;
		border: 1px solid #f00;
		/* white-space: normal; */
		white-space: nowrap;
	}
	</style>
</head>
<body>
	<div>
	我的名字是安迪，永远的...
	</div>
</body>
</html>

在这里插入图片描述

text-overflow 文字溢出

text-overflow : clip | ellipsis
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
clip : 　不显示省略标记（…），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（…）
注意一定要首先强制一行内显示，再次和overflow属性搭配使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>text-overflow 文字溢出</title>
	<style>
	div {
		width: 120px;
		height: 20px;
		border: 1px solid #f00;
		white-space: nowrap; /* 首先添加 强制一行显示 */
		overflow: hidden; /* 其次必须有这句话 */
		/* text-overflow: chip;  直接裁剪*/ 
		text-overflow: ellipsis; /* 超出的部分用省略号代替 */
	}
	</style>
</head>
<body>
    <div>
	我的名字是安迪，永远的...
	</div>	
</body>
</html>