布局小技巧

Firefox:-moz-box-
Safari:-webkit-box-
Opera:-o-box-
IE:-ms-box-

a标签覆盖整个div

  <div class="grid">
        <figure class="effect-ri-le">
            <img src="kimteayon.png" alt="teayon">
            <figcaption>
                <div>
                    <h2>hello <span>teayon</span></h2>
                    <p>teayon是一个超级sweet的人</p>
                </div>
                <a href="#">查看更多</a>
            </figcaption>
        </figure>
    </div>

.grid figure figcaption > a {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
    opacity: 0;
}

100%盒模型边框超出问题

应用场景：

平时在制作页面的时候，总会碰到有的元素是100%的宽度。众所周知，如果元素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，或者说有margin和padding，这些都会让你的盒子撑破。我们换句话来说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将会把元素盒子撑破（标准模式下，除IE怪异模式）。这样一来就会相当的麻烦，平时我们碰到这样的现象时，也是相当的谨慎，有时甚至无法解决，只能通过改变结构来实现。就算你通过繁琐的方法实现了，但有于浏览器的兼容性而导致最终效果不一致。虽然前面介绍的CSS3属性中的box-sizing在一定程度上解决这样的问题，其实今天的calc()函数功能实现上面的效果来得更简单。

calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：

calc()使用通用的数学运算规则，但是也提供更智能的功能：

使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如”widht: calc(12%+5em)”这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

 width: -webkit-calc(100% + 50px);
 width:calc(100% + 50px);