css_12 | CSS——把「能夠動的盒子」更優雅地展現：① 「僞元素」妙用

時間 2019-11-06

標籤 css 能夠盒子優雅展現元素妙用欄目 CSS 简体版

原文原文鏈接

本文推薦 PC 端閱讀~

本文版權歸 「公衆號 | 前端一萬小時」 全部，未經受權，請勿轉載！
複製代碼

css_12
複製代碼

1. 如何使用僞元素來清除浮動？
2. 能夠經過哪些方法優化 CSS3 animation 渲染？
複製代碼

前言： 「僞元素」在咱們建立樣式的時候用處不少，它能夠大大簡化咱們的代碼量，還能夠作一些出乎意料的動做。css

1 認識「僞元素」

1.1 僞元素

用於建立一些不在文檔樹中的元素，併爲其添加樣式。
🔗源碼及效果展現
htmlhtml

<body>
  <h6>Hello，Oli的前端一萬小時</h6>
  <p>Oli的前端一萬小時</p>
  <input type="text" placeholder="Oli的前端一萬小時">
</body>
複製代碼

css前端

h6::first-letter{
  font-size: 20px;
}    
/*🚀若是咱們不用僞元素，咱們就會在 html 中用更多的代碼表示--如加 span ， 而後再在 css 中對 span 加樣式。 */ 


h6::after{
  content: '@2018'
}
/*🚀能夠很直接的在 h6 後邊添加內容。*/
/*🚀但必定要注意，這個 content 裏邊能夠是空字符串， 但 content 必需要寫，否則這個僞元素就沒有效了。 */


p::selection{
  color: red;
}

input::-webkit-input-placeholder{
  color: blue
}
/*🚀對於 placeholder ，不一樣瀏覽器寫法多是不同的， 這裏對於 chrome 瀏覽器咱們前邊要加上 -webkit- ,以及 input- 。 */
複製代碼

1.2 ::before / ::after

element::before 在 element 內部建立一個**行內元素，**做爲 element 的第一個孩子；
element::after 在 element 內部建立一個行內元素，做爲 element 的最後一個孩子；
用 ::before ::after 的目的是爲了省標籤；
其中 content 是必不可少的。

2 僞元素的用法

2.1 清除浮動

🔗源碼及效果展現
htmlgit

<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>
複製代碼

cssgithub

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 替代標籤

🏆前置知識：注意代碼中關於 CSS3 屬性 transform 的值 translate rotate 用法講解！web

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 旋轉。

（💡圖片：繞 Z 軸的 3D 旋轉：）
面試

2.2.1 空心上三角

💡前置知識：經過 CSS 畫「三角形」——《CSS——CSS 給盒子、背景、連接、列表、表單、表格等加樣式》chrome

🔗源碼及效果展現
💡小技巧：控制檯調節偏移度
瀏覽器

html

<div class="bubble">Hello,Oli的前端一萬小時</div>
複製代碼

cssbash

.bubble {
/*咱們先對邊框加樣式*/

  position: relative;
/*🚀🚀爲下邊的絕對定位增長一個錨點。*/

  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;
/*🏆咱們加了上邊框和左邊框，想象一下，一個塊，加了這兩個邊框而後對其旋轉， 它就會呈現出一個「三角」。*/

  background: #fff;
  display: inline-block;

  transform: rotateZ(45deg);
/*🏆這裏使用的是 CSS3 的屬性，讓上邊加了邊框的塊繞 Z 軸去「45°旋轉」。*/
/*🏆Z 軸能夠這樣理解： 你的顯示器屏幕是一個平面，它由 X 和 Y 軸構成，而你的「視線」與顯示器這個平面之間的直線，則爲 Z 軸 。 咱們這裏就能夠簡單的繞着這個 Z 軸來旋轉！ */

  position: absolute;
  top: -6px;
/*設置爲絕對定位，使其脫離文檔流，而後讓他向上偏移。*/
/*🚀🚀一旦設置了絕對定位，那麼就須要在其父容器上設置一個「錨點」來偏移。*/
/*至於到底偏移多少合適，咱們經常採用的方法是：經過檢查元素的方式， 在開發者工具後臺，用鼠標滾動到最合適的位置。*/
}
複製代碼

🏆觸類旁通：

2.2.2 實心上三角

🔗源碼及效果展現
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 紅心內右角

🔗源碼及效果展現
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;
  overflow: hideen;
}

.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 延伸——僞類選擇器的應用

🔗源碼及效果展現
html

今天的心情: <input type="checkbox">
複製代碼

css

input[type=checkbox] {
  -webkit-appearance: none;
/*去掉默認樣式--一個框*/

  appearance: none;
  background: url(https://qdywxs.github.io/css-images/css12-img01.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://qdywxs.github.io/css-images/css12-img02.jpg) 0 0 no-repeat;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-size: contain;
  vertical-align: middle;     
}
複製代碼