与css聊天窗口

我被困在一个聊天窗口中，我们在元素之前，之后使用CSS创建了一个聊天窗口。我的代码添加到下面。我的问题是：与css聊天窗口

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

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

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

来源

2017-07-28 Neha

伪元素的设置是为了**样式的其它内容**。这个*内容*就是你放在'content'属性中的内容。如果你没有为'content'属性指定一个值，那么它的默认值就是'none'。如果内容为“无”，则没有任何风格，并且无论您应用什么样式都不会有任何要应用的内容。 –

使用边框属性制作的两个三角形创建箭头。一个红色的三角形使用：之前和一个白色的使用：之后。白色的一个用z-index放在最上面，红色的三角形放在左边一个像素。现在它看起来像一条线，但它只是显示了红色三角形的一小部分。 – Gerard

空的内容仅仅是为了创建一个风格的“对象”并没有真正包含任何“内容”的方式。这个位置指的是你的“泡沫”前后的“风格但空的东西”的位置，它并不是指泡沫本身的位置。

来源

2017-07-28 16:55:18

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

如果您删除.bubble:after中的content: '';行，您将得到以下代码段。然后让那个红色箭头填满。

2）您希望该元素是父元素的绝对位置。所以它将始终处于您想要的确切位置。

3）使用.bubble:before选择器和border-color属性绘制箭头。如果您从.bubble中的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>

来源

2017-07-28 17:06:57

对于这个问题：“我们如何绘制上左侧的箭头”：三角形形状由css伪类.bubble:after实现，其中我们已经边框宽度为15px 15px 15px 0px给出用于边框宽度的顶部，右侧，底部和左侧样式。更多此类css技巧请参考here。

来源

2017-07-28 17:07:35 Abhishek

因为它是CSS的工作方式：P
绝对是用来更好地控制位置（但它是相对父）
这里招用 - 箭头在左侧由创建红色和白色三角形（白色为红色，但以这种方式重叠，红色的1px边界可见）。Trinagles被画使用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>

来源

2017-07-28 17:08:16

*因为这是CSS的工作方式*并不是真正的答案。 –

与css聊天窗口

回答

相关问题