zoukankan      html  css  js  c++  java
  • box-sizing

    box-sizing三种属性值:

    content-box: 是正常的w3c模型,border和padding不计算在width之内

    padding-box: 是将padding计算入width之内

    border-box: 也就是怪异模式border和padding计算入width之内


    兼容性:

    ie8+,谷歌浏览器支持content-box和border-box

    火狐支持三种值


    使用方法:

    -webkit-box-sizing: 100px; // for safari, android

    -moz-box-sizing:100px; //for 火狐

    box-sizing:100px; //for other

    说明示例:

        <style type="text/css">
            .content-box{
                box-sizing:content-box;
                -moz-box-sizing:content-box;
                 100px;
                height: 100px;
                padding: 20px;
                border: 5px solid #E6A43F;
                background: blue;
            }
            .padding-box{
                box-sizing:padding-box;
                -moz-box-sizing:padding-box;
                 100px;
                height: 100px;
                padding: 20px;
                border: 5px solid #186645;
                background: red;                
            }
            .border-box{
                box-sizing:border-box;
                -moz-box-sizing:border-box;
                 100px;
                height: 100px;
                padding: 20px;
                border: 5px solid #3DA3EF;
                background: yellow;
            }
        </style>
    

    截图:

  • 相关阅读:
    hdu 1.2.4
    交换机&&路由器
    AP、AC、无线路由器
    肩胛骨
    无线路由器
    背部肌肉
    胸部肌肉
    redis未授权访问
    进制
    攻防实验
  • 原文地址:https://www.cnblogs.com/wei-hj/p/6724003.html
Copyright © 2011-2022 走看看