CSS——把“可以动的盒子”更优雅地展示：① “伪元素”妙用

栏目: CSS · 发布时间: 6年前

内容简介：前言：“伪元素”在我们创建样式的时候用处很多，它可以大大简化我们的代码量，还可以做一些出乎意料的动作。用于创建一些不在文档树中的元素，并为其添加样式。

本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 所有，未经授权，请勿转载！
复制代码

css_12
复制代码

1. 如何使用伪元素来清除浮动？
2. 可以通过哪些方法优化 CSS3 animation 渲染？
复制代码

前言：“伪元素”在我们创建样式的时候用处很多，它可以大大简化我们的代码量，还可以做一些出乎意料的动作。

1 认识“伪元素”

1.1 伪元素

用于创建一些不在文档树中的元素，并为其添加样式。

:link:源码及效果展示

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;     
}
复制代码

后记：下一篇我们总结一下实际工作中，让盒子“居中”摆放都有哪些方法。属于特别重要的篇幅，随时都会用到。

加油！

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Programming PHP

Rasmus Lerdorf、Kevin Tatroe、Peter MacIntyre / O'Reilly Media / 2006-5-5 / USD 39.99

Programming PHP, 2nd Edition, is the authoritative guide to PHP 5 and is filled with the unique knowledge of the creator of PHP (Rasmus Lerdorf) and other PHP experts. When it comes to creating websit......一起来看看《Programming PHP》这本书的介绍吧!

码农工具