CSS盒子模型

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

no_best_only_better

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

阅读量683

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/no_best_only_better/article/details/49707721

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

我们可以把盒子想象成一个容器，比如我们可以将html盒子想象成我们所生活的国家，而其中的body、head、p、div等盒子就可以可以把它想象成我们生活中各种各样的房子。正是由于生活中的各种各样的房子和物品使得我们的世界丰富多彩。margin相当于房子与房子之间的间隔，border就相当于房子的墙壁，将房子内的所有物品看成一个整体content, 而 padding就是物品与墙壁之间的间隔。

标准模式
这里写图片描述
如上图所示标准的盒子模型中width=content的宽，height=content的高。

IE模式
这里写图片描述
IE模式下：
width=content+横向的border+横向padding
width=content+纵向的border+纵向padding

CSS框模型概述

（1）当统一简写属性时顺序为：上(Top) 右(right) 下(buttom) 左(left)
如：

padding-top:  1px;
padding-right:  2px;
padding-buttom: 3px;
padding-left:  4px;
可简写为  padding：1px 2px 3px 4px;
margin-top:  1px;
margin-right:  2px;
margin-buttom:  3px;
margin-left:  4px;
可简写为  margin：1px 2px 3px 4px;
border-width , border-style ,border-color;
简写成  border：宽度(width)  样式(style)  颜色(color);

margin始终是透明的。margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin-bottom、margin-left。
外边距的 margin-width 的值类型有：auto | length | percentage。也可以使用简写的外边距属性同时改变所有的外边距：margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 记忆方式是元素周围正上方顺时针“上右下左”记忆。
并且规范还提供了省略的数值写法，基本如下：

如果margin只有一个值，表示上右下左的margin同为这个值。例如：margin:10px; 就等于 margin:10px 10px 10px 10px;

如果 margin 只有两个值，第一个值表示上下margin值，第二个值为左右margin的值。例如：margin:10px 20px; 就等于 margin:10px 20px 10px 20px;

如果margin有三个值，第一个值表示上margin值，第二个值表示左右margin的值，第三个值表示下margin的值。例如：margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;

如果margin有四个值，那这四个值分别对应上右下左这四个margin值。例如：margin:10px 20px 30px 40px;

在实际应用中，不推荐使用三个值的margin，一是容易记错，二是不容易日后修改，一开始如果写成margin:10px 20px 30px;日后需求改动为上10px，右30px，下30px，左20px，你不得不还是得把这个margin拆开为margin:10px 30px 30px 20px;费力且不讨好，不如一开始就老老实实的写成margin:10px 20px 30px 20px;来的实在，不要为了现在节省俩个字节而让日后再次开发的成本上升。

CSS内边距
 CSS外边距
 CSS边框

（2）CSS外边距合并的问题
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
（1)当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

这里写图片描述

亲自试一试

(2)当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

这里写图片描述
亲自试一试

(3)尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

这里写图片描述

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

这里写图片描述

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

(4)外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

这里写图片描述

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

实际工作中，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>垂直外边距合并</title>
<style>
.top{width:160px; height:50px; background:#ccf;}
.middle{width:160px; background:#cfc;}
.middle .firstChild{margin-top:20px;}
</style>
</head> 
<body>
<div class="top"></div>
<div class="middle">
  <div class="firstChild">我其实只是想和我的父元素隔开点距离。</div>
  <div class="secondChild"></div>
</div>
</body>
</html>

如果按照CSS规范，IE(IE6及以下)的“良好表现”其实是一个错误的表现，因为IE的hasLayout渲染导致了这个“表现良好”的外观。而其他标准浏览器则会表现出“有问题”的外观。好了，如果你读过了上面W3Shcool的CSS外边距合并的文章后，就很容易讨论这个问题了。这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。

对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。

一般说来这个问题解释到这里，大多数文章就不会再深入下去了，但作为一名实战开发者，最求的是知其然知其所以然，原本使用margin-top就是为了与父元素隔开距离，而按照你这么一个解法，其实是一种“修复”，为了“弥补修复”这个父子垂直外边距合并这个CSS规范“Bug”，而强制在父元素上使用border-top和padding-top，不舒服，也不容易记住，下次再发生这样的情况还是会忘记这条准则，而且在页面设计稿里如果不需要border-top加个上边框，这么一加反而画蛇添足，为以后修改留下隐患。

W3C外边距合并
 参考原文1
参考原文2