與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聊天窗口

回答

相關問題