css常用

/* 解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移 */
.box{
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}
/* 超出部分显示省略号 */
/* 单行 */
.box{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* 多行 */
.box{
	width: 100%;
	overflow: hidden;
	/* 将对象作为弹性伸缩盒子模型显示 */
	display: -webkit-box;
	/* 设置伸缩盒子对象的子元素的排列方式 */
	-webkit-box-orient: vertical;
	/* 限制显示几行 */
	-webkit-line-clamp: 2;
	/* 让浏览器实现在任意位置的换行 */
	word-break: break-all;
}
/* 不换行 */
.box{
	white-space: nowrap;
}
/* 自动换行 */
.box{
	word-wrap: break-word;
	word-break: normal;
}
/* 强制换行 */
.box{
	word-break: break-all;
}
/* 文本两端对齐 */
.box{
	text-align: justify;
	/* ie6-8 */
	text-justify: distribute-all-lines;
	/* 一个块或行的最后一行对齐方式 */
	text-align-last: justify;
	-moz-text-align-last: justify;
	-webkit-text-align-last:justify;
}
/* 文字竖向排版 */
/* 单行展示 */
.box{
	width: 25px;
	line-height: 18px;
	height: auto;
	font-size: 12px;
	padding: 8px 5px;
	/* 英文加入 */
	word-wrap: break-word;
}
/* 多列显示 */
.box{
	height: 210px;
	line-height: 30px;
	text-align: justify;
	/* IE从左到右 */
	writing-mode: tb-lr;
	/* 从左到右 */
	writing-mode: vertical-lr;
}
/* 鼠标事件失效 */
.box{
	pointer-events: none;
	cursor: default;
}
/* 禁止用户选择 */
.box{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select:none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select:none;
}
/* cursor属性 */
.box{
	/* 手指 */
	cursor: pointer;
	/* 箭头加问号 */
	cursor: help;
	/* 转圈圈 */
	cursor: wait;
	/* 移动光标 */
	cursor: move;
	/* 十字光标 */
	cursor: crosshair;
}
/* 使用硬件加速 */
.box{
	text-transform: translatez(0);
}
/* 图片宽度自适应 */
img{
	max-width: 100%;
}
/* Text-transform和Font Variant */
p{
	/* 所有字母变成大写 */
	text-transform: uppercase;
	/* 所有字母变成小写 */
	text-transform: lowercase;
	/* 首字母大写 */
	text-transform: capitalize;
	/* 将字体变成小型的大写字母 */
	font-variant: small-caps;
}
/* 将一个容器设为透明 */
.box{
	filter: alpha(opacity=50);
	-moz-opacity: .5;
	-khtml-opacity:.5;
	opacity: .5;
}
/* .消除transition闪屏 */
.box{
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}
/* 自定义滚动条 */
/* 整个滚动条 */
::-webkit-scrollbar{
	width: 5px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track{
	background-color: #1E83D3;
	border-radius: 5px;
}
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb{
	background-color: #1E83D3;
	border-radius: 5px;
}
/* 让 HTML 识别 string 里的 '\n' 并换行 */
body{
	white-space: pre-line;
}
/* 实现一个三角形 */
.box{
	border-color: transparent transparent #1E83D3 transparent;
	  border-style: solid;
	  border-width: 0px 30px 30px 30px;
	  height: 0;
	  width: 0;
}
/* 移除被点链接的边框 */
a{
	outline: none;
	/* outline: 0; */
}
/* 使用CSS显示链接之后的URL */
a:after{
	content: "("attr(href)")";
}
/* select内容居中显示、下拉内容右对齐 */
select{
	text-align: center;
	text-align-last: center;
}
select option{
	direction: rtl;
}
/* 修改input 输入框中 placeholder 默认字体样式 */
input::-webkit-input-placeholder{
	color: #1E83D3;
}
/* firefox版本4-18 */
input:-moz-placeholder{
	color: #1E83D3;
}
/* firefox版本19+ */
input::-moz-placeholder{
	color: #1E83D3;
}
/* IE浏览器 */
input::-ms-input-placeholder{
	color: #1E83D3;
}
/* 子元素固定宽度 父元素宽度被撑开 */
/* 父元素下的子元素是行内元素 */
.box{
	white-space: nowrap;
}
/* 父元素下的子元素是块级元素 */
.box{
	white-space: nowrap;
	display: inline-block;
}
/* 让div里的图片和文字同时上下居中 */
.box{
	height: 100px;
	line-height: 100px;
}
img{
	vertical-align: middle;
}
/* 实现宽高等比例自适应矩形 
<div class="scale">
	<div class="item">
	 所有子元素容器
	</div>
</div>
*/
.scale{
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	position: relative;
}
.item{
	position: absolute;
	width: 100%;
	height: 100%;
	background: #1E83D3;
}
/* transfrom的rotate属性在span标签下失效 */
span{
	display: inline-block;
}
/* 边框字体同色 */
.box{
	width: 200px;
	height: 200px;
	color: #1E83D3;
	font-size: 30px;
	border: 50px solid currentcolor;
}

(本内容搜集于网略，如有侵权请联系删除)。