css技巧

精灵图

三角效果：

.box1{
	width: 0;
	height: 0;
	border: 100px solid transparent;
	border-bottom-color: pink;
	//照顾兼容性
	line-height: 0;
	font-size: 0;
}

//取消表单轮廓,q
input{
   outline: none;
}
//防止拖拽文本框
textarea{
   resize: none;
}

vertical-align属性应用：

图片底部默认空白间隙问题

bug:图片底侧会有一个空白间隙，原因是行内块元素会和文字的基线对齐。

<div class="box2">
	<img src="" >
</div>
.box2{
	border: 1px solid red;
}

解决办法：

1、给图片添加vertical-align:middle | top | bottom等。（提倡使用的)

2、给图片添加display:block—因为只有行内块或行内元素才有vertical属性

溢出文字省略号显示

单行(英文字母和数字不会换行)

<div class="box3">
	灌大大大大大大到达
</div>
.box3{
	width: 100px;
	height: 100px;
	background-color: palegreen;
	//强制一行显示
	white-space: nowrap;
	//溢出隐藏
	overflow: hidden;
	//溢出部分用省略号显示
	text-overflow: ellipsis;
}