CSS——把“可以動的盒子”更優雅地展示：① “偽元素”妙用
摘要：
本文推薦 PC 端閱讀~
本文版權歸 “公眾號 | 前端一萬小時” 所有，未經授權，請勿轉載！
複製程式碼
css_12
複製程式碼
1. 如何使用偽元素來清除浮動？
2. 可以通過哪些方法優化 CSS3 animation 渲染？
複製程式碼...
本文推薦 PC 端閱讀~ 本文版權歸 “公眾號 | 前端一萬小時” 所有，未經授權，請勿轉載！ 複製程式碼
css_12 複製程式碼
1. 如何使用偽元素來清除浮動？ 2. 可以通過哪些方法優化 CSS3 animation 渲染？ 複製程式碼
前言：“偽元素”在我們建立樣式的時候用處很多，它可以大大簡化我們的程式碼量，還可以做一些出乎意料的動作。
1 認識“偽元素”
1.1 偽元素
用於建立一些不在文件樹中的元素，併為其新增樣式。
html
<body> <h6>Hello，Oli的前端一萬小時</h6> <p>Oli的前端一萬小時</p> <input type="text" placeholder="Oli的前端一萬小時"> </body> 複製程式碼
css
h6::first-letter{
font-size: 20px;
}
/*:rocket:如果我們不用偽元素，我們就會在 html 中用更多的程式碼表示--如加 span ，
然後再在 css 中對 span 加樣式。
*/
h6::after{
content: '@2018'
}
/*:rocket:可以很直接的在 h6 後邊新增內容。*/
/*:rocket:但一定要注意，這個 content 裡邊可以是空字串，
但 content 必須要寫，不然這個偽元素就沒有效了。
*/
p::selection{
color: red;
}
input::-webkit-input-placeholder{
color: blue
}
/*:rocket:對於 placeholder ，不同瀏覽器寫法可能是不一樣的，
這裡對於 chrome 瀏覽器我們前邊要加上 -webkit- ,以及 input- 。
*/
複製程式碼
1.2 ::before / ::after
-
element::before在 element 內部建立一個 行內元素 ，作為 element 的第一個孩子； -
element::after在 element 內部建立一個 行內元素 ，作為 element 的最後一個孩子； - 用
::before::after的目的是為了省標籤； - 其中
content是必不可少的。
2 偽元素的用法
2.1 清除浮動
:link:原始碼及效果展示 html
<body> <ul class="navbar clearfix"> <li><a href="#">首頁</a></li> <li><a href="#">文章</a></li> <li><a href="#">作品</a></li> <li><a href="#">關於</a></li> </ul> </body> 複製程式碼
css
li {
list-style: none;
}
.clearfix::after {
content:'';
display: block;
clear: both;
}
.navbar {
background: #000;
}
.navbar>li {
float: left;
margin: 5px 10px;;
}
.navbar a {
color: #fff;
}
複製程式碼
2.2 替代標籤
:trophy:前置知識：注意程式碼中關於 CSS3 屬性 transform 的值 translate rotate 用法講解！
div {
transform: 值
}
複製程式碼
| 常用“值” | 描述 |
|---|---|
| translateX(45px) | 水平向右平移 45px 。 |
| translateY(45px) | 垂直向下平移 45px . |
| rotate(angle) | 定義 2D 旋轉，在引數中規定角度。 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉。 |
| rotateX(angle) | 定義繞著 X 軸的 3D 旋轉。 |
| rotateY(angle) | 定義繞著 Y 軸的 3D 旋轉。 |
| rotateZ(angle) | 定義繞著 Z 軸的 3D 旋轉。 |
（:bulb:圖片：繞 Z 軸的 3D 旋轉：）
2.2.1 空心上三角
:bulb:前置知識：通過 CSS 畫“三角形”—— 《CSS——CSS 給盒子、背景、連結、列表、表單、表格等加樣式》
:link:原始碼及效果展示 :bulb:小技巧：控制檯調節偏移度
html
<div class="bubble">Hello,Oli的前端一萬小時</div> 複製程式碼
css
.bubble {
/*我們先對邊框加樣式*/
position: relative;
/*:rocket::rocket:為下邊的絕對定位增加一個錨點。*/
padding: 10px;
border-radius: 3px;
background: #fff;
border: 1px solid #000;
display: inline-block;
}
.bubble::before {
content:'';
/*這個偽元素選擇器的意思就是：在 bubble 內部建立一個行內元素，
作為 bubble 的第一個孩子。*/
/*其實就是我們要的那個“小三角”。*/
width: 10px;
height: 10px;
border-top: 1px solid #000;
border-left: 1px solid #000;
/*:trophy:我們加了上邊框和左邊框，想象一下，一個塊，加了這兩個邊框然後對其旋轉，
它就會呈現出一個“三角”。*/
background: #fff;
display: inline-block;
transform: rotateZ(45deg);
/*:trophy:這裡使用的是 CSS3 的屬性，讓上邊加了邊框的塊繞 Z 軸去“45°旋轉”。*/
/*:trophy:Z 軸可以這樣理解：
你的顯示器螢幕是一個平面，它由 X 和 Y 軸構成，而你的“視線”與顯示器這個平面之間的直線，則為 Z 軸 。
我們這裡就可以簡單的繞著這個 Z 軸來旋轉！
*/
position: absolute;
top: -6px;
/*設定為絕對定位，使其脫離文件流，然後讓他向上偏移。*/
/*:rocket::rocket:一旦設定了絕對定位，那麼就需要在其父容器上設定一個“錨點”來偏移。*/
/*至於到底偏移多少合適，我們常常採用的方法是：通過檢查元素的方式，
在開發者工具後臺，用滑鼠滾動到最合適的位置。*/
}
複製程式碼
:trophy:舉一反三：
2.2.2 實心上三角
:link:原始碼及效果展示 html
<div class="bubble">Hello,Oli的前端一萬小時</div> 複製程式碼
css
.bubble {
position: relative;
padding: 10px;
border-radius: 3px;
background: #fff;
border: 1px solid #000;
display: inline-block;
}
.bubble::before {
content:'';
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent grey transparent;
position: absolute;
top: -10px;
}
複製程式碼
2.2.3 紅心內右角
:link:原始碼及效果展示 html
<div class="bubble">Hello,Oli的前端一萬小時</div> 複製程式碼
css
.bubble {
position: relative;
padding: 10px;
border-radius: 3px;
background: #fff;
border: 1px solid #000;
display: inline-block;
}
.bubble::before {
content:'';
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 0;
border-color: transparent red transparent transparent;
position: absolute;
right: 0;
top: 0;
}
複製程式碼
2.3 延伸——偽類選擇器的應用
:link:原始碼及效果展示 html
今天的心情: <input type="checkbox"> 複製程式碼
css
input[type=checkbox] {
-webkit-appearance: none;
/*去掉預設樣式--一個框*/
appearance: none;
background: url(https://ws3.sinaimg.cn/large/006tNc79gy1g202mt54g5j30ng0lytjq.jpg) 0 0 no-repeat;
display: inline-block;
width: 50px;
height: 50px;
background-size: contain;
vertical-align: middle;
/*為了使其和前面的文字對齊*/
outline: none;
}
input[type=checkbox]:checked {
/*偽類選擇器：對一個 checkbox 或 radio 勾選上的狀態。*/
/*那當我們用滑鼠去勾選的時候，它就會顯示成以下的樣式。*/
-webkit-appearance: none;
appearance: none;
background: url(https://ws4.sinaimg.cn/large/006tNc79gy1g202mpw81hj30jc0jaqac.jpg) 0 0 no-repeat;
display: inline-block;
width: 50px;
height: 50px;
background-size: contain;
vertical-align: middle;
}
複製程式碼
後記：下一篇我們總結一下實際工作中，讓盒子“居中”擺放都有哪些方法。屬於特別重要的篇幅，隨時都會用到。
加油！