HTML+CSS学习07-精灵图和字体图标

元素的显示与隐藏

display

display:none; //隐藏对象，不再占有原位置
display:block; //转换元素为块级对象，显示元素

visibility

visibility:visible; //元素可视
visibility:hidden; //元素隐藏，继续占有原位置

overflow

overflow:hidden; //不剪切超出的内容，不显示滚动条
overflow:visible; //不显示超出元素范围的内容，超出内容隐藏
overflow:scroll; //总是显示滚动条
overflow:auto; //超出元素范围自动显示滚动条，不超出不显示滚动条

精灵图（雪碧图）

有效减少服务器接收和请求资源的次数，提高网页加载速度
主要针对背景图
将网页中的一些背景图片整合到一张图片中，通过background-position来移动背景位置定位到需要用到的图片
以盒子的左上角为坐标原点，上边框为x轴，左边框为y轴，
将图片左上角对齐盒子（蓝色）左上角，图片向左/向上移动为负值，将需要的背景图移动到盒子中

div{
	width:60px;
	height:60px;
	background:url(img/p1.png);
	background-position:-100px -30px;
}
//或者
div{
	width:60px;
	height:60px;
	background:url(img/p1.png) no-repeat -100px -30px;
}

字体图标iconfont

展示的是图标，本质是字体
减少了服务器的请求，能很灵活地改变样式，因为本质是字体，几乎所有浏览器都支持

字体图标的下载

icomoon：http://icomoon.io
阿里iconfont：http://www.iconfont.cn/

字体图标的引用

阿里
选择图标添加到购物车，点击购物车，选择下载代码

CSS三角

div{
		width: 0;
		height: 0;
		line-height: 0;
		font-size: 0;
		border: 50px solid transparent;
		border-left-color: red;
	}

应用：对话框样式

.box2{
		width: 50px;
		height: 50px;
		background-color: red;
		position: relative;
	}
.jd{
		position: absolute;
		right: 15px;
		top: -10px;
		width: 0;
		height: 0;
		line-height: 0;
		font-size: 0;
		border: 5px solid transparent;
		border-bottom-color: black;
	}
<div class="box2"><div class="jd"></div></div>

CSS用户界面样式

包括鼠标样式、表单轮廓、防止表单域拖拽

鼠标样式cursor

cursor:default; //默认鼠标箭头
cursor:pointer; //小手
cursor:move; //十字架
cursor:text; //I字型
cursor:not-allowed; //禁止图标

轮廓线outline

去除默认的蓝色边框

input{
	outline:none;
}
//或者
input{
	outline:0;
}

vertical-align垂直对齐

只能用于 行内/行内块元素

vertical-align:baseline; //默认，元素放在父元素基线上
vertical-align:top; //元素对齐行中最高元素的顶端
vertical-align:middle; //元素放在父元素中部
vertical-align:bottom; //元素对齐行中最底元素的顶端

解决图片底部默认有一个空白空隙的问题(因为图片是行内块元素，默认于基线对齐)
1.给图片添加vertical-align: middle | top | bottom 等
2.给图片转换为块级元素：display:block;

溢出文本显示省略号

单行文本溢出

white-space: nowrap; //默认normal自动换行，这里强制一行显示文本
overflow: hidden; //超出部分隐藏显示
text-overflow:ellipsis; //用省略号代替超出部分显示

多行文本溢出

适用于webkit浏览器内核，移动端大部分是webkit内核

overflow: hidden; //超出部分隐藏显示
text-overflow:ellipsis; //用省略号代替超出部分显示
display: -webkit-box; //弹性盒子显示
-webkit-line-clamp:2; //限制文本行数
-webkit-box-orient: vertical; //子元素排列方式

常见布局技巧

margin负值的应用–多盒子排列边框重叠问题

多个盒子排列，相邻盒子的边框会重叠
margin-left: -1px;

行内块的运用–使用a标签制作页码条

<style>
		*{
			margin: 0;
			padding: 0;
		}
			
		.box{
			text-align: center;
		}
			
		.box a{
			display: inline-block;
			width: 36px;
			height: 36px;
			background-color: #fff;
			border: 1px solid #ccc;
			text-align: center;
			line-height: 36px;
			text-decoration: none;
			color: #333;
		}
			
		.box .prev,
		.box .elp{
			width: 70px;
		}
			
		.box .prev,
		.box .current,
		.box .elp{
			background-color: #fff;
			border: none;
		}
</style>
<div class="box">
		<a href="#" class="prev">上一页</a>
		<a href="#" class="current">1</a>
		<a href="#">1</a>
		<a href="#">1</a>
		<a href="#">1</a>
		<a href="#">1</a>
		<a href="#">1</a>
		<a href="#" class="elp">下一页</a>
</div>