常見的佈局

同一行最後一個元素靠右顯示

比如想實現如圖所示的浮層佈局，左側兩個元素，右側一個元素：父元素變成彈性盒模型，中間子元素設定margin-right: auto。這樣就是自動填充滿剩餘空間的全部。

#foot{
    display: flex;
    align-items: center;
}
#foot img{
    margin: 0 10px;
}
#foot #btn_down{
    display: inline-block;
    margin-right: 10px;
}
#foot div{
    margin-right: auto;
}
<div id="foot">
    <img src="http://s1.static.shediao.com/d22813cb6aef4d248a23680907601349.png">
    <div>
         <h4>樂贏鬥地主</h4>
         <p>0秒下載，頂級手感</p>
    </div>
    <a href="#" id="btn_down">立即下載</a>
</div>

每行n個元素，最後一行不夠靠左顯示

1、目前我能想到的只有通過浮動實現，每行的子元素向左浮動，並設定右邊距，每行最後一個不設定。如果不考慮低版本瀏覽器不支援CSS3的情況，可以直接使用nth-of-type(3n)。

<ul>
    <li>
        <div></div>
        <div></div>
        <div></div>
    </li>   
    <li>
        <div></div>
        <div></div>
    </li>   
</ul>
li{
    margin-bottom: 20px;
    background-color: #ccc;
    height: 200px;
}
div:nth-of-type(3n){
    margin-right: 0;
}
div{
    width: 30%;
    margin-right: 5%;
    float: left;
    height: 200px;
    background-color: red;
}

2、但是如果我就是要相容低版本瀏覽器怎麼辦？看了《CSS世界》學到一招，可以給父元素設定margin-right的值為負，增加了容器的可用寬度（此時相當於100%+10px）。

div{
    margin-right: -10px;
}
p{
    float: left;
    margin-right: 10px;
    background: blue;
    width: 100px;
    height: 50px; 
    margin-bottom: 20px;
}
<div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

注意用了此方法子元素就不要用百分比。

lable標籤兩端對齊

預設情況下，我們敲半形的空格寬度並不夠，但是多個空格如果不做單獨的設定又會合併成一個空格。那麼怎麼辦呢？其實直接打空格是可以實現的，但是注意需要輸入全形的空格，而且全形可以識別多個。

商品價格

我們很常見的一種樣式是商品的現價格後面跟著一個之前的價格，之前的價格被劃掉了。如圖

之前我是這樣實現的，把現價格的￥和200放在兩個元素中，分別設定大小，後面劃掉的價格是一個元素，設定text-decoration: line-through。其實這裡有更簡潔的實現。

span{
    color: red;
    display: inline-block;
    margin-right: 5px;
}
span:first-letter{
    font-size: 14px;
}
del{
    color: #ccc;
    font-size: 14px;
}
<p>
    <span>￥200</span>
    <del>￥250</del>
<p>

現價格可以放在一個元素中，然後給該元素新增一個偽元素:first-letter單獨設定第一個字元的樣式（注意：行內元素無效）。劃掉的價格直接方法在del標籤就會直接有中劃線的效果。