css3 虛擬元素

標籤：

今天切圖的時候給了一個列表，屬於常見的列表，圖片如下

這樣的列表屬於比較常見的列表了，在pc端上實現如下：

html:<ul>    <li>        <div class="pure-g">            <div class="pure-u-1-5 user-list-left">                <span><img src="../img" ></span>            </div>            <div class="pure-u-4-5 user-list-right">                <div class="user-list-right-l">                    <p>                        <span class="user-name">king</span>                        <span class="user-sex-age">25</span>                    </p>                    <p>                        <span class="user-intro">烘焙愛好者</span>                    </p>                </div>                <div class="user-list-right-r user-relation-status">                </div>            </div>        </div>    </li></ul>在mobile實現出來的結果不盡如人意，因為 user-list-left中的圖片會隨著視窗的變大變小而高度也有變化。為了保證 user-list-right 中的文字總是能夠垂直置中，搜尋過好多，發現實現的垂直置中都是相對於父元素高度固定的做到的。所以這種方法不能滿足要求了。

在小夥伴的協助下實現了幾個版本可以做到文字垂直置中了。

<ul class="warp">    <li>       <img src="../images/PlumbCenter.jpg" />       <div class="user-list-right">            <p>                <span class="user-name">king</span>                <span class="user-sex-age">25</span>            </p>            <p>                <span class="user-intro">烘焙愛好者</span>            </p>       </div>    </li></ul>css:li{list-style: none;margin:5px;}.wrap{width:60%;margin:0 auto;}.wrap li{font-size: 0;}/*去display:block空隙*/.wrap li img{display: inline-block;vertical-align: middle;width:20%;}.wrap .user-list-right{font-size:12px;word-break:break-all;word-wrap:break-word;display: inline-block;width:80%;vertical-align: middle;text-align: center;}.demoWrap li div p{line-height:24px;}

這種簡化了文檔結構，對img 和 user-list-right都採用了vertical-align: middle; 這下確實圖片和文字都垂直置中了。不過發下了個問題就是user-list-right如果寫border-bottom的話，會造成border-bottom靠上，而不是在li的底部。

小夥伴繼續最佳化，給出了一種解決方案：

<ul class="warp">    <li>       <img src="../images/PlumbCenter.jpg" />       <div class="user-list-right">            <p>                <span class="user-name">king</span>                <span class="user-sex-age">25</span>            </p>            <p>                <span class="user-intro">烘焙愛好者</span>            </p>       </div>    </li></ul>css:li{list-style: none;margin:5px;}.wrap{width:60%;margin:0 auto;}.wrap li{position:relative;font-size: 0;}/*去display:block空隙*/.wrap li img{display: inline-block;vertical-align: middle;width:20%;}.wrap .user-list-right{font-size:12px;word-break:break-all;word-wrap:break-word;display: inline-block;width:80%;vertical-align: middle;text-align: center;}.demoWrap li div p{line-height:24px;}wrap li:after{        content:"";        width: 80%;        border-bottom: 1px solid red;        display: block;        position: absolute;        right: 0;        bottom: 0;}

這種方案對li使用了position：relative，而對li：after進行處理，重寫了寬度，採用絕對位置，完美的解決了頁面在縮放中img變大變小的列表文字不置中的問題。

解決這個問題，學會了兩點，盡量少些dom元素。使用虛擬元素。

虛擬元素的使用：:first-letter :first-line :before :after

前面兩個就不多說了，後面兩個已經被大俠們玩壞了額，快點來學習學習

使用虛擬元素::before,::after

使用虛擬元素到底能做啥，來讓你開啟眼界吧，給你貼些那些大神們的例子吧。

1 使用before和after做出來的對話方塊，總算可以不用圖片了http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

看該執行個體時候注意三角形的方向，都是採用border去實現的，挺有意思的，下來我準備單獨寫個文章出來。

2 透明漸變的按鈕 http://jsfiddle.net/chriscoyier/hk6z9/1/

3 CSS GUI iconshttp://nicolasgallagher.com/pure-css-gui-icons/

4 最常用的就是清除浮動了

/*clear float*/.clear::before, .clear::after {    content: "";    display: table;}.clear::after {    clear: both;}.clear {    zoom:1; /*IE6, IE7*/}

5 用偽元素作 tooltip

<style>.tooltip a {position: relative;}.tooltip a::before {    border-left: 10px solid transparent;    border-right: 10px solid transparent;    border-top: 10px solid #abcdef;    position: absolute;    left: 0%;    bottom: 90%;    content: "";    height: 0;    width: 0;    opacity: 0;    margin:0 0 20px 15px;    transition: all 0.4s ease;}.tooltip a::after {    border-radius: 5px;    background: #abcdef;    color: #000;    position: absolute;    left: 0%;    bottom: 130%;    content: attr(data-tooltip);    white-space: nowrap;    padding: 5px 15px;    margin-bottom: 15px;    opacity: 0;    transition: all 0.4s ease;}.tooltip a:hover::before {bottom: 65%;}.tooltip a:hover::after {bottom: 90%;}.tooltip a:hover::after, .tooltip a:hover::before {opacity: 1;}</style><p class="tooltip">

上面這些知識拋磚引玉，下來自己就好好學習吧。

虛擬元素注意內容：

看了這麼多的虛擬元素好處，看看它的相容性吧，相容性這個是硬傷。

瀏覽器支援:before 和 :after 虛擬元素棧，像這樣：Chrome 2+,Firefox 3.5+ (3.0 had partial support),Safari 1.3+,Opera 9.2+,IE8+ (with some minor bugs),幾乎所有的行動瀏覽器。

虛擬元素不是決定性的 幸運的是，缺少虛擬元素不會造成大問題。大多數情況下，虛擬元素一般修飾（或者協助）內容，不會給不支援的瀏覽器造成問題。所以，如果你的支援者具有較高的IE版本，你仍然可以在某種程度上使用它們。

一些提醒 正如前面提到的，虛擬元素不會出現在DOM中。這些元素不是真正的元素。因此，它們不是可用的。所以，不要使用虛擬元素產生內容，是您的網頁的可用性和可訪問性的關鍵。

另外一件需要記住的是，開發工具，例如Firefox，不要用虛擬元素顯示內容。所以，如果使用了，虛擬元素會造成難以維護和調試緩慢。

參考文章有：

1 http://blog.mukispace.com/pseudo-elements-10-examples/

2 http://blog.jobbole.com/49301/

css3 虛擬元素