前端学习-盒模型和怪异盒模型

最新推荐文章于 2024-03-22 16:17:03 发布

Yan阿清

最新推荐文章于 2024-03-22 16:17:03 发布

阅读量215

点赞数 1

文章标签：前端学习 html css

本文链接：https://blog.csdn.net/weixin_51346866/article/details/123217056

版权

本文深入探讨了CSS盒模型，包括W3C标准盒模型和IE怪异盒模型。内容涉及盒模型的组成（content、padding、border、margin）及其设置方式，详细解释了margin的合并与塌陷问题及解决方案。同时，通过实例展示了不同盒模型在布局中的差异，帮助开发者更好地理解和运用CSS盒模型来控制网页元素的样式和布局。

摘要由CSDN通过智能技术生成

盒模型

请添加图片描述
图片出自网上侵权删。

从里到外：content（宽高） +padding (内填充) +border(边框)+margin（外边距）

padding

<style>
    p{
        //单方向
	    padding-top：
        padding-left：
        pdding-right：
        padding-bottom：
    }
    
    div{
        //上 右 下 左
        padding：1px 2px 3px 4px；
        //上下左右
        padding：1px；
        //上下 左右
        padding：1px 2px；
        //上  左右  下
        padding：1px 2px 3px；
    }
</style>

border

<style>
    p{
        //边框大小
        border-width：100px；
        //边框线形
        border-style：dashed；
        
        border-right-color：pink；
        //简写：
        border:1px solid red;
        //上 右 下 左 边框大小 边框线形 边框颜色
            border-top: 1px solid  red;
            borer-right:1px dashed  yellow；
            border-bottom:1px dotted black；
            border-left：1px  double  green；
                
         //上 右 下 左 各边框颜色
         border-color:red bule black yellow;   
            
    }

</style>

margin

1、相邻2个元素的margin-bottom 和 margin-top会产生合并。
问题；解决：给其中一个标签写上 over-flow：hidden；

2、塌陷问题 ：父元素与子元素没有浮动（float），子元素的margin-top 会给到父元素。
解决：给父元素写上 over-flow：hidden；

div{
	margin-top:10px；
	margin-left:10px；
	margin-right：10px；
	margin-bottom：10px；
//简写
	margin：10px 20px 30px 40px；

}

二、怪异盒模型

请添加图片描述
图片出自网上侵权删。

W3c标准的盒子模型（标准盒模型 width=content）、第二种IE标准的盒子模型（怪异盒模型–怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；）

   <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rgb(155, 146, 187);
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgb(37, 164, 87);
            padding: 20px;
            border:1px solid red;
            /* 怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；
            height指的是内容、边框、内边距总的高度 */
            box-sizing: border-box;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: 1px dashed black;
        }
        .box4{
            width: 80px;
            height: 80px;
            background-color: rgb(81, 49, 150);
            border: 1px dashed rgb(81, 196, 150);
            padding: 20px;
            margin: auto;
        }
    </style>
</head>
    <body>
<!-- W3c标准的盒子模型（标准盒模型 width=content） 、
第二种IE标准的盒子模型（怪异盒模型） -->
    <div class="box1">
        <div class="box2">
            <p>怪异盒模型</p>
        </div>
    </div>
    <div class="box3">
        <div class="box4">
            <p>标准盒模型</p>
        </div>
    </div>
</body>
</html>