CSS——把“可以動的盒子”更優雅地展示：① “偽元素”妙用

itsOli發表於2019-05-05
CSS
本文推薦 PC 端閱讀~

本文版權歸 “公眾號 | 前端一萬小時” 所有，未經授權，請勿轉載！
複製程式碼

CSS——把“可以動的盒子”更優雅地展示：① “偽元素”妙用

css_12
複製程式碼

涉及面試題.png

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;
}    
/*?如果我們不用偽元素，我們就會在 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- 。
*/
複製程式碼

偽元素-placeholder.png

1.2 ::before / ::after

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

2 偽元素的用法

2.1 清除浮動

?原始碼及效果展示
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 替代標籤

?前置知識：注意程式碼中關於 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 旋轉。

（?圖片：繞 Z 軸的 3D 旋轉：）

繞Z軸旋轉.png

2.2.1 空心上三角

空心上三角.png

?前置知識：通過 CSS 畫“三角形”——《CSS——CSS 給盒子、背景、連結、列表、表單、表格等加樣式》

?原始碼及效果展示
?小技巧：控制檯調節偏移度

控制檯調節偏移度.gif

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:'';
/*這個偽元素選擇器的意思就是：在 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;
/*設定為絕對定位，使其脫離文件流，然後讓他向上偏移。*/
/*??一旦設定了絕對定位，那麼就需要在其父容器上設定一個“錨點”來偏移。*/
/*至於到底偏移多少合適，我們常常採用的方法是：通過檢查元素的方式，
在開發者工具後臺，用滑鼠滾動到最合適的位置。*/
}
複製程式碼

CSS——把“可以動的盒子”更優雅地展示：① “偽元素”妙用

?舉一反三：

2.2.2 實心上三角

CSS——把“可以動的盒子”更優雅地展示：① “偽元素”妙用

?原始碼及效果展示
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 紅心內右角

CSS——把“可以動的盒子”更優雅地展示：① “偽元素”妙用

?原始碼及效果展示
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: hidden;
}

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

偽類-心情.gif

?原始碼及效果展示
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;     
}
複製程式碼

後記： 下一篇我們總結一下實際工作中，讓盒子“居中”擺放都有哪些方法。屬於特別重要的篇幅，隨時都會用到。

加油！

相關文章