摘要：当两个及以上外边距折叠，合并后的外边距宽度是发生折叠的外边距中的最大宽度。如果该元素的外边距同其父元素的上外边距折叠，则该盒的上边框边缘同其父元盒的上边框边缘相同。
2017-07-20: 关于外边距折叠, 推荐问题: https://segmentfault.com/q/10...
8 盒模型 Box ModelURL: http://www.w3.org/TR/CSS2/box...
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></pre> <p>该文档结果为文档树中（省略其他关系）一个 <b> ul </b> 元素及其两个 <b> li </b> 子元素。</p> <p>下面的第一图展示了例子的结果。第二图展示了 <b> ul </b> 元素及其 <b> li </b> 子元素的外边距、内边距和边框之间的关系。（图片不成比例）</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/bVnan5");</script></p> <p>注意：</p> <p><p>每个 <b> li </b> 盒的内容宽度是从上到下计算的；所有 <b> li </b> 盒的包含块由 <b> ul </b> 元素创建。</p></p> <p><p>每个 <b> li </b> 盒的外边距盒高度由其内容高度加上上下内边距、边框、外边距所决定。需要留意的是 <b> li </b> 盒间的垂直外边距发生了折叠。</p></p> <p><p><b> li </b> 盒的右内边距宽度被设为零（ <b> padding </b> 属性）。效果如第二图所示。</p></p> <p><p><b> li </b> 盒的外边距是透明的——外边距总为透明——所以 <b> ul </b> 的内边距和内容区域的背景颜色（黄）穿透外边距显示了出来。</p></p> <p><p>第二个 <b> li </b> 元素指定了虚线边框（ <b> border-style </b> 属性）。</p></p> <b>8.3 外边距各属性</b> <p>外边距的各属性规定了盒的外边距区域的宽度。 <b> margin </b> 设置所有四个方向的外边距，而其他外边距属性则只设置各自方向宽度。这些属性应用于所有元素，但垂直外边距在非替代行内元素上无效。</p> <pre><p>译者注：此处以及下文的各属性介绍均略，可查CSS手册</p></pre> <b>8.3.1 外边距折叠</b> <p>在CSS中，两个及以上的（不一定是同胞）盒的相邻外边距可能合并为一个多带带的外边距。以这种方式的合并的外边距被称为折叠 <b> Collapse </b> ，合并后的外边距被称为折叠外边距 <b> Collapsed Margin </b> 。</p> <p>相邻垂直外边距发生折叠，除了：</p> <p><p>根元素的盒的外边距不折叠</p></p> <p><p>如果一个有空隙的元素的上下外边距相邻，其外边距将同其后同胞的相邻外边距折叠，但不同父块的下外边距折叠。</p></p> <p>水平外边距不重叠。</p> <p>两个外边距为相邻关系，当且仅当：</p> <p><p>是同属一个块格式化上下文的文档流内块级盒</p></p> <p><p>没有行盒、空隙、内边距和边框分隔它们（注意某些零高度行盒会因此而被忽略（见9.4.2章））</p></p> <p><p>盒边缘垂直相邻，也就是说，满足以下形式之一：</p></p> <p><p>盒上外边距及其第一个文档流内子盒的上外边距</p></p> <p><p>盒下外边距及下一个文档流内的同胞盒的上外边距</p></p> <p><p>如果父盒的高度计算值为 <b> auto </b> ，其最后一个文档流内子盒的下外边距及父盒的下外边距</p></p> <p><p>如果一个盒不建立新的块格式化上下文、 <b> min-height </b> 计算值为零、 <b> height </b> 计算值为零或 <b> auto </b> 、没有在文档流内的子盒，其上下外边距</p></p> <p>如果一个折叠外边距与另一外边距的任何一边相邻，则视二者相邻。</p> <p>注意：不是同胞或祖先关系的元素也可以产生相邻外边距。</p> <p>注意：上述规则表明了：</p> <p><p>浮动盒的外边距不同其他任何盒折叠（甚至浮动及其文档流内的子元素也不折叠）</p></p> <p><p>创建了新的块格式化上下文的元素（如浮动、 <b> overflow </b> 不为 <b> visible </b> 的元素）的外边距不同其在文档流内的子元素外边距折叠</p></p> <p><p>绝对定位盒的外边距不同其他任何盒折叠（甚至不同其文档流内的子元素折叠）</p></p> <p><p>行内块盒的外边距不同其他任何盒折叠（甚至不同其文档流内的子元素折叠）</p></p> <p><p>文档流内块级元素的下外边距始终同其下一个文档流内的块级同胞的上外边距折叠，除非该对同胞之间有空隙。</p></p> <p><p>文档流内块元素如果没有上边框和上内边距，其第一个文档流内块级子元素没有空隙，二者的上外边距折叠。</p></p> <p><p>文档流内 <b> height </b> 为 <b> auto </b> 、 <b> min-height </b> 为零、没有下内边距和下边框的块盒，如果其最后一个文档流内块级子盒的下外边距没有同一个有空隙的上外边距折叠，二者下外边距折叠。</p></p> <p><p>如果某盒的 <b> min-height </b> 属性为零、没有上下边框和上下内边距、其 <b> height </b> 为0或 <b> auto </b> 、没有包含行盒、其所有的文档流内子元素外边距（如果有）折叠，则折叠其外边距。</p></p> <p>当两个及以上外边距折叠，合并后的外边距宽度是发生折叠的外边距中的最大宽度。如果发生折叠的外边距中有负数，则为最大正数相邻外边距减去最小负数相邻外边距的绝对值。如果不存在正数外边距，则为零减去最小负数相邻外边距的绝对值。</p> <p>如果一个盒的上下外边距相邻，则外边距可能穿过盒而折叠 <b> Collapse Through It </b> 。这种情况下，元素的定位取决于它同其他外边距折叠的元素的关系。</p> <p><p>如果该元素的外边距同其父元素的上外边距折叠，则该盒的上边框边缘同其父元盒的上边框边缘相同。</p></p> <p><p>否则，要么该元素的父元素的外边距不折叠，要么只有父元素的下外边距折叠。上边框边缘位置是假定该元素下边框非零时的位置。</p></p> <p>需要注意的是，被折叠穿过的元素的定位对与之外边距折叠的其他元素的定位无影响；其上边框边缘的定位仅用于布局其后代元素。</p> <b>8.6 双向上下文 Bidirectional Context 中行内元素的盒模型</b> <p>对每个行盒而言，用户代理必须按视觉顺序（而非逻辑顺序）渲染其生成的行内盒的外边距、边框和内边距。</p> <p>当元素 <b> direction </b> 属性值为 <b> ltr </b> ，元素呈现的第一个行盒的最左生成盒拥有左外边距、左边框和左内边距，而元素呈现的最后一个行盒的最右生成盒拥有右内边距、右边框和右外边距。</p> <p>当元素 <b> direction </b> 属性值为 <b> rtl </b> ，元素呈现的第一个行盒的最右生成盒拥有右外边距、右边框和右内边距，而元素呈现的最后一个行盒的最左生成盒拥有左内边距、左边框和左外边距。</p> <b>译者之思</b> <p>译者读毕此文，细心揣摩，将经验和疑问总结如下：</p> <b>一、两种盒模型</b> <p>本章节描述了W3C的标准盒模型，同时还存在IE6在怪异模式 <b> Quicks Mode </b> 的另一种盒模型。此处简述二者的区别如下——</p> <p>W3C标准下：盒总宽/高度 = width/height + padding + border + margin</p> <p>怪异模式下：盒总宽/高度 = width/height + margin = 内容宽/高度 + padding + border + margin</p> <p>CSS3中， <b> box-sizing </b> 默认为 <b> content-box </b> ，即采用W3C标准盒模型，若取值 <b> border-box </b> 则采用怪异模式盒模型。</p> <b>二、不透明的外边距</b> <p>CSS规范道：</p> <pre><p>盒的内容、内边距以及边框区域的背景样式由生成盒的元素的 <b> background </b> 属性所规定。外边距的背景始终为透明。</p></pre> <p>但在根元素 <b> html </b> 上设置了外边距，并规定了背景，该背景仍铺满全屏。</p> <p>如下CSS：</p> <pre>html { margin: 50px; background: #000; }</pre> <p><b> body </b> 同此理。译者暂不知其因。欢迎读者指教。</p> <b>三、有空隙的元素</b> <p>外边距折叠中，很多地方叙述了“有空隙的元素”，这是什么意思呢？其意义即是说，该元素清除了浮动。</p> <p>在翻译视觉格式化模型一章中，W3C给出了清除浮动以及计算空隙宽度的的案例，译者建议读者认真阅读该部分，尤其关注：当空隙为负值时取消外边距折叠的情形。</p> <p>点此阅读：http://segmentfault.com/a/119...。</p> <p>如果读者已经掌握清除浮动和空隙的知识，那就让我们来看一个有空隙的情景。</p> <pre><p>如果一个有空隙的元素的上下外边距相邻，其外边距将同其后同胞的相邻外边距折叠，但不同父块的下外边距折叠。</p></pre> <p>以下代码中， <b> B </b> 是浮动块，为清除其浮动， <b> C </b> 引入了空隙。</p> <p>共同CSS：</p> <pre>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;}</pre> <p><strong>其外边距将同其后同胞的相邻外边距折叠：</strong></p> <p>HTML：</p> <pre><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></pre> <p>渲染结果是， <b> C </b> 和 <b> D </b> 的外边距折叠。</p> <p><strong>不同父块的下外边距折叠</strong></p> <p>HTML：</p> <pre> <body> <div id="A" class="mb"> <div id="B"></div> <div id="C" class="mb"></div> </div> <div class="line"></div> </body></pre> <p>渲染结果是， <b> C </b> 的外边距不同其父元素 <b> A </b> 的外边距折叠。</p> <b>四、避免盒自身垂直外边距折叠</b> <pre><p>如果一个盒不建立新的块格式化上下文、 <b> min-height </b> 计算值为零、 <b> height </b> 计算值为零或 <b> auto </b> 、没有在文档流内的子盒，其上下外边距</p></pre> <p>由此可以得出几种避免盒自身上下外边距折叠的办法，简单列举如下：</p> <p><p>建立新块格式化上下文，如 <b> overflow: hidden </b></p></p> <p><p>设置 <b> min-height </b></p></p> <p><p>设置固定高 <b> height </b></p></p> <p><p>添加文档流内（即非浮动、非绝对定位）子盒</p></p> <p>需要注意最后一种办法，子盒要么有边框或内边距，要么有内容，否则父盒的自身垂直外边距同样会折叠。而如果子盒只有垂直外边距，该垂直外边距将同父盒的垂直外边距折叠，而不会阻止父盒自身垂直边距折叠。</p> </div> <div class="mt-64 tags-seach" > <div class="tags-info"> <a style="width:120px;" title="云服务器" href="https://www.ucloud.cn/site/product/uhost.html">云服务器</a> <a style="width:120px;" title="idc机房托管" href="https://www.ucloud.cn/site/product/uxzone.html">idc机房托管</a> <a style="width:120px;" title="模型Model" href="https://www.ucloud.cn/yun/tag/moxingModel/">模型Model</a> <a style="width:120px;" title="盒模型" href="https://www.ucloud.cn/yun/tag/hemoxing/">盒模型</a> <a style="width:120px;" title="盒模型html吗" href="https://www.ucloud.cn/yun/tag/hemoxinghtmlma/">盒模型html吗</a> <a style="width:120px;" title="简述html盒模型" href="https://www.ucloud.cn/yun/tag/jianshuhtmlhemoxing/">简述html盒模型</a> </div> </div> <div class="entry-copyright mb-30"> <p class="mb-15"> 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。</p> <p>转载请注明本文地址：https://www.ucloud.cn/yun/111117.html</p> </div> <ul class="pre-next-page"> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/111116.html">上一篇：用 CSS 实现三角形与平行四边形</a></li> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/111118.html">下一篇：[译]如何成为一个优秀的前端工程师</a></li> </ul> </div> <div class="about_topicone-mid"> <h3 class="top-com-title mb-0"><span data-id="0">相关文章</span></h3> <ul class="com_white-left-mid atricle-list-box"> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/111120.html"><b><em>CSS</em><em>规范</em> &<em>gt</em>; 9 视觉格式化<em>模型</em> Visual Formatting <em>Model</em></b></a></h2> <p class="ellipsis2 good">摘要：盒的类型会影响其在视觉格式化模型中的表现。浮动元素绝对定位元素根元素都被称为脱离文档流其他元素被称为文档流内。 视觉格式化模型 Visual Formatting Model URL：http://www.w3.org/TR/CSS2/visuren.html Translator: HaoyCn Date: 14th of Aug, 2015 本文并未全部翻译，译者在原文基础上...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-10.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/00/small_000000010.jpg" alt=""><span class="layui-hide64">魏宪会</span></a> <time datetime="">2019-08-28 18:15</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/111155.html"><b><em>CSS</em><em>规范</em> &<em>gt</em>; 10 视觉格式化<em>模型</em>详述 Visual Formatting <em>Model</em> De</b></a></h2> <p class="ellipsis2 good">摘要：行盒的宽度由其包含块给予，但可能因浮动而缩小。绝对定位不可替换元素的使用值约束为包含块宽度如果和均为首先将以及值为的设为。 2015/10/08： 原10.8标题 行盒高度计算改为10.8 行高计算。英文原文为line height。由于翻译时候看到那段结论是行盒的高度，脑抽就把原本翻译对的标题改了下，刚回顾一番深觉不妥，故改回来。 原文：http://www.w3.org/TR/CS...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1047.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/10/small_000001047.jpg" alt=""><span class="layui-hide64">frolc</span></a> <time datetime="">2019-08-28 18:18</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/111152.html"><b><em>CSS</em> &<em>gt</em>; <em>CSS</em>3 中的层叠上下文初探</b></a></h2> <p class="ellipsis2 good">摘要：但该盒不建立新的层叠上下文，除非是根元素。以上是基于的层叠上下文介绍。同级情况下，按照二者在源代码中的顺序，居后的又重新占领高地了。现在我们看以下源代码这个时候，以视口为包含块进行定位和大小计算，将会铺满整个屏幕。 前言：关于层叠上下文，笔者还没有去阅读更详细的 W3C 规范来了解更本质的原理（表打我，等我校招拿到 offer 了我就读好伐 T_T）。一直听说 CSS3 里的层叠上下文...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-394.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/03/small_000000394.jpg" alt=""><span class="layui-hide64">pcChao</span></a> <time datetime="">2019-08-28 18:18</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/115708.html"><b><em>CSS</em>中各种布局的背后(*FC)</b></a></h2> <p class="ellipsis2 good">摘要：中各种布局的背后，实质上是各种的组合。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。描述元素跟它的后代之间的影响。行盒行盒由行内格式化上下文产生的盒，用于表示一行。弹性容器外和弹性项目内的一切元素都不受影响。 CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。 盒模型(Box M...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1220.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/12/small_000001220.jpg" alt=""><span class="layui-hide64">miracledan</span></a> <time datetime="">2019-08-30 14:01</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/116548.html"><b>视觉格式化<em>模型</em>(Visual formatting <em>model</em>)</b></a></h2> <p class="ellipsis2 good">摘要：块级盒参与块格式化上下文。行内级盒参与行内格式化上下文块格式化上下文行内格式化上下文相对定位浮动盒就是一个在当前行向左或向右移动的盒。浮动绝对定位绝对定位模型中，一个盒会有相对于其包含块的明确偏移，它会从常规流中全部移除不会影响后面的兄弟。 在可视化格式模型(Visual formatting model)当中,文档树中的每个元素根据其盒模型生成0个或多个盒.这些盒的布局由(以下因素)...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1375.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/13/small_000001375.jpg" alt=""><span class="layui-hide64">jokester</span></a> <time datetime="">2019-08-30 15:53</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> </ul> </div> <div class="topicone-box-wangeditor"> <h3 class="top-com-title mb-64"><span>发表评论</span></h3> <div class="xcp-publish-main flex_box_zd"> <div class="unlogin-pinglun-box"> <a href="javascript:login()" class="grad">登陆后可评论</a> </div> </div> </div> <div class="site-box-content"> <div class="site-content-title"> <h3 class="top-com-title mb-64"><span>0条评论</span></h3> </div> <div class="pages"></ul></div> </div> </div> <div class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right"> <div class=""> <div class="com_layuiright-box user-msgbox"> <a href="https://www.ucloud.cn/yun/u-567.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/05/small_000000567.jpg" alt=""></a> <h3><a href="https://www.ucloud.cn/yun/u-567.html" rel="nofollow">suemi</a></h3> <h6>男<span>|</span>高级讲师</h6> <div class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(567)" id="attenttouser_567" class="grad follow-btn notfollow attention">我要关注</a> <a href="javascript:login()" title="发私信" >我要私信</a> </div> <div class="user-msgbox-list flex_box_zd"> <h3 class="hpf">TA的文章</h3> <a href="https://www.ucloud.cn/yun/ut-567.html" class="box_hxjz">阅读更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/124947.html">奈学百万云原生架构师</a></h3> <p>阅读 2397<span>·</span>2021-11-25 09:43</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/122862.html">ZJI：双十一，自营服务器/阿里云专线服务器全部55折优惠，月付412元起，999元可获得1100元</a></h3> <p>阅读 2504<span>·</span>2021-11-04 16:09</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/122338.html">2021年9月国产数据库大事记</a></h3> <p>阅读 1470<span>·</span>2021-10-12 10:13</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/121556.html">前端技术栈月刊 ???? 2021-09</a></h3> <p>阅读 789<span>·</span>2021-09-29 09:35</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/117911.html">NextArray：美国达拉斯VPS/2核1G/20GB SSD或者100GB HDD/100Mbp</a></h3> <p>阅读 760<span>·</span>2021-08-03 14:03</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/117389.html">CSS实用技巧</a></h3> <p>阅读 1586<span>·</span>2019-08-30 15:55</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/111117.html">CSS规范 > 8 盒模型 Box Model</a></h3> <p>阅读 2864<span>·</span>2019-08-28 18:14</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/109395.html">前端培训-初级阶段（13） - 正则表达式</a></h3> <p>阅读 3357<span>·</span>2019-08-26 13:43</p></li> </ul> </div> <!-- 文章详情右侧广告--> <div class="com_layuiright-box"> <h6 class="top-com-title"><span>最新活动</span></h6> <div class="com_adbox"> <div class="layui-carousel" id="right-item"> <div carousel-item> <div> <a href="https://www.ucloud.cn/site/product/uhost.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220620/Z7TLrpAi.png" alt="云服务器"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/uhybrid.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220620/MWraMsBh.png" alt="混合云"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/ucloudstack.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220620/ifzOxvjW.png" alt="私有云"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/utrion.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220620/VDqwC1iN.png" alt="超融合服务器"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/uhybrid.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220630/pJwnviKN.png" alt="服务器托管"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/uxzone.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220630/CDb5uXxp.jpeg" alt="idc机房托管"> </a> </div> <div> <a href="https://www.ucloud.cn/site/active/network.html?ytag=seo" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/230227/XWsSXmvm.png" alt="专线服务"> </a> </div> </div> </div> </div> <!-- banner结束 --> <div class="adhtml"> </div> <script> $(function(){ $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/ad/getad/1.html", cache: false, success: function(text){ $(".adhtml").html(text); } }); }) </script> </div> </div> </div> </div> </div> </section> <!-- wap拉出按钮 --> <div class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div> <!-- wap遮罩层 --> <div class="site-mobile-shade"></div> <!--付费阅读 --> <div id="payread"> <div class="layui-form-item">阅读需要支付1元查看</div> <div class="layui-form-item"><button class="btn-right">支付并查看</button></div> </div> <script> var prei=0; $(".site-seo-depict pre").each(function(){ var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">',''); $(this).attr('data-clipboard-text',html).attr("id","pre"+prei); $(this).html("").append("<code>"+html+"</code>"); prei++; }) $(".site-seo-depict img").each(function(){ if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){ $(this).remove(); } }) $("LINK[href*='style-49037e4d27.css']").remove(); $("LINK[href*='markdown_views-d7a94ec6ab.css']").remove(); layui.use(['jquery', 'layer','code'], function(){ $("pre").attr("class","layui-code"); $("pre").attr("lay-title",""); $("pre").attr("lay-skin",""); layui.code(); $(".layui-code-h3 a").attr("class","copycode").html("复制代码 ").attr("onclick","copycode(this)"); }); function copycode(target){ var id=$(target).parent().parent().attr("id"); var clipboard = new ClipboardJS("#"+id); clipboard.on('success', function(e) { e.clearSelection(); alert("复制成功") }); clipboard.on('error', function(e) { alert("复制失败") }); } //$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5)); </script> <link rel="stylesheet" type="text/css" href="https://www.ucloud.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css"> <script src="https://www.ucloud.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script> <script src="https://www.ucloud.cn/yun/static/js/clipboard.js"></script> <script>hljs.initHighlightingOnLoad();</script> <script> function setcode(){ var _html=''; document.querySelectorAll('pre code').forEach((block) => { var _tmptext=$.trim($(block).text()); if(_tmptext!=''){ _html=_html+_tmptext; console.log(_html); } }); } </script> <script> function payread(){ layer.open({ type: 1, title:"付费阅读", shadeClose: true, content: $('#payread') }); } // 举报 function jupao_tip(){ layer.open({ type: 1, title:false, shadeClose: true, content: $('#jubao') }); } $(".getcommentlist").click(function(){ var _id=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); $("#articlecommentlist"+_id).toggleClass("hide"); var flag=$("#articlecommentlist"+_id).attr("dataflag"); if(flag==1){ flag=0; }else{ flag=1; //加载评论 loadarticlecommentlist(_id,_tid); } $("#articlecommentlist"+_id).attr("dataflag",flag); }) $(".add-comment-btn").click(function(){ var _id=$(this).attr("dataid"); $(".formcomment"+_id).toggleClass("hide"); }) $(".btn-sendartcomment").click(function(){ var _aid=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); var _content=$.trim($(".commenttext"+_aid).val()); if(_content==''){ alert("评论内容不能为空"); return false; } var touid=$("#btnsendcomment"+_aid).attr("touid"); if(touid==null){ touid=0; } addarticlecomment(_tid,_aid,_content,touid); }) $(".button_agree").click(function(){ var supportobj = $(this); var tid = $(this).attr("id"); $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/index.php?topic/ajaxhassupport/" + tid, cache: false, success: function(hassupport){ if (hassupport != '1'){ $.ajax({ type: "GET", cache:false, url: "https://www.ucloud.cn/yun/index.php?topic/ajaxaddsupport/" + tid, success: function(comments) { supportobj.find("span").html(comments+"人赞"); } }); }else{ alert("您已经赞过"); } } }); }); function attenquestion(_tid,_rs){ $.ajax({ //提交数据的类型 POST GET type:"POST", //提交的网址 url:"https://www.ucloud.cn/yun/favorite/topicadd.html", //提交的数据 data:{tid:_tid,rs:_rs}, //返回数据的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在请求之前调用的函数 beforeSend:function(){}, //成功返回之后调用的函数 success:function(data){ var data=eval("("+data+")"); console.log(data) if(data.code==2000){ layer.msg(data.msg,function(){ if(data.rs==1){ //取消收藏 $(".layui-layer-tips").attr("data-tips","收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>'); } if(data.rs==0){ //收藏成功 $(".layui-layer-tips").attr("data-tips","已收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart"></i>') } }) }else{ layer.msg(data.msg) } } , //调用执行后调用的函数 complete: function(XMLHttpRequest, textStatus){ postadopt=true; }, //调用出错执行的函数 error: function(){ //请求出错处理 postadopt=false; } }); } </script> <footer> <div class="layui-container"> <div class="flex_box_zd"> <div class="left-footer"> <h6><a href="https://www.ucloud.cn/"><img src="https://www.ucloud.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud （优刻得科技股份有限公司）"></a></h6> <p>UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。</p> </div> <div class="right-footer layui-hidemd"> <ul class="flex_box_zd"> <li> <h6>UCloud与云服务</h6> <p><a href="https://www.ucloud.cn/site/about/intro/">公司介绍</a></p> <p><a href="https://zhaopin.ucloud.cn/" >加入我们</a></p> <p><a href="https://www.ucloud.cn/site/ucan/onlineclass/">UCan线上公开课</a></p> <p><a href="https://www.ucloud.cn/site/solutions.html" >行业解决方案</a></p> <p><a href="https://www.ucloud.cn/site/pro-notice/">产品动态</a></p> </li> <li> <h6>友情链接</h6> <p><a href="https://www.compshare.cn/?ytag=seo">GPU算力平台</a></p> <p><a href="https://www.ucloudstack.com/?ytag=seo">UCloud私有云</a></p> <p><a href="https://www.surfercloud.com/">SurferCloud</a></p> <p><a href="https://www.uwin-link.com/">工厂仿真软件</a></p> <p><a href="https://pinex.it/">Pinex</a></p> <p><a href="https://www.picpik.ai/zh">AI绘画</a></p> </li> <li> <h6>社区栏目</h6> <p><a href="https://www.ucloud.cn/yun/column/index.html">专栏文章</a></p> <p><a href="https://www.ucloud.cn/yun/udata/">专题地图</a></p> </li> <li> <h6>常见问题</h6> <p><a href="https://www.ucloud.cn/site/ucsafe/notice.html" >安全中心</a></p> <p><a href="https://www.ucloud.cn/site/about/news/recent/" >新闻动态</a></p> <p><a href="https://www.ucloud.cn/site/about/news/report/">媒体动态</a></p> <p><a href="https://www.ucloud.cn/site/cases.html">客户案例</a></p> <p><a href="https://www.ucloud.cn/site/notice/">公告</a></p> </li> <li> <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="优刻得"></span> <p>扫扫了解更多</p></div> </div> <div class="copyright">Copyright © 2012-2023 UCloud 优刻得科技股份有限公司<i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/">沪公网安备 31011002000058号</a><i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/"></a> 沪ICP备12020087号-3</a><i>｜</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DZSMXQ3P9N'); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script></div> </div> </footer> </body> <script src="https://www.ucloud.cn/yun/static/theme/ukd/js/common.js"></script> <<script type="text/javascript"> $(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%"); </script> </html>