阅读 962

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

本文推荐 PC 端阅读~

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

获取编号.png

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- 。
*/
复制代码

12-01-伪元素-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 旋转:)

12-02-绕Z轴旋转.png

2.2.1 空心上三角

12-03-空心上三角.png

💡前置知识:通过 CSS 画“三角形”——《CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式》

🔗源码及效果展示
💡小技巧:控制台调节偏移度

12-04-控制台调节偏移度.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;
/*设置为绝对定位,使其脱离文档流,然后让他向上偏移。*/
/*🚀🚀一旦设置了绝对定位,那么就需要在其父容器上设置一个“锚点”来偏移。*/
/*至于到底偏移多少合适,我们常常采用的方法是:通过检查元素的方式,
在开发者工具后台,用鼠标滚动到最合适的位置。*/
}
复制代码

12-05.png

🏆举一反三:

2.2.2 实心上三角

12-06.png

🔗源码及效果展示
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 红心内右角

12-07.png

🔗源码及效果展示
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 延伸——伪类选择器的应用

12-08-伪类-心情.gif

🔗源码及效果展示
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;     
}
复制代码


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

加油!

关注下面的标签,发现更多相似文章
评论