Css-常用css

/*怪异盒子模型*/
.box { box-sizing: border-box; }

/*水平居中的内联块级*/
.inBlock { display: inline-block; vertical-align: middle; }

/*添加在元素上，用于其子元素inline-block时，解决元素间的间距问题*/
.fs0 { font-size: 0; }

/*单行文本超出显示省略号*/
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/*文本强制不换行*/
.nowrap{ white-space:nowrap; }

/*强制英文单词断行*/
.englishBreak{ word-break:break-all; }

/*元素点击active时平移效果*/
.elAct:active { transform: translate(2px, 2px); }

/*强制清除浮动，修复float元素的高度，使其可以自动撑开*/
.clearFloat { clear: both; float: none; padding: 0; margin: 0; width: 100%; height: 0.01px; border: 0.01px soild transparent; overflow: hidden; }

/*三角形*/ .Triangle { width: 0px; border: 100px solid transparent; border-top-color: #00aabb; }
/*右三角形*/ .Triangle { width: 0px; border: 100px solid transparent; border-top-color: #00aabb; border-left: 0; }
/*左三角形*/ .Triangle { width: 0px; border: 100px solid transparent; border-top-color: #00aabb; border-right: 0; }

/*矩形*/ .ract { position: relative; width: 260px; height: 120px; background-color: #0094ff; border-radius: 10px; }
/*三角气泡*/ .TrBubble:after { content: ""; position: absolute; bottom: 0; left: 50%; border: 34px solid transparent; border-top-color: #0094ff; border-bottom: 0; margin: 0 0 -34px -34px; }
/*左三角气泡*/ .LeftBubble:after { content: ""; position: absolute; bottom: 0; left: 50%; border: 34px solid transparent; border-top-color: #0094ff; border-bottom: 0; margin: 0 0 -34px -34px; border-left: 0; }
/*右三角气泡*/ .RightBubble:after { content: ""; position: absolute; bottom: 0; left: 50%; border: 34px solid transparent; border-top-color: #0094ff; border-bottom: 0; margin: 0 0 -34px -34px; border-right: 0; }