資訊專欄INFORMATION COLUMN
摘要：當(dāng)兩個(gè)及以上外邊距折疊，合并后的外邊距寬度是發(fā)生折疊的外邊距中的最大寬度。如果該元素的外邊距同其父元素的上外邊距折疊，則該盒的上邊框邊緣同其父元盒的上邊框邊緣相同。
2017-07-20: 關(guān)于外邊距折疊, 推薦問題: https://segmentfault.com/q/10...
8 盒模型 Box ModelURL: http://www.w3.org/TR/CSS2/box...
Translator : HaoyCn
Date: 15th of Aug, 2015
譯者注：本譯文僅擇精要部分翻譯了規(guī)范，主要描述了盒模型結(jié)構(gòu)，以及重點(diǎn)分析外邊距折疊。個(gè)人水平有限，歡迎指正！
CSS盒模型所描述的矩形盒由文檔樹內(nèi)的元素生成，根據(jù)視覺格式化模型布局。
8.1 盒尺寸 Box Dimensions每個(gè)盒都有一個(gè)內(nèi)容區(qū)域 Content （如，文本，圖片等）以及可選的圍繞在周圍的內(nèi)邊距、邊框和外邊距區(qū)域；每個(gè)區(qū)域的大小由本文后述的屬性指定。下圖展示了這些區(qū)域的關(guān)聯(lián)以及用于描述外邊距、邊框和內(nèi)邊距的各部分的術(shù)語。
外邊距、邊框和內(nèi)邊距可以被分解到上、右、下、左各部分（如，在上圖中， LM 表示左外邊距， RP 表示右內(nèi)邊距， TB 表示上邊框等）。
四種區(qū)域（內(nèi)容、內(nèi)邊距、邊框、外邊距）的邊界被稱作一個(gè)“邊緣 Edge ”，因此每個(gè)盒有四種邊緣：
內(nèi)容邊緣 Content Edge 或內(nèi)邊緣 Inner Edge
內(nèi)容邊緣圍繞著由盒的寬和高所指定的矩形，該矩形通常由元素的已渲染內(nèi)容 Rendered Content 所決定。四個(gè)內(nèi)容邊緣規(guī)定了盒的內(nèi)容盒 Content Box 。
內(nèi)邊距邊緣
內(nèi)邊距邊緣圍繞著盒的內(nèi)邊距。如果內(nèi)邊距寬度為0，則內(nèi)邊距邊緣即是內(nèi)容邊緣。四個(gè)內(nèi)邊距邊緣規(guī)定了盒的內(nèi)邊距盒 Padding Box 。
邊框邊緣
邊框邊緣圍繞著盒的邊框。如果邊框?qū)挾葹?，則邊框邊緣即是內(nèi)邊距邊緣。四個(gè)邊框邊緣規(guī)定了盒的邊框盒 Border Box 。
外邊距邊緣或外邊緣
外邊距邊緣圍繞著盒的外邊距。如果外邊距寬度為0，則外邊距邊緣即邊框邊緣。四個(gè)外邊距邊緣規(guī)定了盒的外邊距盒 Margin Box 。
每個(gè)邊緣都可以被分解成上、右、下、左邊緣。
盒內(nèi)容區(qū)域的尺寸——即內(nèi)容寬度 Content Width 和內(nèi)容高度 Content Width ——由這些因素所決定：生成盒的元素是否設(shè)置了 width 和 height 屬性；盒是否包含了文本或其他盒；盒是否為表格；等等。盒的寬度和高度將在視覺格式化模型詳述一章中討論。
盒的內(nèi)容、內(nèi)邊距以及邊框區(qū)域的背景樣式由生成盒的元素的 background 屬性所規(guī)定。外邊距的背景始終為透明。
8.2 外邊距、內(nèi)邊距和邊框的例子下例展示了外邊距、內(nèi)邊距和邊框如何交互。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; /* 未設(shè)置邊框 */ } li { color: white;/* 文本顏色為白色 */ background: blue;/* 內(nèi)容和內(nèi)邊距背景為藍(lán)色 */ margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; /* 注意右內(nèi)邊距為0 */ list-style: none/* 列表前沒有符號(hào) */ /* 未設(shè)置邊框 */ } li.withborder { border-style: dashed; border-width: medium;/* 各邊均設(shè)置邊框 */ border-color: lime; } </style> </head> <body> <ul> <li>First element of list</li> <li id="6a22guqa" class="withborder">Second element of list is a bit longer to illustrate wrapping.</li> </ul> </body> </html></pre> <p>該文檔結(jié)果為文檔樹中（省略其他關(guān)系）一個(gè) <b> ul </b> 元素及其兩個(gè) <b> li </b> 子元素。</p> <p>下面的第一圖展示了例子的結(jié)果。第二圖展示了 <b> ul </b> 元素及其 <b> li </b> 子元素的外邊距、內(nèi)邊距和邊框之間的關(guān)系。（圖片不成比例）</p> <p></p> <p>注意：</p> <p><p>每個(gè) <b> li </b> 盒的內(nèi)容寬度是從上到下計(jì)算的；所有 <b> li </b> 盒的包含塊由 <b> ul </b> 元素創(chuàng)建。</p></p> <p><p>每個(gè) <b> li </b> 盒的外邊距盒高度由其內(nèi)容高度加上上下內(nèi)邊距、邊框、外邊距所決定。需要留意的是 <b> li </b> 盒間的垂直外邊距發(fā)生了折疊。</p></p> <p><p><b> li </b> 盒的右內(nèi)邊距寬度被設(shè)為零（ <b> padding </b> 屬性）。效果如第二圖所示。</p></p> <p><p><b> li </b> 盒的外邊距是透明的——外邊距總為透明——所以 <b> ul </b> 的內(nèi)邊距和內(nèi)容區(qū)域的背景顏色（黃）穿透外邊距顯示了出來。</p></p> <p><p>第二個(gè) <b> li </b> 元素指定了虛線邊框（ <b> border-style </b> 屬性）。</p></p> <b>8.3 外邊距各屬性</b> <p>外邊距的各屬性規(guī)定了盒的外邊距區(qū)域的寬度。 <b> margin </b> 設(shè)置所有四個(gè)方向的外邊距，而其他外邊距屬性則只設(shè)置各自方向?qū)挾?。這些屬性應(yīng)用于所有元素，但垂直外邊距在非替代行內(nèi)元素上無效。</p> <pre><p>譯者注：此處以及下文的各屬性介紹均略，可查CSS手冊(cè)</p></pre> <b>8.3.1 外邊距折疊</b> <p>在CSS中，兩個(gè)及以上的（不一定是同胞）盒的相鄰?fù)膺吘嗫赡芎喜橐粋€(gè)多帶帶的外邊距。以這種方式的合并的外邊距被稱為折疊 <b> Collapse </b> ，合并后的外邊距被稱為折疊外邊距 <b> Collapsed Margin </b> 。</p> <p>相鄰垂直外邊距發(fā)生折疊，除了：</p> <p><p>根元素的盒的外邊距不折疊</p></p> <p><p>如果一個(gè)有空隙的元素的上下外邊距相鄰，其外邊距將同其后同胞的相鄰?fù)膺吘嗾郫B，但不同父塊的下外邊距折疊。</p></p> <p>水平外邊距不重疊。</p> <p>兩個(gè)外邊距為相鄰關(guān)系，當(dāng)且僅當(dāng)：</p> <p><p>是同屬一個(gè)塊格式化上下文的文檔流內(nèi)塊級(jí)盒</p></p> <p><p>沒有行盒、空隙、內(nèi)邊距和邊框分隔它們（注意某些零高度行盒會(huì)因此而被忽略（見9.4.2章））</p></p> <p><p>盒邊緣垂直相鄰，也就是說，滿足以下形式之一：</p></p> <p><p>盒上外邊距及其第一個(gè)文檔流內(nèi)子盒的上外邊距</p></p> <p><p>盒下外邊距及下一個(gè)文檔流內(nèi)的同胞盒的上外邊距</p></p> <p><p>如果父盒的高度計(jì)算值為 <b> auto </b> ，其最后一個(gè)文檔流內(nèi)子盒的下外邊距及父盒的下外邊距</p></p> <p><p>如果一個(gè)盒不建立新的塊格式化上下文、 <b> min-height </b> 計(jì)算值為零、 <b> height </b> 計(jì)算值為零或 <b> auto </b> 、沒有在文檔流內(nèi)的子盒，其上下外邊距</p></p> <p>如果一個(gè)折疊外邊距與另一外邊距的任何一邊相鄰，則視二者相鄰。</p> <p>注意：不是同胞或祖先關(guān)系的元素也可以產(chǎn)生相鄰?fù)膺吘唷?/p> <p>注意：上述規(guī)則表明了：</p> <p><p>浮動(dòng)盒的外邊距不同其他任何盒折疊（甚至浮動(dòng)及其文檔流內(nèi)的子元素也不折疊）</p></p> <p><p>創(chuàng)建了新的塊格式化上下文的元素（如浮動(dòng)、 <b> overflow </b> 不為 <b> visible </b> 的元素）的外邊距不同其在文檔流內(nèi)的子元素外邊距折疊</p></p> <p><p>絕對(duì)定位盒的外邊距不同其他任何盒折疊（甚至不同其文檔流內(nèi)的子元素折疊）</p></p> <p><p>行內(nèi)塊盒的外邊距不同其他任何盒折疊（甚至不同其文檔流內(nèi)的子元素折疊）</p></p> <p><p>文檔流內(nèi)塊級(jí)元素的下外邊距始終同其下一個(gè)文檔流內(nèi)的塊級(jí)同胞的上外邊距折疊，除非該對(duì)同胞之間有空隙。</p></p> <p><p>文檔流內(nèi)塊元素如果沒有上邊框和上內(nèi)邊距，其第一個(gè)文檔流內(nèi)塊級(jí)子元素沒有空隙，二者的上外邊距折疊。</p></p> <p><p>文檔流內(nèi) <b> height </b> 為 <b> auto </b> 、 <b> min-height </b> 為零、沒有下內(nèi)邊距和下邊框的塊盒，如果其最后一個(gè)文檔流內(nèi)塊級(jí)子盒的下外邊距沒有同一個(gè)有空隙的上外邊距折疊，二者下外邊距折疊。</p></p> <p><p>如果某盒的 <b> min-height </b> 屬性為零、沒有上下邊框和上下內(nèi)邊距、其 <b> height </b> 為0或 <b> auto </b> 、沒有包含行盒、其所有的文檔流內(nèi)子元素外邊距（如果有）折疊，則折疊其外邊距。</p></p> <p>當(dāng)兩個(gè)及以上外邊距折疊，合并后的外邊距寬度是發(fā)生折疊的外邊距中的最大寬度。如果發(fā)生折疊的外邊距中有負(fù)數(shù)，則為最大正數(shù)相鄰?fù)膺吘鄿p去最小負(fù)數(shù)相鄰?fù)膺吘嗟慕^對(duì)值。如果不存在正數(shù)外邊距，則為零減去最小負(fù)數(shù)相鄰?fù)膺吘嗟慕^對(duì)值。</p> <p>如果一個(gè)盒的上下外邊距相鄰，則外邊距可能穿過盒而折疊 <b> Collapse Through It </b> 。這種情況下，元素的定位取決于它同其他外邊距折疊的元素的關(guān)系。</p> <p><p>如果該元素的外邊距同其父元素的上外邊距折疊，則該盒的上邊框邊緣同其父元盒的上邊框邊緣相同。</p></p> <p><p>否則，要么該元素的父元素的外邊距不折疊，要么只有父元素的下外邊距折疊。上邊框邊緣位置是假定該元素下邊框非零時(shí)的位置。</p></p> <p>需要注意的是，被折疊穿過的元素的定位對(duì)與之外邊距折疊的其他元素的定位無影響；其上邊框邊緣的定位僅用于布局其后代元素。</p> <b>8.6 雙向上下文 Bidirectional Context 中行內(nèi)元素的盒模型</b> <p>對(duì)每個(gè)行盒而言，用戶代理必須按視覺順序（而非邏輯順序）渲染其生成的行內(nèi)盒的外邊距、邊框和內(nèi)邊距。</p> <p>當(dāng)元素 <b> direction </b> 屬性值為 <b> ltr </b> ，元素呈現(xiàn)的第一個(gè)行盒的最左生成盒擁有左外邊距、左邊框和左內(nèi)邊距，而元素呈現(xiàn)的最后一個(gè)行盒的最右生成盒擁有右內(nèi)邊距、右邊框和右外邊距。</p> <p>當(dāng)元素 <b> direction </b> 屬性值為 <b> rtl </b> ，元素呈現(xiàn)的第一個(gè)行盒的最右生成盒擁有右外邊距、右邊框和右內(nèi)邊距，而元素呈現(xiàn)的最后一個(gè)行盒的最左生成盒擁有左內(nèi)邊距、左邊框和左外邊距。</p> <b>譯者之思</b> <p>譯者讀畢此文，細(xì)心揣摩，將經(jīng)驗(yàn)和疑問總結(jié)如下：</p> <b>一、兩種盒模型</b> <p>本章節(jié)描述了W3C的標(biāo)準(zhǔn)盒模型，同時(shí)還存在IE6在怪異模式 <b> Quicks Mode </b> 的另一種盒模型。此處簡(jiǎn)述二者的區(qū)別如下——</p> <p>W3C標(biāo)準(zhǔn)下：盒總寬/高度 = width/height + padding + border + margin</p> <p>怪異模式下：盒總寬/高度 = width/height + margin = 內(nèi)容寬/高度 + padding + border + margin</p> <p>CSS3中， <b> box-sizing </b> 默認(rèn)為 <b> content-box </b> ，即采用W3C標(biāo)準(zhǔn)盒模型，若取值 <b> border-box </b> 則采用怪異模式盒模型。</p> <b>二、不透明的外邊距</b> <p>CSS規(guī)范道：</p> <pre><p>盒的內(nèi)容、內(nèi)邊距以及邊框區(qū)域的背景樣式由生成盒的元素的 <b> background </b> 屬性所規(guī)定。外邊距的背景始終為透明。</p></pre> <p>但在根元素 <b> html </b> 上設(shè)置了外邊距，并規(guī)定了背景，該背景仍鋪滿全屏。</p> <p>如下CSS：</p> <pre>html { margin: 50px; background: #000; }</pre> <p><b> body </b> 同此理。譯者暫不知其因。歡迎讀者指教。</p> <b>三、有空隙的元素</b> <p>外邊距折疊中，很多地方敘述了“有空隙的元素”，這是什么意思呢？其意義即是說，該元素清除了浮動(dòng)。</p> <p>在翻譯視覺格式化模型一章中，W3C給出了清除浮動(dòng)以及計(jì)算空隙寬度的的案例，譯者建議讀者認(rèn)真閱讀該部分，尤其關(guān)注：當(dāng)空隙為負(fù)值時(shí)取消外邊距折疊的情形。</p> <p>點(diǎn)此閱讀：http://segmentfault.com/a/119...。</p> <p>如果讀者已經(jīng)掌握清除浮動(dòng)和空隙的知識(shí)，那就讓我們來看一個(gè)有空隙的情景。</p> <pre><p>如果一個(gè)有空隙的元素的上下外邊距相鄰，其外邊距將同其后同胞的相鄰?fù)膺吘嗾郫B，但不同父塊的下外邊距折疊。</p></pre> <p>以下代碼中， <b> B </b> 是浮動(dòng)塊，為清除其浮動(dòng)， <b> C </b> 引入了空隙。</p> <p>共同CSS：</p> <pre>html,body{padding:0;margin:0;} /*橫線，直觀對(duì)比折疊情況*/ .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>其外邊距將同其后同胞的相鄰?fù)膺吘嗾郫B：</strong></p> <p>HTML：</p> <pre><body> <div class="6a22guqa" id="A"> <div class="6a22guqa" id="B"></div> <div class="6a22guqa" id="C" class="mb"></div> <div class="6a22guqa" id="D" class="mb"></div> <div id="6a22guqa" class="line"></div> </div> </body></pre> <p>渲染結(jié)果是， <b> C </b> 和 <b> D </b> 的外邊距折疊。</p> <p><strong>不同父塊的下外邊距折疊</strong></p> <p>HTML：</p> <pre> <body> <div class="6a22guqa" id="A" class="mb"> <div class="6a22guqa" id="B"></div> <div class="6a22guqa" id="C" class="mb"></div> </div> <div id="6a22guqa" class="line"></div> </body></pre> <p>渲染結(jié)果是， <b> C </b> 的外邊距不同其父元素 <b> A </b> 的外邊距折疊。</p> <b>四、避免盒自身垂直外邊距折疊</b> <pre><p>如果一個(gè)盒不建立新的塊格式化上下文、 <b> min-height </b> 計(jì)算值為零、 <b> height </b> 計(jì)算值為零或 <b> auto </b> 、沒有在文檔流內(nèi)的子盒，其上下外邊距</p></pre> <p>由此可以得出幾種避免盒自身上下外邊距折疊的辦法，簡(jiǎn)單列舉如下：</p> <p><p>建立新塊格式化上下文，如 <b> overflow: hidden </b></p></p> <p><p>設(shè)置 <b> min-height </b></p></p> <p><p>設(shè)置固定高 <b> height </b></p></p> <p><p>添加文檔流內(nèi)（即非浮動(dòng)、非絕對(duì)定位）子盒</p></p> <p>需要注意最后一種辦法，子盒要么有邊框或內(nèi)邊距，要么有內(nèi)容，否則父盒的自身垂直外邊距同樣會(huì)折疊。而如果子盒只有垂直外邊距，該垂直外邊距將同父盒的垂直外邊距折疊，而不會(huì)阻止父盒自身垂直邊距折疊。</p> </div> <div id="6a22guqa" class="mt-64 tags-seach" > <div id="6a22guqa" class="tags-info"> <a style="width:120px;" title="云服務(wù)器" href="http://hztianpu.com/site/active/kuaijiesale.html?ytag=seo">云服務(wù)器</a> <a style="width:120px;" title="GPU云服務(wù)器" href="http://hztianpu.com/site/product/gpu.html">GPU云服務(wù)器</a> <a style="width:120px;" title="模型Model" href="http://hztianpu.com/yun/tag/moxingModel/">模型Model</a> <a style="width:120px;" title="盒模型" href="http://hztianpu.com/yun/tag/hemoxing/">盒模型</a> <a style="width:120px;" title="盒模型html嗎" href="http://hztianpu.com/yun/tag/hemoxinghtmlma/">盒模型html嗎</a> <a style="width:120px;" title="簡(jiǎn)述html盒模型" href="http://hztianpu.com/yun/tag/jianshuhtmlhemoxing/">簡(jiǎn)述html盒模型</a> </div> </div> <div id="6a22guqa" class="entry-copyright mb-30"> <p class="mb-15"> 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。</p> <p>轉(zhuǎn)載請(qǐng)注明本文地址：http://hztianpu.com/yun/111117.html</p> </div> <ul class="pre-next-page"> <li id="6a22guqa" class="ellipsis"><a class="hpf" href="http://hztianpu.com/yun/111116.html">上一篇：用 CSS 實(shí)現(xiàn)三角形與平行四邊形</a></li> <li id="6a22guqa" class="ellipsis"><a class="hpf" href="http://hztianpu.com/yun/111118.html">下一篇：[譯]如何成為一個(gè)優(yōu)秀的前端工程師</a></li> </ul> </div> <div id="6a22guqa" class="about_topicone-mid"> <h3 class="top-com-title mb-0"><span data-id="0">相關(guān)文章</span></h3> <ul class="com_white-left-mid atricle-list-box"> <li> <div id="6a22guqa" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://hztianpu.com/yun/111120.html"><b><em>CSS</em><em>規(guī)范</em> &<em>gt</em>; 9 視覺格式化<em>模型</em> Visual Formatting <em>Model</em></b></a></h2> <p class="ellipsis2 good">摘要：盒的類型會(huì)影響其在視覺格式化模型中的表現(xiàn)。浮動(dòng)元素絕對(duì)定位元素根元素都被稱為脫離文檔流其他元素被稱為文檔流內(nèi)。 視覺格式化模型 Visual Formatting Model URL：http://www.w3.org/TR/CSS2/visuren.html Translator: HaoyCn Date: 14th of Aug, 2015 本文并未全部翻譯，譯者在原文基礎(chǔ)上...</p> <div id="6a22guqa" class="com_white-left-info"> <div id="6a22guqa" class="com_white-left-infol"> <a href="http://hztianpu.com/yun/u-10.html"><img src="http://hztianpu.com/yun/data/avatar/000/00/00/small_000000010.jpg" alt=""><span id="6a22guqa" class="layui-hide64">魏憲會(huì)</span></a> <time datetime="">2019-08-28 18:15</time> <span><i class="fa fa-commenting"></i>評(píng)論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="6a22guqa" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://hztianpu.com/yun/111155.html"><b><em>CSS</em><em>規(guī)范</em> &<em>gt</em>; 10 視覺格式化<em>模型</em>詳述 Visual Formatting <em>Model</em> De</b></a></h2> <p class="ellipsis2 good">摘要：行盒的寬度由其包含塊給予，但可能因浮動(dòng)而縮小。絕對(duì)定位不可替換元素的使用值約束為包含塊寬度如果和均為首先將以及值為的設(shè)為。 2015/10/08： 原10.8標(biāo)題 行盒高度計(jì)算改為10.8 行高計(jì)算。英文原文為line height。由于翻譯時(shí)候看到那段結(jié)論是行盒的高度，腦抽就把原本翻譯對(duì)的標(biāo)題改了下，剛回顧一番深覺不妥，故改回來。 原文：http://www.w3.org/TR/CS...</p> <div id="6a22guqa" class="com_white-left-info"> <div id="6a22guqa" class="com_white-left-infol"> <a href="http://hztianpu.com/yun/u-1047.html"><img src="http://hztianpu.com/yun/data/avatar/000/00/10/small_000001047.jpg" alt=""><span id="6a22guqa" class="layui-hide64">frolc</span></a> <time datetime="">2019-08-28 18:18</time> <span><i class="fa fa-commenting"></i>評(píng)論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="6a22guqa" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://hztianpu.com/yun/111152.html"><b><em>CSS</em> &<em>gt</em>; <em>CSS</em>3 中的層疊上下文初探</b></a></h2> <p class="ellipsis2 good">摘要：但該盒不建立新的層疊上下文，除非是根元素。以上是基于的層疊上下文介紹。同級(jí)情況下，按照二者在源代碼中的順序，居后的又重新占領(lǐng)高地了?，F(xiàn)在我們看以下源代碼這個(gè)時(shí)候，以視口為包含塊進(jìn)行定位和大小計(jì)算，將會(huì)鋪滿整個(gè)屏幕。 前言：關(guān)于層疊上下文，筆者還沒有去閱讀更詳細(xì)的 W3C 規(guī)范來了解更本質(zhì)的原理（表打我，等我校招拿到 offer 了我就讀好伐 T_T）。一直聽說 CSS3 里的層疊上下文...</p> <div id="6a22guqa" class="com_white-left-info"> <div id="6a22guqa" class="com_white-left-infol"> <a href="http://hztianpu.com/yun/u-394.html"><img src="http://hztianpu.com/yun/data/avatar/000/00/03/small_000000394.jpg" alt=""><span id="6a22guqa" class="layui-hide64">pcChao</span></a> <time datetime="">2019-08-28 18:18</time> <span><i class="fa fa-commenting"></i>評(píng)論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="6a22guqa" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://hztianpu.com/yun/115708.html"><b><em>CSS</em>中各種布局的背后(*FC)</b></a></h2> <p class="ellipsis2 good">摘要：中各種布局的背后，實(shí)質(zhì)上是各種的組合。相反，一些塊容器盒，比如非替換行內(nèi)塊及非替換表格單元格，不是塊級(jí)盒。描述元素跟它的后代之間的影響。行盒行盒由行內(nèi)格式化上下文產(chǎn)生的盒，用于表示一行。彈性容器外和彈性項(xiàng)目?jī)?nèi)的一切元素都不受影響。 CSS中各種布局的背后，實(shí)質(zhì)上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。 盒模型(Box M...</p> <div id="6a22guqa" class="com_white-left-info"> <div id="6a22guqa" class="com_white-left-infol"> <a href="http://hztianpu.com/yun/u-1220.html"><img src="http://hztianpu.com/yun/data/avatar/000/00/12/small_000001220.jpg" alt=""><span id="6a22guqa" class="layui-hide64">miracledan</span></a> <time datetime="">2019-08-30 14:01</time> <span><i class="fa fa-commenting"></i>評(píng)論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="6a22guqa" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://hztianpu.com/yun/116548.html"><b>視覺格式化<em>模型</em>(Visual formatting <em>model</em>)</b></a></h2> <p class="ellipsis2 good">摘要：塊級(jí)盒參與塊格式化上下文。行內(nèi)級(jí)盒參與行內(nèi)格式化上下文塊格式化上下文行內(nèi)格式化上下文相對(duì)定位浮動(dòng)盒就是一個(gè)在當(dāng)前行向左或向右移動(dòng)的盒。浮動(dòng)絕對(duì)定位絕對(duì)定位模型中，一個(gè)盒會(huì)有相對(duì)于其包含塊的明確偏移，它會(huì)從常規(guī)流中全部移除不會(huì)影響后面的兄弟。 在可視化格式模型(Visual formatting model)當(dāng)中,文檔樹中的每個(gè)元素根據(jù)其盒模型生成0個(gè)或多個(gè)盒.這些盒的布局由(以下因素)...</p> <div id="6a22guqa" class="com_white-left-info"> <div id="6a22guqa" class="com_white-left-infol"> <a href="http://hztianpu.com/yun/u-1375.html"><img src="http://hztianpu.com/yun/data/avatar/000/00/13/small_000001375.jpg" alt=""><span id="6a22guqa" class="layui-hide64">jokester</span></a> <time datetime="">2019-08-30 15:53</time> <span><i class="fa fa-commenting"></i>評(píng)論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> </ul> </div> <div id="6a22guqa" class="topicone-box-wangeditor"> <h3 class="top-com-title mb-64"><span>發(fā)表評(píng)論</span></h3> <div id="6a22guqa" class="xcp-publish-main flex_box_zd"> <div id="6a22guqa" class="unlogin-pinglun-box"> <a href="javascript:login()" class="grad">登陸后可評(píng)論</a> </div> </div> </div> <div id="6a22guqa" class="site-box-content"> <div id="6a22guqa" class="site-content-title"> <h3 class="top-com-title mb-64"><span>0條評(píng)論</span></h3> </div> <div id="6a22guqa" class="pages"></ul></div> </div> </div> <div id="6a22guqa" class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right"> <div id="6a22guqa" class=""> <div id="6a22guqa" class="com_layuiright-box user-msgbox"> <a href="http://hztianpu.com/yun/u-567.html"><img src="http://hztianpu.com/yun/data/avatar/000/00/05/small_000000567.jpg" alt=""></a> <h3><a href="http://hztianpu.com/yun/u-567.html" rel="nofollow">suemi</a></h3> <h6>男<span>|</span>高級(jí)講師</h6> <div id="6a22guqa" class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(567)" id="attenttouser_567" class="grad follow-btn notfollow attention">我要關(guān)注</a> <a href="javascript:login()" title="發(fā)私信" >我要私信</a> </div> <div id="6a22guqa" class="user-msgbox-list flex_box_zd"> <h3 class="hpf">TA的文章</h3> <a href="http://hztianpu.com/yun/ut-567.html" class="box_hxjz">閱讀更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="http://hztianpu.com/yun/124947.html">奈學(xué)百萬云原生架構(gòu)師</a></h3> <p>閱讀 2769<span>·</span>2021-11-25 09:43</p></li> <li><h3 class="ellipsis"><a href="http://hztianpu.com/yun/122862.html">ZJI：雙十一，自營(yíng)服務(wù)器/阿里云專線服務(wù)器全部55折優(yōu)惠，月付412元起，999元可獲得1100元</a></h3> <p>閱讀 2812<span>·</span>2021-11-04 16:09</p></li> <li><h3 class="ellipsis"><a href="http://hztianpu.com/yun/122338.html">2021年9月國(guó)產(chǎn)數(shù)據(jù)庫(kù)大事記</a></h3> <p>閱讀 1878<span>·</span>2021-10-12 10:13</p></li> <li><h3 class="ellipsis"><a href="http://hztianpu.com/yun/121556.html">前端技術(shù)棧月刊 ???? 2021-09</a></h3> <p>閱讀 945<span>·</span>2021-09-29 09:35</p></li> <li><h3 class="ellipsis"><a href="http://hztianpu.com/yun/117911.html">NextArray：美國(guó)達(dá)拉斯VPS/2核1G/20GB SSD或者100GB HDD/100Mbp</a></h3> <p>閱讀 964<span>·</span>2021-08-03 14:03</p></li> <li><h3 class="ellipsis"><a href="http://hztianpu.com/yun/117389.html">CSS實(shí)用技巧</a></h3> <p>閱讀 1867<span>·</span>2019-08-30 15:55</p></li> <li><h3 class="ellipsis"><a href="http://hztianpu.com/yun/111117.html">CSS規(guī)范 > 8 盒模型 Box Model</a></h3> <p>閱讀 3088<span>·</span>2019-08-28 18:14</p></li> <li><h3 class="ellipsis"><a href="http://hztianpu.com/yun/109395.html">前端培訓(xùn)-初級(jí)階段（13） - 正則表達(dá)式</a></h3> <p>閱讀 3682<span>·</span>2019-08-26 13:43</p></li> </ul> </div> <!-- 文章詳情右側(cè)廣告--> <div id="6a22guqa" class="com_layuiright-box"> <h6 class="top-com-title"><span>最新活動(dòng)</span></h6> <div id="6a22guqa" class="com_adbox"> <div id="6a22guqa" class="layui-carousel" id="right-item"> <div carousel-item> <div> <a href="http://hztianpu.com/site/active/kuaijiesale.html?ytag=seo" rel="nofollow"> <img src="http://hztianpu.com/yun/data/attach/240625/2rTjEHmi.png" alt="云服務(wù)器"> </a> </div> <div> <a href="http://hztianpu.com/site/product/gpu.html" rel="nofollow"> <img src="http://hztianpu.com/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服務(wù)器"> </a> </div> </div> </div> </div> <!-- banner結(jié)束 --> <div id="6a22guqa" class="adhtml"> </div> </div> </div> </div> </div> </div> </section> <!-- wap拉出按鈕 --> <div id="6a22guqa" class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div> <!-- wap遮罩層 --> <div id="6a22guqa" class="site-mobile-shade"></div> <!--付費(fèi)閱讀 --> <div class="6a22guqa" id="payread"> <div id="6a22guqa" class="layui-form-item">閱讀需要支付1元查看</div> <div id="6a22guqa" class="layui-form-item"><button class="btn-right">支付并查看</button></div> </div> <link rel="stylesheet" type="text/css" href="http://hztianpu.com/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css"> <footer> <div id="6a22guqa" class="layui-container"> <div id="6a22guqa" class="flex_box_zd"> <div id="6a22guqa" class="left-footer"> <h6><a href="http://hztianpu.com/"><img src="http://hztianpu.com/yun/static/theme/ukd//images/logo.png" alt="UCloud （優(yōu)刻得科技股份有限公司）"></a></h6> <p>UCloud （優(yōu)刻得科技股份有限公司）是中立、安全的云計(jì)算服務(wù)平臺(tái)，堅(jiān)持中立，不涉足客戶業(yè)務(wù)領(lǐng)域。公司自主研發(fā)IaaS、PaaS、大數(shù)據(jù)流通平臺(tái)、AI服務(wù)平臺(tái)等一系列云計(jì)算產(chǎn)品，并深入了解互聯(lián)網(wǎng)、傳統(tǒng)企業(yè)在不同場(chǎng)景下的業(yè)務(wù)需求，提供公有云、混合云、私有云、專有云在內(nèi)的綜合性行業(yè)解決方案。</p> </div> <div id="6a22guqa" class="right-footer layui-hidemd"> <ul class="flex_box_zd"> <li> <h6>UCloud與云服務(wù)</h6> <p><a href="http://hztianpu.com/site/about/intro/">公司介紹</a></p> <p><a >加入我們</a></p> <p><a href="http://hztianpu.com/site/ucan/onlineclass/">UCan線上公開課</a></p> <p><a href="http://hztianpu.com/site/solutions.html" >行業(yè)解決方案</a></p> <p><a href="http://hztianpu.com/site/pro-notice/">產(chǎn)品動(dòng)態(tài)</a></p> </li> <li> <h6>友情鏈接</h6> <p><a >GPU算力平臺(tái)</a></p> <p><a >UCloud私有云</a></p> <p><a >SurferCloud</a></p> <p><a >工廠仿真軟件</a></p> <p><a >AI繪畫</a></p> <p><a >Wavespeed AI</a></p> </li> <li> <h6>社區(qū)欄目</h6> <p><a href="http://hztianpu.com/yun/column/index.html">專欄文章</a></p> <p><a href="http://hztianpu.com/yun/udata/">專題地圖</a></p> </li> <li> <h6>常見問題</h6> <p><a href="http://hztianpu.com/site/ucsafe/notice.html" >安全中心</a></p> <p><a href="http://hztianpu.com/site/about/news/recent/" >新聞動(dòng)態(tài)</a></p> <p><a href="http://hztianpu.com/site/about/news/report/">媒體動(dòng)態(tài)</a></p> <p><a href="http://hztianpu.com/site/cases.html">客戶案例</a></p> <p><a href="http://hztianpu.com/site/notice/">公告</a></p> </li> <li> <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="優(yōu)刻得"></span> <p>掃掃了解更多</p></div> </div> <div id="6a22guqa" class="copyright">Copyright ? 2012-2025 UCloud 優(yōu)刻得科技股份有限公司<i>｜</i><a rel="nofollow" >滬公網(wǎng)安備 31011002000058號(hào)</a><i>｜</i><a rel="nofollow" ></a> 滬ICP備12020087號(hào)-3</a><i>｜</i> <!-- Global site tag (gtag.js) - Google Analytics --> </div> </div> </footer> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <h1><a href="http://hztianpu.com/">成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码</a></h1> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="znn7v" class="pl_css_ganrao" style="display: none;"><label id="znn7v"><u id="znn7v"></u></label><legend id="znn7v"><label id="znn7v"><dfn id="znn7v"><mark id="znn7v"></mark></dfn></label></legend><dfn id="znn7v"><u id="znn7v"></u></dfn><progress id="znn7v"><sup id="znn7v"><label id="znn7v"><th id="znn7v"></th></label></sup></progress><dfn id="znn7v"><u id="znn7v"><ruby id="znn7v"><form id="znn7v"></form></ruby></u></dfn><sub id="znn7v"></sub><u id="znn7v"></u><tt id="znn7v"></tt><i id="znn7v"><listing id="znn7v"></listing></i><legend id="znn7v"><dfn id="znn7v"><dfn id="znn7v"><mark id="znn7v"></mark></dfn></dfn></legend><rp id="znn7v"><thead id="znn7v"></thead></rp><pre id="znn7v"><p id="znn7v"><nobr id="znn7v"><small id="znn7v"></small></nobr></p></pre><style id="znn7v"><var id="znn7v"></var></style><video id="znn7v"></video><b id="znn7v"><meter id="znn7v"><acronym id="znn7v"><style id="znn7v"></style></acronym></meter></b><legend id="znn7v"></legend><track id="znn7v"><em id="znn7v"></em></track><sub id="znn7v"><div id="znn7v"></div></sub><ins id="znn7v"><sub id="znn7v"><strike id="znn7v"><var id="znn7v"></var></strike></sub></ins><label id="znn7v"><strong id="znn7v"><ruby id="znn7v"><thead id="znn7v"></thead></ruby></strong></label><form id="znn7v"></form><menuitem id="znn7v"></menuitem><dl id="znn7v"></dl><label id="znn7v"><nobr id="znn7v"><thead id="znn7v"><legend id="znn7v"></legend></thead></nobr></label><optgroup id="znn7v"><video id="znn7v"><em id="znn7v"><div id="znn7v"></div></em></video></optgroup><form id="znn7v"></form><nobr id="znn7v"><small id="znn7v"></small></nobr><track id="znn7v"></track><em id="znn7v"></em><menuitem id="znn7v"><span id="znn7v"><i id="znn7v"><listing id="znn7v"></listing></i></span></menuitem><p id="znn7v"><var id="znn7v"><small id="znn7v"><ins id="znn7v"></ins></small></var></p><small id="znn7v"><ins id="znn7v"></ins></small><span id="znn7v"><legend id="znn7v"></legend></span><th id="znn7v"><b id="znn7v"><progress id="znn7v"><sup id="znn7v"></sup></progress></b></th><form id="znn7v"><legend id="znn7v"><listing id="znn7v"><dfn id="znn7v"></dfn></listing></legend></form><track id="znn7v"><dfn id="znn7v"><menuitem id="znn7v"><dl id="znn7v"></dl></menuitem></dfn></track><div id="znn7v"><ol id="znn7v"></ol></div><nobr id="znn7v"><b id="znn7v"><progress id="znn7v"><acronym id="znn7v"></acronym></progress></b></nobr><label id="znn7v"></label><ins id="znn7v"></ins><sup id="znn7v"><style id="znn7v"><ruby id="znn7v"><font id="znn7v"></font></ruby></style></sup><small id="znn7v"><meter id="znn7v"><pre id="znn7v"><p id="znn7v"></p></pre></meter></small><font id="znn7v"><legend id="znn7v"></legend></font><strong id="znn7v"><rp id="znn7v"></rp></strong><strong id="znn7v"><rp id="znn7v"><font id="znn7v"><legend id="znn7v"></legend></font></rp></strong><listing id="znn7v"><tt id="znn7v"><menuitem id="znn7v"><span id="znn7v"></span></menuitem></tt></listing><style id="znn7v"></style><legend id="znn7v"><sup id="znn7v"></sup></legend><track id="znn7v"><tt id="znn7v"></tt></track><style id="znn7v"><nobr id="znn7v"></nobr></style><strong id="znn7v"><rp id="znn7v"><thead id="znn7v"><legend id="znn7v"></legend></thead></rp></strong><th id="znn7v"></th><address id="znn7v"><p id="znn7v"><var id="znn7v"><form id="znn7v"></form></var></p></address><thead id="znn7v"><legend id="znn7v"><label id="znn7v"><strong id="znn7v"></strong></label></legend></thead><strong id="znn7v"><rp id="znn7v"></rp></strong><var id="znn7v"></var><span id="znn7v"></span><font id="znn7v"><progress id="znn7v"></progress></font><strong id="znn7v"><form id="znn7v"></form></strong><track id="znn7v"></track><thead id="znn7v"></thead><strong id="znn7v"></strong><div id="znn7v"><ol id="znn7v"></ol></div><track id="znn7v"><em id="znn7v"></em></track><track id="znn7v"><tt id="znn7v"></tt></track><thead id="znn7v"><legend id="znn7v"><sup id="znn7v"><label id="znn7v"></label></sup></legend></thead><thead id="znn7v"><sup id="znn7v"><strong id="znn7v"><rp id="znn7v"></rp></strong></sup></thead><label id="znn7v"><strong id="znn7v"></strong></label><em id="znn7v"></em><optgroup id="znn7v"><video id="znn7v"></video></optgroup><dfn id="znn7v"><mark id="znn7v"></mark></dfn><em id="znn7v"><div id="znn7v"></div></em><mark id="znn7v"><form id="znn7v"></form></mark><listing id="znn7v"><tt id="znn7v"></tt></listing><output id="znn7v"><em id="znn7v"><big id="znn7v"><dl id="znn7v"></dl></big></em></output><track id="znn7v"><u id="znn7v"></u></track><video id="znn7v"><em id="znn7v"><menuitem id="znn7v"><dl id="znn7v"></dl></menuitem></em></video><ins id="znn7v"></ins><font id="znn7v"><progress id="znn7v"></progress></font><u id="znn7v"><mark id="znn7v"></mark></u><track id="znn7v"></track><ruby id="znn7v"><thead id="znn7v"><thead id="znn7v"><label id="znn7v"></label></thead></thead></ruby><sub id="znn7v"><div id="znn7v"></div></sub><strong id="znn7v"><ruby id="znn7v"></ruby></strong><video id="znn7v"></video><rp id="znn7v"></rp><font id="znn7v"></font><span id="znn7v"><legend id="znn7v"></legend></span><track id="znn7v"><tt id="znn7v"></tt></track><sub id="znn7v"><div id="znn7v"><ol id="znn7v"><optgroup id="znn7v"></optgroup></ol></div></sub><mark id="znn7v"><form id="znn7v"><i id="znn7v"><dfn id="znn7v"></dfn></i></form></mark><b id="znn7v"><progress id="znn7v"><sup id="znn7v"><strong id="znn7v"></strong></sup></progress></b><strong id="znn7v"></strong><track id="znn7v"></track><thead id="znn7v"></thead><var id="znn7v"><form id="znn7v"><ins id="znn7v"><address id="znn7v"></address></ins></form></var><form id="znn7v"><thead id="znn7v"><label id="znn7v"><strong id="znn7v"></strong></label></thead></form><tt id="znn7v"><big id="znn7v"><dl id="znn7v"><optgroup id="znn7v"></optgroup></dl></big></tt><label id="znn7v"><th id="znn7v"></th></label><thead id="znn7v"><dfn id="znn7v"><u id="znn7v"><mark id="znn7v"></mark></u></dfn></thead><track id="znn7v"><tt id="znn7v"><big id="znn7v"><dl id="znn7v"></dl></big></tt></track><mark id="znn7v"><form id="znn7v"></form></mark><em id="znn7v"><big id="znn7v"></big></em><output id="znn7v"><address id="znn7v"><p id="znn7v"><nobr id="znn7v"></nobr></p></address></output><strike id="znn7v"><strong id="znn7v"><optgroup id="znn7v"><video id="znn7v"></video></optgroup></strong></strike><u id="znn7v"></u><u id="znn7v"><ruby id="znn7v"></ruby></u><mark id="znn7v"><form id="znn7v"><i id="znn7v"><listing id="znn7v"></listing></i></form></mark><thead id="znn7v"></thead><form id="znn7v"></form><b id="znn7v"><progress id="znn7v"><acronym id="znn7v"><style id="znn7v"></style></acronym></progress></b><small id="znn7v"><ins id="znn7v"><pre id="znn7v"><p id="znn7v"></p></pre></ins></small><font id="znn7v"></font><ruby id="znn7v"><form id="znn7v"></form></ruby><div id="znn7v"></div><var id="znn7v"><form id="znn7v"></form></var><style id="znn7v"><nobr id="znn7v"></nobr></style><rp id="znn7v"><font id="znn7v"><legend id="znn7v"><sup id="znn7v"></sup></legend></font></rp><sup id="znn7v"><label id="znn7v"><th id="znn7v"><font id="znn7v"></font></th></label></sup><sub id="znn7v"><div id="znn7v"></div></sub><strong id="znn7v"><form id="znn7v"></form></strong><meter id="znn7v"><pre id="znn7v"><p id="znn7v"><var id="znn7v"></var></p></pre></meter><rp id="znn7v"><b id="znn7v"><progress id="znn7v"><acronym id="znn7v"></acronym></progress></b></rp><legend id="znn7v"><listing id="znn7v"><tt id="znn7v"><menuitem id="znn7v"></menuitem></tt></listing></legend><strong id="znn7v"></strong><output id="znn7v"><address id="znn7v"><strike id="znn7v"><strong id="znn7v"></strong></strike></address></output><ins id="znn7v"><sub id="znn7v"></sub></ins><u id="znn7v"><ruby id="znn7v"></ruby></u><em id="znn7v"><big id="znn7v"></big></em><video id="znn7v"><sub id="znn7v"><strike id="znn7v"><strong id="znn7v"></strong></strike></sub></video><sub id="znn7v"></sub><track id="znn7v"></track><u id="znn7v"><ruby id="znn7v"></ruby></u><form id="znn7v"></form><i id="znn7v"><dfn id="znn7v"></dfn></i><style id="znn7v"><var id="znn7v"></var></style><font id="znn7v"></font><small id="znn7v"><ins id="znn7v"><address id="znn7v"><strike id="znn7v"></strike></address></ins></small><strong id="znn7v"><form id="znn7v"></form></strong><rp id="znn7v"><font id="znn7v"></font></rp><font id="znn7v"><legend id="znn7v"></legend></font><label id="znn7v"><th id="znn7v"></th></label><i id="znn7v"><track id="znn7v"></track></i><ins id="znn7v"></ins><address id="znn7v"><div id="znn7v"></div></address><var id="znn7v"><form id="znn7v"></form></var><form id="znn7v"><video id="znn7v"></video></form><th id="znn7v"><small id="znn7v"><meter id="znn7v"><pre id="znn7v"></pre></meter></small></th><ins id="znn7v"></ins><style id="znn7v"><rp id="znn7v"></rp></style></div> < </html>