设置标准盒子和怪异盒子

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了设置标准盒子和怪异盒子相关的知识,希望对你有一定的参考价值。


 .div3{
           width: 200px;
           height: 200px;
           overflow: hidden;
           resize: both;
           border: 1px darkgrey solid;
           /*定义一个div用户可以放大该div,只有resize设置为both才生效*/
           box-sizing: content-box;

           /*box-sizing: content-box;设置盒子模型为标准模型,设置width为200px,不包含                           border,margin,padding,*/
       /*box-sizing: border-box;设置为怪异模型,包含border,margin,padding*/
       }



     <div class="div3">
        /*定义一个div用户可以放大该div,只有resize设置为both才生效*/
        <hr>
        /*box-sizing: content-box;设置盒子模型为标准模型,设置width为200px,不包含                           border,margin,padding,*/
        /*box-sizing: border-box;设置为怪异模型,包含border,margin,padding*/
    </div>

本文出自 “matengbing” 博客,请务必保留此出处http://matengbing.blog.51cto.com/11395502/1876122

以上是关于设置标准盒子和怪异盒子的主要内容,如果未能解决你的问题,请参考以下文章

请简述 css 盒子模型与css怪异盒模型

标准盒模型与怪异盒模型

2022-03-09——标准盒模型与怪异盒模型的区别 及 box-sizing的应用

CSS盒子模型与怪异盒模型

盒子模型

什么是盒子模型