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

浏览数：32 / 时间：2015年06月09日 
#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源代码中元素之间有空格，那么列与列之间会产生空隙”

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log 代码 使用 html si it 问题 class style log 代码 使用 html si it 问题

相关文章

随机文章

您可能还喜欢

您可能还喜欢