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

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

祝好，qdywxs ♥ you！