CSS盒子模型以及外边框合并的问题

zacklee 发布于2019-08-02 16:01 / 2737人阅读

摘要：盒子模型我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子所以布局的万物基于盒子。虽然外边距是不可见的，但是我们算元素的总宽度或者总高度的时候，要加上外边距。

盒子模型

我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子......
所以布局的万物基于盒子。即使一个小小的元素p，也可以把它抽象成为一个盒子。
你现在心里有很多疑问，没关系，接着看。

以下是标准的盒子模型。（图片来源）

我们平常给元素加上的width，height实际上就是给内容区域加宽和高。我们增加内外边距的时候不改变内容区域的大小，却会改变整体的大小。如果我们为元素加一个1像素的框的话，那么我们能看见的只是框里面的东西（内边距+内容区域），如果在元素上添加背景，背景也会应用于这一区域，而外边距是不可见的，它是用来分隔各个元素。

虽然外边距是不可见的，但是我们算元素的总宽度或者总高度的时候，要加上外边距。
即：

height总=margin-top+border+padding-top+height+padding-bottom+border+margin-bottom
width总=margin-left+border+padding-left+width+padding-right+border+margin-right

如果只在视觉上固定框的大小不用加入margin进行计算。这里和《精通CSS 高级web标准解决方案（第二版）》有不同的意见。（P39-P40，我认为书中出错）

外边距的合并问题 什么是合并

就是外边距中会有叠加的情况，取两者中最大的一个作为间隔

合并问题的前提是

处于普通流两个或多个块元素垂直方向上相遇加粗文字，会造成的margin折叠

除去普通流、两个或多个、块元素、垂直很好理解之外

这个相遇要好好解释一下了，什么算相遇呢？

简单的来说，无非就是就是说两个元素碰到了一起。这个相遇就是真真正正的遇到了，如果有边框等阻挡，是不会发生折叠的！

具体的，分为：

Ⅰ：父元素的上外边距和第一个子元素的上外边距

大概就是图片中的效果：

也就是父元素的margin-top 和第一个子元素的margin-top相遇，

看代码：

HTML:

    


CSS:
/*为了效果更加明显，为body添加背景颜色*/
body{
    background-color:#ccc;
}
.father{
    background-color:blue;
    height:100px;
    width:100px;
    margin-top:20px;
}
.son{
    background-color:red;
    height:20px;
    width:20px;
    margin-top:20px;
}

效果图:

可以看出来红色方块原本应该在蓝色方块的下方20px处，然而却合并了！

这种合并有时候是一种便利，而在有些情况却成为了不知何处的bug。所以在后面会讲怎么消除这种浮动。

Ⅱ：父元素的下外边距和最后一个子元素的下外边距

也就是父元素的margin-bottom与最后一个子元素的margin-bottom相遇发生的重叠。

与上一个类似，所以不再阐述。

Ⅲ：相邻兄弟姐妹元素

相邻兄弟就是，相邻的两个元素margin-top和margin-bottom发生的合并。

外边距为40px的情况：




.block1 {
    background-color:red;
    height:50px;
    width:50px;
    margin-bottom:20px;
}
.block2 {
    background-color:blue;
    height:50px;
    width:50px;
    margin-top:20px;
}

实际效果图:

由此可见，相邻同胞元素确实发生了合并。

Ⅳ：空元素，自己的上外边距会和自己的下外边距合

这个段落的和下面段落的距离将为20px

这个段落的和上面段落的距离将为20px

这样第一个p元素和第三个p元素之间距离为20px

阻止自动合并

从定义出发会很好的理解这个问题，我们可以从合并的前提的角度出发探讨几种阻止合并的方法：

第一种方法：摆脱普通流

position:absolute;
float:left/right;

第二中方法：变成非块元素

第一篇文章已经提过可以用display:inline;将块元素变成行内元素。

注意：用这种虽然是理论上是可以实现的，然而它行内元素除了图片是不能设置宽高的，同时margin-top margin-bottom也将失效，所以我认为实际实现不了。

其实除了行内元素和块级元素，还有一种元素 inline-block，它集合两者的优点。（之后会有专门一篇文章总结。）

所以用display:inline-block也可以实现。

避免相遇

最重要的前提就是两个元素相遇，才有可能合并，我们只需要把它们隔断！

那么在相遇的两个margin中间可以有什么呢？
我针对两种情况给出了图解。

由此可以很清楚的看出来，只有父子的情况才能用这种方法。

而且方法也很显而易见：在父级元素设置padding或者border！

对于父子元素来说，还有一种方式：
清除浮动,overflow:hidden overflow:auto 即可，关于为什么能清除浮动还没有搞清楚。

针对父子元素的方法
设置了清除浮动属性

注意

如果有负外边距，合并后外边距为最大正边距加上最小负边距（绝对值最大的一个），如上面元素下边距为20px，下面元素上边距为-20px，则最后为0px.

在实际的情况，可以只写margin-bottom或者margin-top避免出现这种情况。

非块元素如何显示？

为此我专门写了一篇文章：细究内联元素（你一定不知道的东西）（同样的以后再上链接。）

更新情况

2017.12.03 第一版
2017.12.03 第二版，修改排版，修改一些重要理解，增加新的探究。
2017.12.15 第三版，修改排版，增加一些新的思索

GPU云服务器云服务器外边框合并 cdnjs合并的问题 html 盒子边框盒子模型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54510.html

CSS盒子模型以及外边框合并的问题

摘要：盒子模型我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子所以布局的万物基于盒子。虽然外边距是不可见的，但是我们算元素的总宽度或者总高度的时候，要加上外边距。盒子模型我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子......所以布局的万物基于盒子。即使一个小小的元素p，也可以把它抽象成为一个盒子...

paulli3 2019-08-29 14:03 评论0 收藏0
CSS学习（二）

摘要：学习二一三大模型之盒子模型盒子模型每个矩形元素都由元素的内容，内边距，边框，和外边距边框盒子的厚度，如手机包装盒的厚度内边距内容与边框之间的距离，如填充泡沫的厚度外边距与其他盒子的距离边框样式格式单实线用的最多虚线点线双实线边框综合写法写 CSS学习（二）一、CSS三大模型之盒子模型 1.盒子模型每个矩形元素都由元素的内容，内边距，边框，和外边距边框：盒子的厚度Border，如手...

Near_Li 2019-08-29 15:29 评论0 收藏0
css盒模型理解

摘要：盒模型概念盒子模型又称框模型，包含了元素内容内边距边框外边距几个要素。盒子垂直方向的距离由决定。属于同一个的两个相邻盒子垂直方向的会发生重叠。计算高度时，自然也会检测浮动的子盒子高度。总宽度总高度盒子设置的值其实是除外的的总宽度。 css盒模型概念 css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边...

xingqiba 2019-08-30 15:43 评论0 收藏0
前端基础入门二（CSS）

摘要：输入的时候少按一个键浏览器兼容问题比如使用的选择器命名，在是无效的能良好区分变量命名变量命名是用不要纯数字中文等命名，尽量使用英文字母来表示。选择器和类选择器最大的不同在于使用次数上。当需要设置英文字体时，英文字体名必须位于中文字体名之前。回顾上一节HTML 思维导图 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

Lorry_Lu 2019-08-30 15:55 评论0 收藏0
CSS 盒模型简介

摘要：左右和会起作用。外边距合并当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。一、盒子模型概述盒子模型是CSS的基石,指定标签如何显示；页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间,这个盒子由内容（content）、内边距（padding）、边框（border）和外边界（m...

netmou 2019-08-30 15:55 评论0 收藏0