- 清除浮動(dòng)
<div class="parent clearfix">
<div class="left child">left</div>
<div class="right child">right</div>
</div>
.clearfix:after {
content: "\00A0";
display: block;
clear: both;
line-height: 0;
}
.clearfix {
zoom: 1;
}
2.垂直水平居中
// flex布局
.css {
display: flex;
align-items: center;
justify-content: center;
}
//position
<div class="center">test</div>
/* 元素已知寬和高css */
.center {
background: red;
width: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/* or */
.center {
background: red;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
/* 元素寬高未知css */
.center {
color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
3.文本末尾省略號(hào)
.txt {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
多行截?cái)?/p>
.txt {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
display:-webkit-box;必須結(jié)合的屬性友鼻，將對(duì)象作為彈性伸縮盒子模型顯示逸尖。
-webkit-box-orient;必須結(jié)合的屬性，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式素标。
text-overflow:ellipsis;可選屬性称诗，可以用來(lái)多行文本的情況下，用省略號(hào)“…”隱藏超出范圍的文本头遭。
4寓免、文本的模糊效果
.child {
color: transparent;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
5、動(dòng)畫實(shí)現(xiàn)簡(jiǎn)潔 loading 效果
<div class="loading">
正在加載
</div>
.loading:after {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
content: "\2026";
-webkit-animation: ellipsis 2s infinite;
}
/* 動(dòng)畫部分 */
@-webkit-keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}
6计维、自定義文本選中樣式
<div class="element">
正在加載正在加載正在加載正在加載正在加載正在加載正在加載正在加載
</div>
<!-- 注意只能修改這兩個(gè)屬性 字體顏色 選中背景顏色-->
.element::selection {
color: green;
background-color: red;
}
.element::-moz-selection {
color: green;
background-color: red;
}
7袜香、input 修改placeholder默認(rèn)的樣式
input 修改 placeholder默認(rèn)的樣式
<div class="wrap">
<input type="text" placeholder="我是一個(gè)占位符~">
</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、移動(dòng)端可點(diǎn)擊元素去除默認(rèn)邊框
在移動(dòng)端瀏覽器上鲫惶，當(dāng)你點(diǎn)擊一個(gè)鏈接或者通過(guò) Javascript 定義的可點(diǎn)擊元素的時(shí)候蜈首，會(huì)出現(xiàn)藍(lán)色邊框，怎么去掉呢?
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
9欠母、首字下沉
.wrap:first-letter {
float: left;
color: green;
font-size: 30px;
}
10欢策、css實(shí)現(xiàn)三角形
<div style="display: flex;">
<div class="triangle-up">正三角</div>
<div class="triangle-down">倒三角</div>
<div class="triangle-left">左三角</div>
<div class="triangle-right">有三角</div>
</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 移動(dòng)瀏覽器中元素高亮效果
.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赏淌、移除瀏覽器部分元素的默認(rèn)邊框
個(gè)別標(biāo)簽去除默認(rèn)的邊框
img,
input,
button,
textarea {
border: none;
-webkit-appearance: none;
}
textarea {
/*textarea 默認(rèn)不可以放縮*/
resize: none;
}
13踩寇、取消部分瀏覽器數(shù)字輸入控件的操作按鈕
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換行
/* 強(qiáng)制不換行 */
.div {
white-space: nowrap;
}
/* 自動(dòng)換行 */
.div {
word-wrap: break-word;
word-break: normal;
}
/* 強(qiáng)制英文單詞斷行 */
.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俺孙、標(biāo)題兩邊的小橫杠
<div class="title">標(biāo)題</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、文本縮進(jìn)
.text {
text-indent: 20px;
}
源自：https://juejin.im/post/5eba4199e51d454db20f4303
聲明：文章著作權(quán)歸作者所有缩擂，如有侵權(quán)鼠冕，請(qǐng)聯(lián)系刪除添寺。