CSS规范>8盒模型BoxModel_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS规范>8盒模型BoxModel_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9922字，纯文字阅读大概需要15分钟。
内容图文
8 盒模型 Box Model URL: http://www.w3.org/TR/CSS2/box.html
Translator : HaoyCn
Date: 15th of Aug, 2015
译者注：本译文仅择精要部分翻译了规范，主要描述了盒模型结构，以及重点分析外边距折叠。个人水平有限，欢迎指正！
CSS盒模型所描述的矩形盒由文档树内的元素生成，根据视觉格式化模型布局。
8.1 盒尺寸 Box Dimensions
每个盒都有一个内容区域 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 属性所规定。外边距的背景始终为透明。
8.2 外边距、内边距和边框的例子
下例展示了外边距、内边距和边框如何交互。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>需要注意最后一种办法，子盒要么有边框或内边距，要么有内容，否则父盒的自身垂直外边距同样会折叠。而如果子盒只有垂直外边距，该垂直外边距将同父盒的垂直外边距折叠，而不会阻止父盒自身垂直边距折叠。<a href="http://www.laitingfm.com" /></a> <a href="https://curl.qcloud.com/kfoLTs9R" /></a> </article> </div> <div class="w310 r"> <a href="https://www.gxlcms.com/server-467421.html" target="_blank"> <img src="http://www.gxlcms.com/Public/aiod/ts.jpg" /></a> <div class="book"> <a href="http://www.gxlcms.com/special/html/" target="_blank" title="html代码教程/参考手册"> <img src="https://img.gxlcms.com/" alt="html代码教程/参考手册" /> <h3>html代码教程/参考手册</h3> </a> </div> <div class="youclmt"> <h3>html代码热搜</h3> </div> <div class="langmubt"> <ul> <li><a href="/htmldaima-351565.html" target="_blank">关于type="file"的input框样式修改小结</a></li><li><a href="/htmldaima-351559.html" target="_blank">HTMLcellpadding与cellspacing属性图文详解</a></li><li><a href="/htmldaima-351555.html" target="_blank">详解HTML编程的标记与文档结构</a></li><li><a href="/htmldaima-351550.html" target="_blank">用DIV遮罩解决鼠标直接勾选checkbox无效的问题</a></li><li><a href="/htmldaima-351547.html" target="_blank">在网页上调用桌面exe程序的简单方法</a></li><li><a href="/htmldaima-351545.html" target="_blank">html借助marquee实现文字左右滚动</a></li><li><a href="/htmldaima-351540.html" target="_blank">关于分割线hr在各浏览器中的差异</a></li><li><a href="/htmldaima-351537.html" target="_blank">a标签的target链接指向iframe的方法</a></li><li><a href="/htmldaima-351533.html" target="_blank">使用overflow:hidden来禁用页面滚动条</a></li><li><a href="/htmldaima-351531.html" target="_blank">使用SWFObject完美解决HTML插入Flash的各浏览器兼容性方案</a></li><li><a href="/htmldaima-351530.html" target="_blank">如何使用图片按钮作为重置(reset)表单按钮</a></li><li><a href="/htmldaima-351528.html" target="_blank">超链接的宽度和高度直接设置不起作用的解决方法</a></li><li><a href="/htmldaima-351525.html" target="_blank">textarea的disabled与readonly属性具体用法介绍</a></li><li><a href="/htmldaima-351521.html" target="_blank">空格在Html中如何表示( 有什么含义)</a></li><li><a href="/htmldaima-351515.html" target="_blank">在js或css后加?v=版本号不让浏览器缓存</a></li><li><a href="/htmldaima-351514.html" target="_blank">块级元素和内联元素及可变元素汇总</a></li><li><a href="/htmldaima-351513.html" target="_blank">HTML的结束标签问题与w3c标准</a></li><li><a href="/htmldaima-351512.html" target="_blank">iframe框架在IE浏览器下将白色背景设为透明色</a></li><li><a href="/htmldaima-351511.html" target="_blank">AdobeBrackets简单使用图文教程</a></li><li><a href="/htmldaima-351505.html" target="_blank">如何去除表单的回车即提交即回车!=提交</a></li><li><a href="/htmldaima-351495.html" target="_blank">Readonly和Disabled之间的微小区别详解</a></li><li><a href="/htmldaima-351494.html" target="_blank">如何设置select只读不可编辑且select的值可传递</a></li><li><a href="/htmldaima-351489.html" target="_blank">html中radio值的获取、赋值、注册事件示例详解</a></li><li><a href="/htmldaima-351482.html" target="_blank">textarea标签大小不可变不能通过鼠标拖动的方式来拖动</a></li><li><a href="/htmldaima-351481.html" target="_blank">HTML中select标签单选多选用法详解</a></li> </ul> </div> <a href="https://curl.qcloud.com/I8w1gZa8" target="_blank"> <img src="http://www.gxlcms.com/ad/tx500x500.jpg" /></a> </div> </div> </div> </div> <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: 'CSS规范>8盒模型BoxModel_html/css_WEB-ITnose代码块', encode: true //是否转义html标签。默认不开启 }); }); </script> <link rel="stylesheet" type="text/css" href="/kan/css/basezb.css"> <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="/?s=user-center-qqlogin.html"> QQ </a></div> --> <div class="login-box-form" id="con_login_1"> <form id="loginform" action="/?s=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="/?s=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="/?s=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="/?s=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="/?s=user-center-agreement.html">用户协议</a>及<a rel="nofollow" href="/?s=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> <div id="footer"> <div class="w1200"> <p class="tips_text">本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！ <a href="/?s=gb-show-p-1.html" title="合作方式" target="_blank">合作方式</a></p> <p class="tips_text">Copyright © 2004-2018 https://www.gxlcms.com/. All Rights Reserved.<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?afb4873a3fbaa95f710a04306bfb4a0b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <a href="http://beian.miit.gov.cn/" target="_blank">豫ICP备19030742号</a></p> </div> </div> <link rel="stylesheet" href="/Public/del/css/list.css"> </body> </html>
内容总结
以上是互联网集市为您收集整理的CSS规范>8盒模型BoxModel_html/css_WEB-ITnose全部内容，希望文章能够帮你解决CSS规范>8盒模型BoxModel_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】