日常開發CSS小技巧整理
1.解決inline-block元素設置overflow:hidden屬性導致相鄰行內元素向下偏移
.wrap {
display: inline-block;
overflow: hidden
vertical-align: bottom
}
2.超出部分顯示省略號
// 單行文本
.wrap {
overflow:hidden;/*超出部分隱藏*/
text-overflow:ellipsis;/*超出部分顯示省略號*/
white-space:nowrap;/*規定段落中的文本不進行換行 */
}
// 多行文本
.wrap {
width: 100%;
overflow: hidden;
display: -webkit-box; /*將對象作爲彈性伸縮盒子模型顯示 *必須結合的屬性**/
-webkit-box-orient: vertical; /*設置伸縮盒對象的子元素的排列方式 *必須結合的屬性**/
-webkit-line-clamp: 3; /*用來限制在一個塊元素中顯示的文本的行數*/
word-break: break-all; /*讓瀏覽器實現在任意位置的換行 *break-all爲允許在單詞內換行**/
}
3.css實現不換行、自動換行、強制換行
//不換行
.wrap {white-space:nowrap;}
//自動換行
.wrap {
word-wrap: break-word;word-break: normal;
}
//強制換行
.wrap {word-break:break-all;}
4.CSS實現文本兩端對齊
.wrap {
text-align: justify; /*使文字換行沒有錯位現象*/
text-justify: distribute-all-lines; /*ie6-8*/
text-align-last: justify; /*一個塊或行的最後一行對齊方式，不滿一行間距會變大填充滿*/
-moz-text-align-last: justify;
-webkit-text-align-last: justify;
}
5.實現文字豎向排版
// 單列展示時
.wrap {
width: 25px;
line-height: 18px;
height: auto;
font-size: 12px;
padding: 8px 5px;
word-wrap: break-word;/*英文的時候需要加上這句，自動換行*/
}
// 多列展示時
.wrap {
height: 210px;
line-height: 30px;
text-align: justify;
writing-mode: vertical-lr; /*從左向右*/
writing-mode: tb-lr; /*IE從左向右*/
//writing-mode: vertical-rl; /*-- 從右向左*/
//writing-mode: tb-rl; /*-- 從右向左*/
}
6.禁止用戶選擇
.wrap {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
7.使用硬件加速
有時候動畫可能會導致用戶的電腦卡頓，你可以在特定元素中使用硬件加速來避免這個問題
transform: translateZ(0)；
translateZ變成3d效果，走GPU渲染；2d是軟件渲染
8.將一個容器設爲透明
.wrap {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
9.消除transition閃屏
.wrap {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
10.自定義滾動條
overflow-y: scroll;
//整個滾動條
::-webkit-scrollbar {
width: 5px;
}
//滾動條的軌道
::-webkit-scrollbar-track {
background-color: #ffa336;
border-radius: 5px;
}
//滾動條的滑塊
::-webkit-scrollbar-thumb {
background-color: #ffc076;
border-radius: 5px;
}
11.讓 HTML 識別 string 裏的 ‘\n’ 並換行
body {
white-space: pre-line;
}
12.實現一個css圖標
//三角形
.wrap {
border-color: transparent transparent green transparent;
border-style: solid;
border-width: 0px 300px 300px 300px;
height: 0px;
width: 0px;
}
//梯形
.wrap {
width: 25px;
height: 25px;
overflow: hidden;
font-size: 0;
line-height: 0;
border-width: 50px;
border-style: solid;
border-color: transparent transparent rgb(46, 205, 245) transparent;
}
//實現箭頭
. arrow {
position: absolute;
}
. arrow:before,. arrow:after{
position: absolute;
content: '';
border-top: 10px transparent solid;
border-left: 10px transparent solid;
border-right: 10px transparent solid;
border-bottom: 10px #fff solid;
}
. arrow:before{
border-bottom: 10px #0099CC solid;
}
. arrow:after{
top: 1px; /*覆蓋並錯開1px*/
border-bottom: 10px #fff solid;
}
13.使用CSS顯示鏈接之後的URL
a:after{content:" (" attr(href) ") ";}
14.修改input輸入框中光標的顏色不改變字體的顏色
input{
color: #fff;
caret-color: red;
}
15.修改input 輸入框中 placeholder 默認字體樣式
//webkit內核的瀏覽器
input::-webkit-input-placeholder {
color: #c2c6ce;
}
//Firefox版本4-18
input:-moz-placeholder {
color: #c2c6ce;
}
//Firefox版本19+
input::-moz-placeholder {
color: #c2c6ce;
}
//IE瀏覽器
input:-ms-input-placeholder {
color: #c2c6ce;
}
16.子元素固定寬度 父元素寬度被撐開
// 父元素下的子元素是行內元素
.wrap {
white-space: nowrap;
}
// 若父元素下的子元素是塊級元素
.wrap {
white-space: nowrap; /* 子元素不被換行*/
display: inline-block;
}
17.實現寬高等比例自適應矩形
<style>
.scale {
width: 100%;
padding-bottom: 56.25%;
height: 0;
position: relative;
}
.item {
position: absolute;
width: 100%;
height: 100%;
background-color: 499e56;
}
</style>
<div class="scale">
<div class="item">
這裏是所有子元素的容器
</div>
</div>
18.transfrom的rotate屬性在span標籤下失效
span {
display: inline-block
}
19.邊框字體同色
.wrap {
width: 200px;
height: 200px;
color: #000;
font-size: 30px;
border: 50px solid currentColor;/*或者 border: 50px solid; // 實現二*/
}
20.讓一個盒子的高度自適應屏幕剩餘的部分
要求：沒有數據的時候能夠充滿屏幕，數據超出屏幕就出現滾動條
HTML結構暫且如下：
<div id="main">
<div id="nav">nav</div>
<div id="content" class="container">content</div>
</div>
<style>
html, body { height: 100%; }
#nav{height:50px;}
</style>
方法一：
#main{height:100vh;}
/*或者 #main{height:100%;} */
.container{
height:calc(100vh-50px); /*或者 height:calc(100%-50px);*/
overflow-y:auto;
}
方法二：
#main{height:100%;}
#nav{position:relative;z-index:1;background:#fff;}
.container{
min-height:100%;
padding-top:50px;
margin-top:-50px;
overflow-y:auto;
box-sizing:border-box;
}
方法三：
#main{
height:100%;
display: flex;
flex-direction: column;
}
.container{
overflow-y:auto;
flex-grow:1;
}
21.Object Fit
指定可替換元素的內容應該如何適應到其使用的高度和寬度確定的框
可以通過使用 object-position 屬性來切換被替換元素的內容對象在元素框內的對齊方式
正式語法
fill | contain | cover | none | scale-down
22.visibility: visible和visibility: hidden
把一個設置爲visibility: visible的元素放在一個設置爲visibility: hidden的元素裏面，會發生什麼？
你可能會認爲兩個元素都不顯示——然而事實上整個父元素都被隱藏了，而子元素不會。
23.粘性定位之 position:sticky
position:sticky是css定位新增屬性；可以說是相對定位relative和固定定位fixed的結合；它主要用在對scroll事件的監聽上；簡單來說，在滑動過程中，某個元素距離其父元素的距離達到sticky粘性定位的要求時(比如top：100px)；position:sticky這時的效果相當於fixed定位，固定到適當位置。
使用：
#sticky-nav {
position: -webkit-sticky;
top: 100px;
}
使用條件：
1、父元素不能overflow:hidden或者overflow:visible屬性。
2、必須指定top、bottom、left、right4個值之一，否則只會處於相對定位
3、父元素的高度不能低於sticky元素的高度
4、sticky元素僅在其父元素內生效
5、如果 position:sticky 元素的任意父節點定位設置爲 position:relative | absolute | fixed，則元素相對父元素進行定位，而不會相對 viewprot 定位。
兼容性：
IOS 和 Firefox 支持 position:sticky 。
而 Chrome53~55 則需要啓用實驗性網絡平臺功能纔行。其中 webkit 內核的要添加上私有前綴 -webkit-。
24.文字修飾
我們可以通過幾行代碼修改文字被選中時的效果：
```css
<style>
/*只有火狐下仍需要前綴*/
::-moz-selection{background:#000;color:#f00;}
::selection{background:#000;color:#f00;}
</style>
```
25.混合模式之mix-blend-mode
屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合
將其分爲幾個大類：
| 分類名稱 | 混合模式名稱 | 描述 |
| 基礎混合模式 | normal | 利用圖層透明度和不透明度來控制與下面的圖層混合 |
| 降暗混合模式 | darken,multiply,color-burn | 減色模式，濾掉圖像中高亮色，從而達到圖像變暗 |
| 加亮混合模式 | screen,lighten,color-dodge | 加色模式，濾掉圖像中暗色，從而達到圖像變亮 |
| 融合混合模式 | overlay,soft-light,hard-light | 用於不同程度的對上、下兩圖層的融合 |
| 變異混合模式 | difference,exclusion,hard-light | 用於製作各種變異的圖層混合 |
| 色彩疊加混合模式 | hue,saturation,color,luminosity | 根據圖層的色相，飽和度等基本屬性，完成圖層融合 |