同一行最后一个元素靠右显示
buju.png
比如想实现如图所示的浮层布局，左侧两个元素，右侧一个元素：父元素变成弹性盒模型，中间子元素设置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个元素，最后一行不够靠左显示
jiugongge.png
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）。
image.png
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标签两端对齐
默认情况下，我们敲半角的空格宽度并不够，但是多个空格如果不做单独的设置又会合并成一个空格。那么怎么办呢？其实直接打空格是可以实现的，但是注意需要输入全角的空格，而且全角可以识别多个。
label.png
商品价格
我们很常见的一种样式是商品的现价格后面跟着一个之前的价格，之前的价格被划掉了。如图
价格.png
之前我是这样实现的，把现价格的￥和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标签就会直接有中划线的效果。
