zoukankan      html  css  js  c++  java
  • 几个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-600px) {
        nav {
            float: left;
            width: 25%;
        }
        section {
            margin-left: 25%;
        }
    }
    @media screen and (max-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源代码中元素之间有空格,那么列与列之间会产生空隙”
  • 相关阅读:
    今日进度
    今日进度
    今日进度
    今日进度
    pandas连接MySQL和impala
    sql语句获取今天、昨天、近7天、本周、上周、本月、上月、半年数据
    Python报错 ValueError: arrays must all be same length
    Python 连接 impala
    Test
    Selective Search for Object Recognition
  • 原文地址:https://www.cnblogs.com/babywhale/p/4421420.html
Copyright © 2011-2022 走看看