• bordersizing属性


    box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。

    content-box,border和padding不计算入width之内

    padding-box,padding计算入width内

    border-box,border和padding计算入width之内。

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

    div的大小最后为150px

        .padding-box{
            box-sizing:padding-box;
            -moz-box-sizing:padding-box;
            width: 100px;
            height: 100px;
            padding: 20px;
            border: 5px solid #186645;
            background: red;                
        }

    div的大小加上了padding,没算上border所以为140px

        .border-box{
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            width: 100px;
            height: 100px;
            padding: 20px;
            border: 5px solid #3DA3EF;
            background: yellow;
        }

    div的宽度为100px,为原始的宽度,一般写页面对ui设计好的来说,我们最好使用这个属性,这样对整体布局很有好处,不然,页面很容易出现问题。

    </style>

  • 相关阅读:
    迭代器,生成器的理解
    需求
    关于dom 0级 2级 3级事件的理解
    夯实前端基础
    前端面试题 收集
    前端易忘点,持续更新
    form target 文件上传
    ES6 symbol
    bzoj1260 [CQOI2007]涂色paint
    bzoj1083 [SCOI2005]繁忙的都市
  • 原文地址:https://www.cnblogs.com/changqijing/p/7686854.html
Copyright © 2020-2023  润新知