IFE学习笔记<1>之CSS布局小技巧

#main{
    max-width:600px;
    margin:0 auto;
}

用max-width替代width，可以使屏幕比600px窄时自动调整内容宽度，而不是出现滚轮。所有主流浏览器包括IE7都支持。

*{
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
            box-sizing:border-box;
}

避免padding和border-width将元素撑宽。免去以往的数学计算，使width一样的元素一样宽。支持IE8+。

.clearfix{
    overflow: auto;
    zoom: 1; //added to support IE6，触发hasLayout
}

闭合浮动，比clear清除浮动好，解决浮动元素比包含元素还高从而溢出的问题。包含元素的class="clearfix"。

@media screen and (min-width:600px) {
    nav {
        float: left;
        width: 25%;
    }
    section {
        margin-left: 25%;
    }
}
@media screen and (max-width:599px) {
    nav li {
        display: inline;
    }
}

媒体查询，来进行响应式布局。

.box{
    display: inline-block;
    width:200px;
    height:100px;
    margin:1em;
}

inline-block,也会出现响应式。

“你可以使用 inline-block 来布局。有一些事情需要你牢记：

• vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
• 你需要设置每一列的宽度
• 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙”