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; }