利用高效的css提高你的開發效率~(上)

NO IMAGE

利用高效的css提高你的開發效率~(上)

1、清除浮動

利用高效的css提高你的開發效率~(上)

<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、垂直水平居中

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

利用高效的css提高你的開發效率~(上)

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

利用高效的css提高你的開發效率~(上)

6、自定義文本選中樣式

<div class="element">
正在加載正在加載正在加載正在加載正在加載正在加載正在加載正在加載
</div>
<!-- 注意只能修改這兩個屬性 字體顏色 選中背景顏色-->
.element::selection {
color: green;
background-color: red;
}
.element::-moz-selection {
color: green;
background-color: red;
}

利用高效的css提高你的開發效率~(上)

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

利用高效的css提高你的開發效率~(上)

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

利用高效的css提高你的開發效率~(上)

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

利用高效的css提高你的開發效率~(上)

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

利用高效的css提高你的開發效率~(上)

17、文本縮進

.text {
text-indent: 20px;
}

相關文章

redis系列:redis介紹與安裝

java多線程系列:ThreadPoolExecutor源碼分析

java多線程系列:ThreadPoolExecutor

利用高效的css提高你的開發效率~(下)