css textbox 边框去掉_（12）把“可以动的盒子”更优雅地展示： “伪元素”妙用 | CSS...

最新推荐文章于 2022-08-29 11:27:47 发布

weixin_39590635

最新推荐文章于 2022-08-29 11:27:47 发布

阅读量105

点赞数

文章标签： css textbox 边框去掉 display none的元素重新展示如何撑开页面伪代码block转换成程序流程图后台传html样式展示无效

原创：itsOli  @前端一万小时

本文版权归作者所有，未经授权，请勿转载！

本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」

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

?上方面试题“参考答案详解”，请点击文末“

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

1 认识“伪元素”

1.1 伪元素

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

?源码及效果展示 https://jsbin.com/pojulugexo/edit?html,css,output

HTML

html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>前端一万小时title>
head>
<body>
 <h6>Hello，前端一万小时！h6>
 <p>Oli's 前端一万小时p>
 <input type="text" placeholder="Oli's 前端一万小时">
body>
html>

CSS

h6::first-letter {font-size: 20px; } /* ?如果我们不用伪元素，我们就会在 HTML 中用更多的代码表示--如加 span，然后再在 CSS 中对 span 加样式。 */ h6::after {content: "@2020"; }/* ?可以很直接地在 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 清除浮动

?源码及效果展示 https://jsbin.com/rulepawaju/edit?html,css,output

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 旋转)

2.2.1 空心上三角

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

?源码及效果展示 https://jsbin.com/padawipehi/edit?html,css,output ?小技巧：控制台调节偏移度

HTML

html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>前端一万小时title>
head>
<body>
  <div class="bubble">Hello，前端一万小时！div>
body>
html>

CSS

.bubble {/* 我们先对边框加样式。 */position: relative;/* ??为下边的绝对定位增加一个锚点。 */display: inline-block;padding: 10px;background: #fff;border: 1px solid #000;border-radius: 3px; }.bubble::before {content: "";/* 这个伪元素选择器的意思就是：在 bubble 内部创建一个行内元素，作为 bubble 的第一个孩子。 *//* 其实就是我们要的那个“小三角”。 */position: absolute;top: -6px;/* 设置为绝对定位，使其脱离文档流，然后让它向上偏移。 *//* ??一旦设置了绝对定位，那么就需要在其父容器上设置一个“锚点”来偏移。 *//* 至于到底偏移多少合适，我们常常采用的方法是：通过检查元素的方式，在开发者工具后台，用鼠标滚动到最合适的位置。 */display: inline-block;width: 10px;height: 10px;background: #fff;border-top: 1px solid #000;border-left: 1px solid #000;/* ?我们加了上边框和左边框，想象一下，一个块，加了这两个边框然后对其旋转，它就会呈现出一个“三角”。 */transform: rotateZ(45deg);/* ?这里使用的是 CSS3 的属性，让上边加了边框的块绕 Z 轴去“45° 旋转”。 *//* ?Z 轴可以这样理解：你的显示器屏幕是一个平面，它由 X 和 Y 轴构成，而你的“视线”与显示器这个平面之间的直线，则为 Z 轴。我们这里就可以简单地绕着这个 Z 轴来旋转！ */ }

?举一反三：

2.2.2 实心上三角

?源码及效果展示 https://jsbin.com/xeceyiceyo/edit?html,css,output

HTML

<div class="bubble">Hello，前端一万小时！div>

CSS

.bubble {
  position: relative;
  display: inline-block;
  padding: 10px;
  background: #fff; 
  border: 1px solid #000;
  border-radius: 3px; 
}

.bubble::before {
  content: "";
  position: absolute;
  top: -10px;

  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent grey transparent;
}

2.2.3 红心内右角

?源码及效果展示 https://jsbin.com/pakuzoyiqu/edit?html,css,output

HTML

html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>前端一万小时title>
head>
<body>
  <div class="bubble">Hello，前端一万小时！div>
body>
html>

CSS

.bubble {
  position: relative;
  display: inline-block;
  padding: 10px;
  background: #fff; 
  border: 1px solid #000;
  border-radius: 3px;

  overflow: hideen;
}

.bubble::before {
  content: "";

  position: absolute;
  right: 0;
  top: 0;

  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent red transparent transparent;

}

2.3 延伸——伪类选择器的应用

?源码及效果展示 https://jsbin.com/kakugifupa/edit?html,css,output

HTML

html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>前端一万小时title>
head>
<body>
  今天的心情：<input type="checkbox">
body>
html>

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;     
}