CSS使用的一些小技巧/高階進階
摘要：
最近閒暇時間在看鑫爺的《CSS世界》，內容真的是非常精彩，很多細節分析的非常透徹，值得推薦。在日常開發中實現某種效果有很多方式，但是下面的 css code 我以前都很少用到，原來css還可以這麼玩 。。
實現hover改變成另一張圖片效果
/**css**/
img: hover...
最近閒暇時間在看鑫爺的《CSS世界》，內容真的是非常精彩，很多細節分析的非常透徹，值得推薦。在日常開發中實現某種效果有很多方式，但是下面的 css code 我以前都很少用到，原來css還可以這麼玩 。。
實現hover改變成另一張圖片效果
/**css**/
img: hover {
content: url( laugh-tear. png);
}
/**html code**/
< img src=" laugh. png">
複製程式碼
侷限性：content 屬性 改變 的 僅僅是 視覺 呈現， 當 我們 以 右鍵 或 其他 形式 儲存 這張 圖片 的 時候， 所 儲存 的 還是 原來 src 對應 的 圖片。
顯示網站logo
< h1>logo</ h1>
h1 {
content: url( logo. svg);
}
複製程式碼
優點：
1，不會影響網站SEO。 2，使用.svg向量圖為了適應移動 端 retina 螢幕（如果用.svg會模 糊）。
注：千萬不要自以為是地把重要的文字資訊使用content 屬性生成，因為這對可訪問性和SEO都很不友好，content 屬性只能用來生成 一些 無關緊要的內容， 如裝飾性圖形或者序號之類； 同樣，也不要擔心 原本重要的文字資訊會被content替換，替換的僅僅是視覺層。
設定內容無法選中、無法複製
user-select: none 複製程式碼
“三道 槓” 小 圖示 示意
.icon-menu {
display: inline-block;
width: 140px;
height: 10px;
padding: 35px 0;
border-top: 10px solid;
border-bottom: 10px solid;
background-color: currentColor;
background-clip: content-box;
}
複製程式碼
雙層 圓點 圖形 示意
.icon-dot {
display: inline-block;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid;
border-radius: 50%;
background-color: currentColor;
background-clip: content-box;
}
複製程式碼
去掉最右邊的margin-right：20
/**方案一：使用css3 nth-of-type屬性（不考慮相容IE8**/
li: nth-of-type(3n) {
margin-right: 0;
}
複製程式碼
/**方案二：通過給父容器新增margin屬性， 增加容器的可用寬度來實現**/
ul {
margin-right: -20px;
}
ul > li {
float: left;
width: 100px;
margin-right: 20px;
}
複製程式碼
margin：auto的妙用
水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.father {
position: relative;
width: 300px;
height: 150px;
border: red solid 1px;
}
.son {
position: absolute;/**key code here**/
background-color: orange;
width: 100px;
height: 100px;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;/**key code here**/
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
複製程式碼
左／右對齊效果。
...
.father {
width: 300px;
height: 200px;
border: red solid 1px;
}
.son {
width: 100px;
height: 100px;
background-color: orange;
margin-right: 50px; /**左對齊margin-right、margin-left值交換**/
margin-left: auto;/**key code here**/
}
...
複製程式碼
水平居中
...
.father {
width: 300px;
height: 200px;
border: red solid 1px;
}
.son {
width: 100px;
height: 100px;
background-color: orange;
margin-right: auto; /**key code here**/
margin-left: auto;/**key code here**/
}
...
複製程式碼
###垂直居中
...
.father {
width: 300px;
height: 200px;
writing-mode: vertical-lr;/**key code here**/
border: red solid 1px;
}
.son {
width: 100px;
height: 100px;
background-color: orange;
margin: auto;/**key code here**/
}
...
複製程式碼
實現最高渲染效能的去除下邊框css
div {
border: 1px solid;
border-bottom: 0 none;/**key code here**/
}
複製程式碼
優雅的增加icon按鈕點選區域
點選 區域 大小 從 16 × 16 一下子 提升 到 38 × 38，
.icon- clear {
width: 16px;
height: 16px;
border: 11px solid transparent; /**key code here**/
}
複製程式碼
最高效能等邊三角圖形繪製
Line"/>
div {
width: 0;
border: 10px solid;
border-color: #f30 transparent transparent;
}
複製程式碼
最高效能等腰三角圖形繪製
div {
width: 0;
border-width: 20px 10px;
border-style: solid;
border-color: #f30 transparent transparent;
}
複製程式碼
又或者是這種三角形（對話方塊氣泡下的三角形）
div {
width: 0;
border-width: 20px 10px;
border-style: solid;
border-color: #f30 #f30 transparent transparent;
}
複製程式碼
最高效能梯形圖形繪製
div {
width: 10px;
height: 10px;
border: 10px solid;
border-color: #f30 transparent transparent;
}
複製程式碼
逼真 的 3D 效果
div {
width: 10px;
height: 10px;
border: 10px solid;
border-color: #f30 #00f #396 #0f0;
}
複製程式碼
被遺忘的 ex 單位
實現箭頭居中文字垂直方向（不受字型、字號影響）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.icon-arrow {
display: inline-block;
width: 20px;
height: 1ex;
background: url(arrow.svg) no-repeat center/20px 20px;
}
</style>
</head>
<body>
<div style="font-size: 18px">
箭頭居中對齊
<i class="icon-arrow"></i>
</div>
</body>
</html>
複製程式碼
永遠居中的 dialog （可相容到IE7）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.container {
position: fixed;
top:0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
text-align: center;
font-size: 0;
white-space: nowrap;
overflow: auto;
}
.container:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.content {
width: 240px;
height: 120px;
padding: 20px;
}
.dialog {
display: inline-block;
vertical-align: middle;
border-radius: 6px;
background-color: #fff;
font-size: 14px;
white-space: normal;
}
</style>
</head>
<body>
<div class="container">
<div class="dialog">
<div class="content">這dialog永遠居中</div>
</div>
</div>
</body>
</html>
複製程式碼
去除頁面預設滾動條(PC端有效)
/**good code**/
html {
overflow: hidden;
}
/**bad code**/
html, body {
overflow: hidden;
}
複製程式碼
本次寫作到此，歡迎:heart::star:️:clap:指出錯誤或者釋出自己的見解探討，共勉。