<div class="parent clearfix"> <div class="left child">left</div> <div class="right child">right</div>.clearfix:after { content: "\00A0"; display: block; clear: both; line-height: 0;}.clearfix { zoom: 1;}2、垂直水平居中
.css { display: flex; align-items: center; justify-content: center;}3、文本末尾省略号
单行截断
.txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}多行截断
.txt { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}display:-webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient;必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow:ellipsis;可选属性，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。
4、文本的模糊效果
.child { color: transparent; text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);}5、动画实现简洁 loading 效果
<div class="loading"> 正在加载 </div>.loading:after { display: inline-block; overflow: hidden; vertical-align: bottom; content: "\2026"; -webkit-animation: ellipsis 2s infinite;}
/* 动画部分 */
@-webkit-keyframes ellipsis { from { width: 2px; } to { width: 15px; }}6、自定义文本选中样式
<div class="element"> 正在加载正在加载正在加载在加载正在加载</div>-- 注意只能修改这两个属性 字体颜色 选中背景颜色-->
.element::selection { color: green; background-color: red;}.element::-moz-selection { color: green; background-color: red;}7、input 修改placeholder默认的样式
input 修改 placeholder默认的样式。
<div class="wrap"> <input type="text" placeholder="我是一个占位符~" /></div>input::-webkit-input-placeholder { color: green; background-color: #f9f7f7; font-size: 14px;}
input::-moz-input-placeholder { color: green; background-color: #f9f7f7; font-size: 14px;}
input::-ms-input-placeholder { color: green; background-color: #f9f7f7; font-size: 14px;}8、移动端可点击元素去除默认边框
在移动端浏览器上，当你点击一个链接或者通过 Javascript 定义的可点击元素的时候，会出现蓝色边框，怎么去掉呢?
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
9、首字下沉
.wrap:first-letter { float: left; color: green; font-size: 30px;}10、css实现三角形
<div style="display: flex;">
<div class="triangle-up">正三角</div>
<div class="triangle-down">倒三角</div>
<div class="triangle-left">左三角</div>
<div class="triangle-right">有三角</div>.triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
.triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }
.triangle-left { width: 0; height: 0; border-bottom: 50px solid transparent; border-right: 100px solid red; border-top: 50px solid transparent;}
.triangle-right { margin-left: 10px; width: 0; height: 0; border-bottom: 50px solid transparent;
border-left: 100px solid red; border-top: 50px solid transparent;}11、屏蔽 Webkit 移动浏览器中元素高亮效果
.css { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -ms-user-select: none; user-select: none;}12、移除浏览器部分元素的默认边框
个别标签去除默认的边框
img,input,button,textarea { border: none; -webkit-appearance: none;}textarea { /*textarea 默认不可以放缩*/ resize: none;}13、取消部分浏览器数字输入控件的操作按钮
input[type="number"] { -moz-appearance: textfield;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none;}14、css换行
/* 强制不换行 */.div { white-space: nowrap;}
/* 自动换行 */.div { word-wrap: break-word; word-break: normal;}
/* 强制英文单词断行 */.div { word-break: break-all;}15、图片上下左右居中
<div> <img src="https://mp.weixin.qq.com/mp/qrcode?scene=10000004&size=102&__biz=MzI2MTMxNzI3OQ==&mid=2247483853&idx=1&sn=2d683d48d247121984a47db5268df05e&send_time=" alt=""></div>div { width: 200px; height: 200px; border: 1px solid #ccc; text-align: center; display: table-cell; vertical-align: middle;}16、标题两边的小横杠
<div class="title">标题div>.title { color: #e1767c; font-size: 30px; text-align: center; position: relative;}
.title:before,.title:after { content: ""; position: absolute; display: block; left: 50%; top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); border-top: 2px solid #e1767c; width: 40px;}
.title:before { margin-left: -60px;}.title:after { margin-left: 60px;}17、文本缩进
.text { text-indent: 20px;}
