標籤：css 辛星 氣泡 純css 布局
上文中我發布了一篇手寫導航條的部落格，那麼這一篇部落格我將和大家一起手寫氣泡，那麼什麼是氣泡呢？先給那些剛入門的童鞋一個，來更好的認識一下什麼是氣泡把：
這就是一個簡單的氣泡啦，那麼它主要用來幹什麼呢？他可以用來當我們點擊某段文字的時候再顯示出來，當然，這個可能需要用到Javascript的知識，我們先不提了，我們這裡先給大家看一下如何去做一個CSS氣泡把。
我們先分析一下思路，它的實現無非就是一個矩形的邊框，然後下面是一個三角形，但是這個三角形是一個鏤空的，也就是是一個空心三角形，並且它還是一個只有兩條邊的三角形，那麼我們先來看一下如何去做出來這個三角形，其實實現這個三角形還是蠻簡單的，我先給出代碼，然後給出解釋：
<html><head><style type="text/css">#demo{width: 0px;height: 0px;border-width: 75px;border-style:solid;border-color:#F00 transparent transparent; }</style></head><body><div id = "demo"></div></body></html>上面這段代碼大家去啟動並執行話，發現只有一個紅色的倒立的三角形，如下：
那麼它是如何?的呢？首先我們建立了一個div，然後設定其id為demo，然後我們在css中把它的寬度和高度都設定為0，把邊框設定為75像素，這一點很關鍵，即其實我們是看不到它的內容的，我們所看到的只有它的邊框，而它的四個邊框的顏色都是紅色的，但是就但是在，它的下邊框和左右邊框都是透明的，因此，我們就只能看到上邊框了，也就是我們只能看到一個倒立的三角形，看不到整個的矩形地區了，這就是這個三角形的實現原理，如果大想要做出來向右的三角形，可以自己寫一寫試試奧。
第一步，我們先寫一個my.html檔案，內容如下：
<!DOCTYPE html><html lang="zh-cn"><head><title>辛星手寫CSS氣泡</title><link rel="stylesheet" type="text/css" href="xing.css"></head><body><div class="tag"> <div class="arrow"> <em></em><span></span> </div> 辛星CSS手寫氣泡</div></body></html>第二步，我們建立一個xing.css檔案，開始我們的css編輯工作，我們要在em中實現這個三角形，然後用span去鏤空它，因此我們的tag來實現文本顯示，我們用下面的arrow來實現箭頭，我們先寫tag的樣式：
.tag{ width:300px; height:100px; border:5px solid #09F; position: relative; background-color:#FFF;}第三步，我們開始寫下面的這個箭頭，我們就需要用到em這個標籤了，在寫之前，有一個問題：那就是它的布局怎麼辦，這裡我們採用絕對布局，關於絕對布局，如果大家不清楚，可以翻翻我前面的教程，裡面有講解。關於如何?這個箭頭，上面也有講解，如果讀者不清楚，可以跟著代碼多敲敲，實驗幾遍，我們添加後的代碼如下：
.tag{ width:300px; height:100px; border:5px solid #09F; background-color:#FFF;}.tag em{display:block; border-width:20px; position:absolute; bottom:-40px; left:100px;border-style:solid ; border-color:#09F transparent transparent;}第四步，可能有童鞋會感覺有問題，重新整理介面之後這個下拉式箭頭沒有實現，那又是什麼原因呢？這就是我們在一個子項目中使用絕對布局的話，如果父元素中沒有指定配置模式，那麼子項目就會相對於body進行定位，在body的下面40個像素，當然什麼都不會看到了，於是我們在tag中變化代碼如下，即添加它的定位屬性，變化後的代碼如下：
.tag{ width:300px; height:100px; border:5px solid #09F; position: relative; background-color:#FFF;}.tag em{display:block; border-width:20px; position:absolute; bottom:-40px; left:100px;border-style:solid ; border-color:#09F transparent transparent;}此時，讓我們來看一下效果把：
其實，此時已經可以說是一個氣泡了，如果讀者要求不高的話，現在已經可以打完收工了。
第五步，進一步的修飾，其實這個時候就很簡單了，我們下面的span幾乎就是照抄上面的em標籤，我們只需要讓該元素的向下的箭頭是一個白色的三角形就Ok了，因此添加之後的代碼如下：
.tag{ width:300px; height:100px; border:5px solid #09F; position: relative; background-color:#FFF;}.tag em{display:block; border-width:20px; position:absolute; bottom:-40px; left:100px;border-style:solid ; border-color:#09F transparent transparent;}.tag span{display:block; border-width:20px; position:absolute; bottom:-33px; left:100px; border-style:solid ; border-color:#FFF transparent transparent;}好啦，我們來看一下效果：
好啦，這就完成了我們的用純CSS手寫氣泡的效果，如果大家還有什麼問題，可以在下面給我留言，我會認真查看並回複的，謝謝。
辛星和您一起手寫CSS氣泡
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
