时间：2021-07-01 10:21:17 帮助过：21人阅读
URL: http://www.w3.org/TR/CSS2/box.html
Translator : HaoyCn
Date: 15th of Aug, 2015
译者注：本译文仅择精要部分翻译了规范，主要描述了盒模型结构，以及重点分析外边距折叠。个人水平有限，欢迎指正！
CSS盒模型所描述的矩形盒由文档树内的元素生成，根据视觉格式化模型布局。
每个盒都有一个内容区域 Content （如，文本，图片等）以及可选的围绕在周围的内边距、边框和外边距区域；每个区域的大小由本文后述的属性指定。下图展示了这些区域的关联以及用于描述外边距、边框和内边距的各部分的术语。
外边距、边框和内边距可以被分解到上、右、下、左各部分（如，在上图中， LM 表示左外边距， RP 表示右内边距， TB 表示上边框等）。
四种区域（内容、内边距、边框、外边距）的边界被称作一个“边缘 Edge ”，因此每个盒有四种边缘：
内容边缘 Content Edge 或内边缘 Inner Edge
内容边缘围绕着由盒的宽和高所指定的矩形，该矩形通常由元素的已渲染内容 Rendered Content 所决定。四个内容边缘规定了盒的内容盒 Content Box 。
内边距边缘
内边距边缘围绕着盒的内边距。如果内边距宽度为0，则内边距边缘即是内容边缘。四个内边距边缘规定了盒的内边距盒 Padding Box 。
边框边缘
边框边缘围绕着盒的边框。如果边框宽度为0，则边框边缘即是内边距边缘。四个边框边缘规定了盒的边框盒 Border Box 。
外边距边缘或外边缘
外边距边缘围绕着盒的外边距。如果外边距宽度为0，则外边距边缘即边框边缘。四个外边距边缘规定了盒的外边距盒 Margin Box 。
每个边缘都可以被分解成上、右、下、左边缘。
盒内容区域的尺寸??即内容宽度 Content Width 和内容高度 Content Width ??由这些因素所决定：生成盒的元素是否设置了 width 和 height 属性；盒是否包含了文本或其他盒；盒是否为表格；等等。盒的宽度和高度将在视觉格式化模型详述一章中讨论。
盒的内容、内边距以及边框区域的背景样式由生成盒的元素的 background 属性所规定。外边距的背景始终为透明。
下例展示了外边距、内边距和边框如何交互。HTML文档：
Examples of margins, padding, and borders<title><style type="text/css"> ul { background: yellow; margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; /* 未设置边框 */ } li { color: white;/* 文本颜色为白色 */ background: blue;/* 内容和内边距背景为蓝色 */ margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; /* 注意右内边距为0 */ list-style: none/* 列表前没有符号 */ /* 未设置边框 */ } li.withborder { border-style: dashed; border-width: medium;/* 各边均设置边框 */ border-color: lime; }</style></head><body> <ul> <li>First element of list</li> <li class="withborder">Second element of list is a bit longer to illustrate wrapping.</li> </ul></body></html></script></pre> <p>该文档</script></pre>结果为文档树中（省略其他关系）一个 ul 元素及其两个 li 子元素。</p> <p>下面的第一图展示了例子的结果。第二图展示了 ul 元素及其 li 子元素的外边距、内边距和边框之间的关系。（图片不成比例）</p> <p></p> <p>注意：</p> <ul> <li><p>每个 li 盒的内容宽度是从上到下计算的；所有 li 盒的包含块由 ul 元素创建。</p></li> <li><p>每个 li 盒的外边距盒高度由其内容高度加上上下内边距、边框、外边距所决定。需要留意的是 li 盒间的垂直外边距发生了折叠。</p></li> <li><p> li 盒的右内边距宽度被设为零（ padding 属性）。效果如第二图所示。</p></li> <li><p> li 盒的外边距是透明的??外边距总为透明??所以 ul 的内边距和内容区域的背景颜色（黄）穿透外边距显示了出来。</p></li> <li><p>第二个 li 元素指定了虚线边框（ border-style 属性）。</p></li> </ul> <h3>8.3 外边距各属性</h3> <p>外边距的各属性规定了盒的外边距区域的宽度。 margin 设置所有四个方向的外边距，而其他外边距属性则只设置各自方向宽度。这些属性应用于所有元素，但垂直外边距在非替代行内元素上无效。</p> <blockquote> <p>译者注：此处以及下文的各属性介绍均略，可查CSS手册</p> </blockquote> <h4>8.3.1 外边距折叠</h4> <p>在CSS中，两个及以上的（不一定是同胞）盒的相邻外边距可能合并为一个单独的外边距。以这种方式的合并的外边距被称为折叠 Collapse ，合并后的外边距被称为折叠外边距 Collapsed Margin 。</p> <p>相邻垂直外边距发生折叠，除了：</p> <ul> <li><p>根元素的盒的外边距不折叠</p></li> <li><p>如果一个有空隙的元素的上下外边距相邻，其外边距将同其后同胞的相邻外边距折叠，但不同父块的下外边距折叠。</p></li> </ul> <p>水平外边距不重叠。</p> <p>两个外边距为相邻关系，当且仅当：</p> <ul> <li><p>是同属一个块格式化上下文的文档流内块级盒</p></li> <li><p>没有行盒、空隙、内边距和边框分隔它们（注意某些零高度行盒会因此而被忽略（见9.4.2章））</p></li> <li><p>盒边缘垂直相邻，也就是说，满足以下形式之一：</p></li> <li><p>盒上外边距及其第一个文档流内子盒的上外边距</p></li> <li><p>盒下外边距及下一个文档流内的同胞盒的上外边距</p></li> <li><p>如果父盒的高度计算值为 auto ，其最后一个文档流内子盒的下外边距及父盒的下外边距</p></li> <li><p>如果一个盒不建立新的块格式化上下文、 min-height 计算值为零、 height 计算值为零或 auto 、没有在文档流内的子盒，其上下外边距</p></li> </ul> <p>如果一个折叠外边距与另一外边距的任何一边相邻，则视二者相邻。</p> <p>注意：不是同胞或祖先关系的元素也可以产生相邻外边距。</p> <p>注意：上述规则表明了：</p> <ul> <li><p>浮动盒的外边距不同其他任何盒折叠（甚至浮动及其文档流内的子元素也不折叠）</p></li> <li><p>创建了新的块格式化上下文的元素（如浮动、 overflow 不为 visible 的元素）的外边距不同其在文档流内的子元素外边距折叠</p></li> <li><p>绝对定位盒的外边距不同其他任何盒折叠（甚至不同其文档流内的子元素折叠）</p></li> <li><p>行内块盒的外边距不同其他任何盒折叠（甚至不同其文档流内的子元素折叠）</p></li> <li><p>文档流内块级元素的下外边距始终同其下一个文档流内的块级同胞的上外边距折叠，除非该对同胞之间有空隙。</p></li> <li><p>文档流内块元素如果没有上边框和上内边距，其第一个文档流内块级子元素没有空隙，二者的上外边距折叠。</p></li> <li><p>文档流内 height 为 auto 、 min-height 为零、没有下内边距和下边框的块盒，如果其最后一个文档流内块级子盒的下外边距没有同一个有空隙的上外边距折叠，二者下外边距折叠。</p></li> <li><p>如果某盒的 min-height 属性为零、没有上下边框和上下内边距、其 height 为0或 auto 、没有包含行盒、其所有的文档流内子元素外边距（如果有）折叠，则折叠其外边距。</p></li> </ul> <p>当两个及以上外边距折叠，合并后的外边距宽度是发生折叠的外边距中的最大宽度。如果发生折叠的外边距中有负数，则为最大正数相邻外边距减去最小负数相邻外边距的绝对值。如果不存在正数外边距，则为零减去最小负数相邻外边距的绝对值。</p> <p>如果一个盒的上下外边距相邻，则外边距可能穿过盒而折叠 Collapse Through It 。这种情况下，元素的定位取决于它同其他外边距折叠的元素的关系。</p> <ul> <li><p>如果该元素的外边距同其父元素的上外边距折叠，则该盒的上边框边缘同其父元盒的上边框边缘相同。</p></li> <li><p>否则，要么该元素的父元素的外边距不折叠，要么只有父元素的下外边距折叠。如果该元素下边框非零，则上边框边缘的位置不变。</p></li> </ul> <p>需要注意的是，被折叠穿过的元素的定位对其他外边距折叠的元素的定位无影响；其上边框边缘的定位仅用于布局其后代元素。</p> <h3>8.6 双向上下文 Bidirectional Context 中行内元素的盒模型</h3> <p>对每个行盒而言，用户代理必须按视觉顺序（而非逻辑顺序）渲染其生成的行内盒的外边距、边框和内边距。</p> <p>当元素 direction 属性值为 ltr ，元素呈现的第一个行盒的最左生成盒拥有左外边距、左边框和左内边距，而元素呈现的最后一个行盒的最右生成盒拥有右内边距、右边框和右外边距。</p> <p>当元素 direction 属性值为 rtl ，元素呈现的第一个行盒的最右生成盒拥有右外边距、右边框和右内边距，而元素呈现的最后一个行盒的最左生成盒拥有左内边距、左边框和左外边距。</p> 译者之思 <p>译者读毕此文，细心揣摩，将经验和疑问总结如下：</p> <h3>一、两种盒模型</h3> <p>本章节描述了W3C的标准盒模型，同时还存在IE6在怪异模式 Quicks Mode 的另一种盒模型。此处简述二者的区别如下??</p> <p>W3C标准下：盒总宽/高度 = width/height + padding + border + margin</p> <p>怪异模式下：盒总宽/高度 = width/height + margin = 内容宽/高度 + padding + border + margin</p> <p>CSS3中， box-sizing 默认为 content-box ，即采用W3C标准盒模型，若取值 border-box 则采用怪异模式盒模型。</p> <h3>二、不透明的外边距</h3> <p>CSS规范道：</p> <blockquote> <p>盒的内容、内边距以及边框区域的背景样式由生成盒的元素的 background 属性所规定。外边距的背景始终为透明。</p> </blockquote> <p>但在根元素 html 上设置了外边距，并规定了背景，该背景仍铺满全屏。</p> <p>如下CSS：</p> <pre class="scode">html {margin: 50px;background: #000;}</script></pre> <p> body 同此理。译者暂不知其因。欢迎读者指教。</p> <h3>三、有空隙的元素</h3> <p>外边距折叠中，很多地方叙述了“有空隙的元素”，这是什么意思呢？其意义即是说，该元素清除了浮动。</p> <p>在翻译视觉格式化模型一章中，W3C给出了清除浮动以及计算空隙宽度的的案例，译者建议读者认真阅读该部分，尤其关注：当空隙为负值时取消外边距折叠的情形。</p> <p>点此阅读：http://segmentfault.com/a/1190000003096320。</p> <p>如果读者已经掌握清除浮动和空隙的知识，那就让我们来看一个有空隙的情景。</p> <p>> 如果一个有空隙的元素的上下外边距相邻，其外边距将同其后同胞的相邻外边距折叠，但不同父块的下外边距折叠。</p> <p>以下代码中， B 是浮动块，为清除其浮动， C 引入了空隙。</p> <p>共同CSS：</p> <pre class="scode">html,body{padding:0;margin:0;}/*横线，直观对比折叠情况*/.line{height:50px;background:red;} .mt{margin-top:50px;}.mb{margin-bottom:50px;}#B{float:left;width:1px;height:1px;}#C{clear:both;}</script></pre> <p><strong>其外边距将同其后同胞的相邻外边距折叠：</strong></p> <p>HTML：</p> <pre class="scode"><body> <div id="A"> <div id="B"></div> <div id="C" class="mb"></div> <div id="D" class="mb"></div> <div class="line"></div> </div> </body></script></pre> <p>渲染结果是， C 和 D 的外边距折叠。</p> <p><strong>不同父块的下外边距折叠</strong></p> <p>HTML：</p> <pre class="scode"> <body> <div id="A" class="mb"> <div id="B"></div> <div id="C" class="mb"></div> </div> <div class="line"></div> </body></script></pre> <p>渲染结果是， C 的外边距不同其父元素 A 的外边距折叠。</p> <h3>四、避免盒自身垂直外边距折叠</h3> <blockquote> <p>如果一个盒不建立新的块格式化上下文、 min-height 计算值为零、 height 计算值为零或 auto 、没有在文档流内的子盒，其上下外边距</p> </blockquote> <p>由此可以得出几种避免盒自身上下外边距折叠的办法，简单列举如下：</p> <li><p>建立新块格式化上下文，如 overflow: hidden </p></li> <li><p>设置 min-height </p></li> <li><p>设置固定高 height </p></li> <li><p>添加文档流内（即非浮动、非绝对定位）子盒</p></li> <p>需要注意最后一种办法，子盒要么有边框或内边距，要么有内容，否则父盒的自身垂直外边距同样会折叠。而如果子盒只有垂直外边距，该垂直外边距将同父盒的垂直外边距折叠，而不会阻止父盒自身垂直边距折叠。 </div> <div class=""> <ul class="m-news-opt fix"> <li class="opt-item"> <a href='/htmldaima-269808.html' target='_blank'><p>< 上一篇</p><p class="ellipsis">Semantic-UI和其他几个前端框架_html/css_WEB-ITnose</p></a> </li> <li class="opt-item ta-r"> <a href='/htmldaima-269810.html' target='_blank'><p>下一篇 ></p><p class="ellipsis">css水平居中那点事_html/css_WEB-ITnose</p></a> </li> </ul> </div> </div> </div> <div class="g-title fix"> <h2 class="title-txt">人气教程排行</h2> </div> <div class="m-rank u-dashed mb40"> <ul> <li class="rank-item"> <a href="/htmldaima-274978.html" title='如何生成一个调查问卷_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">230次</span> <span class="g-sort-num top">1</span> 如何生成一个调查问卷_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-274080.html" title='在页面直接显示日历_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">230次</span> <span class="g-sort-num second">2</span> 在页面直接显示日历_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-262106.html" title='如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">230次</span> <span class="g-sort-num third">3</span> 如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作 </a> </li> <li class="rank-item"> <a href="/htmldaima-278863.html" title='关于列表标记的详细介绍' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">229次</span> <span class="g-sort-num ">4</span> 关于列表标记的详细介绍 </a> </li> <li class="rank-item"> <a href="/htmldaima-277331.html" title='cssborder-bottom（指定下边线的样式、宽度及颜色）' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">229次</span> <span class="g-sort-num ">5</span> cssborder-bottom（指定下边线的样式、宽度及颜色） </a> </li> <li class="rank-item"> <a href="/htmldaima-270548.html" title='html新闻详情页_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">229次</span> <span class="g-sort-num ">6</span> html新闻详情页_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-268070.html" title='为何页面内容和网页边缘有空隙_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">229次</span> <span class="g-sort-num ">7</span> 为何页面内容和网页边缘有空隙_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-269054.html" title='position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">228次</span> <span class="g-sort-num ">8</span> position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-280863.html" title='htmlp标签怎么换行？htmlp标签添加br换行标签的应用' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">227次</span> <span class="g-sort-num ">9</span> htmlp标签怎么换行？htmlp标签添加br换行标签的应用 </a> </li> <li class="rank-item"> <a href="/htmldaima-281519.html" title='HTML的<!DOCTYPE>标签' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">10</span> HTML的<!DOCTYPE>标签 </a> </li> <li class="rank-item"> <a href="/htmldaima-280725.html" title='html页面中友情链接怎么进行添加设置？（代码示例）' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">11</span> html页面中友情链接怎么进行添加设置？（代码示例） </a> </li> <li class="rank-item"> <a href="/htmldaima-278651.html" title='form表单中属性及功能应用介绍汇总' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">12</span> form表单中属性及功能应用介绍汇总 </a> </li> <li class="rank-item"> <a href="/htmldaima-278586.html" title='详解form标签中的method属性' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">13</span> 详解form标签中的method属性 </a> </li> <li class="rank-item"> <a href="/htmldaima-277758.html" title='HTML5Canvas逼真烟雾效果js插件' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">14</span> HTML5Canvas逼真烟雾效果js插件 </a> </li> <li class="rank-item"> <a href="/htmldaima-275669.html" title='页面跳转特效_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">15</span> 页面跳转特效_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-271209.html" title='改变鼠标选中区域的样式。_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">16</span> 改变鼠标选中区域的样式。_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-273428.html" title='关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">225次</span> <span class="g-sort-num ">17</span> 关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-271182.html" title='CSS3悬浮动画效果_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">225次</span> <span class="g-sort-num ">18</span> CSS3悬浮动画效果_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-271093.html" title='纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">225次</span> <span class="g-sort-num ">19</span> 纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-267953.html" title='body在默认情况下是具有margin外边距的_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">225次</span> <span class="g-sort-num ">20</span> body在默认情况下是具有margin外边距的_html/css_WEB-ITnose </a> </li> </ul> </div> </div> </div> <!-- / 教程内容页 --> </div> </div> <!-- 页尾 --> <div class="footer"> 本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！</div> <!-- / 页尾 --> <script type="text/javascript" src="/kan/js/read.js"></script> <div style="display:none"> <div class="login-box" id="login-dialog"> <div class="login-top"><a class="current" rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div> <div class="login-form" id="nav-signin"> <!-- <div class="login-ico"><a rel="nofollow" class="qq" id="qqlogin" target="_blank" href="/user-center-qqlogin.html"> QQ </a></div> --> <div class="login-box-form" id="con_login_1"> <form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;"> <p class="int-text"> <input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p> <p class="int-text"> <input class="password1" type="password" id="password" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" > </p> <p class="int-info"> <label class="ui-label"> </label> <label for="agreement" class="ui-label-checkbox"> <input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000"> <input type="hidden" name="notforward" id="notforward" value="1"> <input type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label> <a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p> <p class="int-btn"><a rel="nofollow" id="loginbt" class="loginbtn"><span>登录</span></a></p> </form> </div> <form id="regform" action="/user-center-reg.html" method="post"> <div class="login-reg" style="display: none;" id="con_login_2"> <input type="hidden" name="t" id="t"/> <p class="int-text"> <input id="email" name="email" type="text" value="Email" onfocus="if(this.value=='Email'){this.value='';}" onblur="if(this.value==''){this.value='Email';};"></p> <p class="int-text"> <input id="uname" name="username" type="text" value="用户名或昵称" onfocus="if(this.value=='用户名或昵称'){this.value='';}" onblur="if(this.value==''){this.value='用户名或昵称';};"></p> <p class="int-text"> <input type="password" id="pwd" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';"> </p> <p class="int-text1"><span class="inputbox"> <input id="validate" name="validate" type="text" value="验证码" onfocus="if(this.value=='验证码'){this.value='';}" onblur="if(this.value==''){this.value='验证码';};"> </span><span class="yzm-img"><img src="/user-checkcode-index" alt="看不清楚换一张" id="indexlogin"></p> <p class="int-info"> <label> <input value="" name="agreement" id="agreement" CHECKED="checked" type="checkbox"> 我已阅读<a rel="nofollow" href="/user-center-agreement.html">用户协议</a>及<a rel="nofollow" href="/user-center-agreement.html">版权声明</a></label> </p> <p class="int-btn"><input type="hidden" name="dosubmit"/> <a rel="nofollow" class="loginbtn" id="register"><span>注册</span></a></p> </div> </form> </div> </div> </div> </div> <script type="text/javascript" src="/kan/js/foot_js.js"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6dc1c3c5281cf70f49bc0bc860ec24f2"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript" src="/layui/layui.js"></script> <script> layui.use('code', function() { layui.code({ elem: 'pre', //默认值为.layui-code about: false, skin: 'notepad', title: 'php怎么实现数据库验证跳转代码块', encode: true //是否转义html标签。默认不开启 }); }); </script> </body> </html>