盒子模型

最新推荐文章于 2024-09-14 08:09:14 发布

前端菜菜鸟

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量92

点赞数

文章标签： css

本文链接：https://blog.csdn.net/zh994990183/article/details/99684491

版权

  <style>
    div{
        width:400px;
        height: 300px;
        background-color: orange;
        border: 15px solid blue;
        /* 内边距，控制内容与边界的距离 */
        padding: 25px;
        /* 外边距，控制元素之间的距离 */
        margin: 10px;
    }
    #div1{
        /* 控制标签最终大小的最终模式 */
        /* 内容和模型 （标准盒模型） 默认值*/
        box-sizing: content-box;
          /* 元素最终的大小 = border+padding+content（w，h */
    }
    #div2{
        /* 边框和模型（IE盒模型） */
        box-sizing: border-box;
          /* 元素最终的大小 = (w,h)
          content=(w,h)-padding-border */
    }

    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>