浅谈盒模型，怪异盒，外边距塌陷问题

最新推荐文章于 2022-07-19 13:29:51 发布

啊作

最新推荐文章于 2022-07-19 13:29:51 发布

阅读量414

点赞数 2

分类专栏：初学前端文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_43213962/article/details/105717015

版权

初学前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

盒模型

什么是盒模型（正常的）？

在css中把每个标签可以看做是一个盒子，这个盒子从里到外有四层结构，分别是内容、内边距、边框、外边距。

从里到外
在这里插入图片描述

第一层 是content，内容是尺寸是width和height。
第二层 是padding，内边距，内边距也叫内补丁或者内填充，是这个盒子的边缘和内容之间的距离，但是不会显示内容。

   padding-top:上内填充
   padding-left:左内填充
   padding-right:右内填充
   padding-bottom:下内填充

第三层是边框border，是指盒子的边缘的线条

   border-top:上边框
   border-left:左边框
   border-right:右边框
   border-bottom:下边框

   border: 1px solid  #000;
          border-width  boeder-style   border-color  
   综合写法：线宽  线性（solid实线 / dotted 点线 / dashed 条状 / double 双实线）  线色 ;

   border:0;
   border:none; 
   去掉边框的两种写法

第四层 外边距margin，是指盒子和相邻元素或者是父元素之间的距离。

    margin-top: 50px;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 50px;

综合写法：margin:上 右 下 左;（同padding的顺序一样）
当两边的宽度一致时margin:上下  左右;
元素水平居中：margin:0 auto;
清除外间距：margin:none;/margin:0;

*外边距可设置负值：
负值就是写什么方向就向什么方向偏移
eg：margin-top:-10px;
元素就会向上移动
margin可以设置负值，可以通过

区分内外边距
内边距：是边框和内容之间的距离
外边距：边框之外的距离

注意：使用margin: 0 auto;水平居中时，父元素和子元素要有一个间距差

补充：

与盒模型不同的一个盒子，怪异盒。

给盒子设置box-sizing属性

属性值有

content-box，默认属性，表示正常的盒模型。
border-box，把盒子设置成怪异盒。用处就是把盒子设置成固定的宽高，并且给盒子设置padding、border（margin除外）值不会改变盒子的宽度和高度，只会对内容进行压缩。
例如：

        .wrap{
            width: 200px;
            height: 200px;
            background-color: darkslateblue;
            padding: 20px;
            border: 10px solid #000;
            /* box-sizing: border-box; */
        }

在这里插入图片描述
可以看出，盒子的总宽和高不是200px，而是260px。
当我们使用怪异盒时

 box-sizing: border-box;

在这里插入图片描述
此时，padding和border不会超出200*200px。

外边距塌陷问题

第一种情况：

垂直方向margin-top传递问题
当父元素没有padding/border/float/position/overflow，给子元素设置margin-top会把父元素一块带下来

    <style>
        *{
            margin: 0;
        }
        .wrap2{
            width: 200px;
            height: 200px;
            background-color: #333;
        }
        .wrap2 .box3{
            width: 100px;
            height: 100px;
            background-color: tomato;
            margin-top: 50px;
        }
    </style>
</head>
<body>
        <div class="wrap2">
            <div class="box3"></div>
        </div>
</body>

在这里插入图片描述
解决：

1，给父元素添加1px的上padding或者border，但是会多出来一个距离（不太理想）。
2，可以用父元素的padding-top来覆盖子元素的margin-top值实现同样式的效果
3，给其中给父级盒子触发BFC（后面会讲到），改变父级盒的渲染规则，用（overflow:hidden）。（相对较好的解决办法！）
给父级添加overflow:hidden后：

第二种情况：
相邻元素的外边距合并
两个同级的标签，上一个设置margin-bottom:30px，下一个设置margin-top:60px，最后两者之前的外边距会合并为数值较大的那个值，而不是数值相加(90)。

    <style>
        *{
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: green;
            margin-bottom: 30px;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: royalblue;
            margin-top: 60px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1"></div>
    </div>
    <div class="box2"></div>
</body>

在这里插入图片描述
解决：

给父级设置overflow:hidden，触发BFC。

        .wrap{
            overflow: hidden;
        }

在这里插入图片描述
ok，今晚就到这了，有什么不对的地方，给个建议。谢谢！

奥利给！

啊作

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浅谈盒模型，怪异盒，外边距塌陷问题

盒模型什么是盒模型？
复制链接

扫一扫

专栏目录

浅谈盒模型，怪异盒，外边距塌陷问题

盒模型

什么是盒模型（正常的）？

补充：

外边距塌陷问题

“相关推荐”对你有帮助么？