398day（overflow，vertical，鼠标样式，轮廓，精灵图）

最新推荐文章于 2025-05-03 14:47:22 发布

原创最新推荐文章于 2025-05-03 14:47:22 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨CSS中的overflow、vertical-align属性应用，介绍如何去除输入框轮廓、调整鼠标样式及使用精灵图优化页面加载，适用于前端开发者提升网页布局与优化技能。

《2018年11月5日》【连续398天】

标题：overflow，vertical，鼠标样式，轮廓，精灵图；

内容：

/*overflow: visible / auto / hidden / scroll */
			/*cursor: pointer/text/move/default;*/

去轮廓：

input,
textarea {
	outline: none;
}

textarea {
			resize: none; /*防止拖拽*/
			outline: none;
		}

/*	vertical-align : top /middle / bottom /baseline;*/
		/*注意基线对齐时的边框问题*/
/*只针对行内元素和行内块元素，尤其是行内块元素，主要用于图片和表单的对齐*/

white-space: nowarp;  /*强制一行显示*/

text-overflow: clip / ellipsis; /*后者是超出文本省略号代替*/

精灵图：

将背景小图集合到大图上，这样浏览器只需请求一次即可；

使用：

缩略图：原图600*669

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		span {
			display: inline-block;
			background: url(images/abcd.jpg) no-repeat;
		}

		.a1 {
			width: 117px;
			height: 121px;
			background-position: -370px -270px;
		}
		
		.a2 {
			width: 126px;
			height: 114px;
			background-position: -124px -413px;
		}

		.a3 {
			width: 115px;
			height: 113px;
			background-position: 0 -9px;
		}
		.a4 {
			width: 125px;
			height: 123px;
			background-position: -247px -270px;
		}

		.a5 {
			width: 112px;
			height: 110px;
			background-position: -96px -141px;
		}

		.a6 {
			width: 115px;
			height: 107px;
			background-position: -474px -9px;
		}
		
	</style>
</head>
<body>
	<span class="a1"></span>
	<span class="a2"></span>
	<span class="a3"></span>
	<span class="a4"></span>
	<span class="a5"></span>
	<span class="a6"></span>
</body>