Question

我遇到了一个聊天窗口，我们是在CSS之后使用CSS创建的。我的代码添加在下面。我的问题是：

为什么我们设置content是否为空？
为什么position和absolute中的:after更改为:before？
主要问题是：我们如何在左侧绘制箭头？

＆＃13;

.bubble {
  position: relative;
  width: 580px;
  min-height: 65px;
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ccc;
  margin-left: 50px;
  margin-top: 59px;
}

.bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  display: block;
  width: 0;
  z-index: 1;
  margin-top: -15px;
  left: -15px;
  top: 50%;
  border-color: transparent #fff;
}

.bubble:before {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  display: block;
  width: 0;
  z-index: 0;
  margin-top: -15px;
  left: -16px;
  top: 50%;
  border-color: transparent red;
}

＆＃13;

<html>

<body>
  <div class="bubble">
    <div class="Pointer">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

1）将内容设置为空白的原因是告诉HTML您仍希望元素显示。如果您未将内容设置为空白字符串（即content: '';），则该元素不会显示。

如果您移除content: '';中的.bubble:after行，您将获得以下代码段。然后填充红色箭头。

2）您希望元素成为父元素的绝对位置。所以它总是在你想要的确切位置。

3）您正在使用.bubble:before选择器和border-color属性绘制箭头。如果从.bubble：before选择器中的border-color属性中删除透明，则会得到一个正方形。不是漂亮的三角形。

总的来说，既然你正在学习CSS，而且我假设你正在学习教程，我建议如果你不知道某些东西是如何工作的，要么一次评论一行，然后刷新你的页面。查看屏幕上是否有任何可见的更改。

要回答这个问题，我删除了一行，然后刷新以查看代码是如何编写的。如果我不喜欢这些变化，那就把它放回去。：d

.bubble {
  position: relative; 
  width: 580px;
  min-height: 65px;
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ccc;
  margin-left: 50px;
  margin-top: 59px;
}

.bubble:after {
  position: absolute;
  border-style: solid; 
  border-width: 15px 15px 15px 0; 
  display: block;
  width: 0;
  z-index: 1;
  margin-top:-15px;
  left: -15px;
  top:50%;
  border-color: transparent #fff;
}

.bubble:before {
  content: ''; 
  position: absolute;
  border-style: solid; 
  border-width: 15px 15px 15px 0;
  display: block;
  width: 0;
  z-index: 0;
  margin-top:-15px;
  left:-16px;
  top: 50%;
  border-color: transparent red;
}

<html>
 <head>
</head>
<body>
    <div class="bubble">
            <div class="Pointer">
             <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
                industry. 
             </p>
            </div>
    </div>
 </body>
</html>

Answer 2

空内容只是一种创建风格“对象”的方法，它实际上并不包含任何“内容”。这个位置指的是“泡沫”之前和之后“风格但空洞的东西”的位置，它并不是指泡沫本身的位置。

Answer 3

对于问题＆＃34;我们如何在左侧绘制箭头＆＃34;：三角形形状由css伪类.bubble:after实现，其中我们的边框宽度为15px 15px 15px 0px，边框宽度为top，right，bottom和left样式。有关更多此类css技巧，请参阅here。

Answer 4

因为这是css的工作方式：P
绝对用于更好地控制位置（但它相对于父级）
这里使用了技巧 - 左侧的箭头由红色和白色三角形创建（白色为红色，但以这种方式重叠，红色的1px边界可见）。使用div元素的粗边框绘制三角形 - 在下面的示例中可以更好地看到它：

请看这里：https://jsfiddle.net/q30Lnbfr/

 .test1 {
    border-style: solid;
    border-width: 15px 15px 15px 0;
    width: 0;
    border-color: transparent red;
}

 .test2 {
    border-style: solid;
    border-width: 15px 15px 15px 15px;
    width: 30px;
    border-color: green red;
}

<div class="test1">

</div>
<br>
 <div class="test2">

</div>

与css的聊天窗口

4 个答案: