真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

如果按照CSS規(guī)范，IE的“良好表現(xiàn)”其實(shí)是一個(gè)錯(cuò)誤的表現(xiàn)，因?yàn)镮E的hasLayout渲染導(dǎo)致了這個(gè)“表現(xiàn)良好”的外觀。而其他標(biāo)準(zhǔn)瀏覽器則會(huì)表現(xiàn)出“有問(wèn)題”的外觀。好了，如果你讀過(guò)了上面W3Shcool的CSS外邊距合并的文章后，就很容易討論這個(gè)問(wèn)題了。這個(gè)問(wèn)題發(fā)生的原因是根據(jù)規(guī)范，一個(gè)盒子如果沒(méi)有上補(bǔ)白(padding-top)和上邊框(border-top)，那么這個(gè)盒子的上邊距會(huì)和其內(nèi)部文檔流中的第一個(gè)子元素的上邊距重疊。
再說(shuō)了白點(diǎn)就是：父元素的第一個(gè)子元素的上邊距margin-top如果碰不到有效的border或者padding.就會(huì)不斷一層一層的找自己“領(lǐng)導(dǎo)”(父元素，祖先元素)的麻煩。只要給領(lǐng)導(dǎo)設(shè)置個(gè)有效的 border或者padding就可以有效的管制這個(gè)目無(wú)領(lǐng)導(dǎo)的margin防止它越級(jí)，假傳圣旨，把自己的margin當(dāng)領(lǐng)導(dǎo)的margin執(zhí)行。
對(duì)于垂直外邊距合并的解決方案上面已經(jīng)解釋了，為父元素例子中的middle元素增加一個(gè)border-top或者padding-top即可解決這個(gè)問(wèn)題。
一般說(shuō)來(lái)這個(gè)問(wèn)題解釋到這里，大多數(shù)文章就不會(huì)再深入下去了，但作為一名實(shí)戰(zhàn)開(kāi)發(fā)者，最求的是知其然知其所以然，原本使用margin-top就是為了與父元素隔開(kāi)距離，而按照你這么一個(gè)解法，其實(shí)是一種“修復(fù)”，為了“彌補(bǔ)修復(fù)”這個(gè)父子垂直外邊距合并這個(gè)CSS規(guī)范“Bug”，而強(qiáng)制在父元素上使用border-top和padding-top，不舒服，也不容易記住，下次再發(fā)生這樣的情況還是會(huì)忘記這條準(zhǔn)則，而且在頁(yè)面設(shè)計(jì)稿里如果不需要border-top加個(gè)上邊框，這么一加反而畫(huà)蛇添足，為以后修改留下隱患。
為什么一定要用border-top,padding-top去為了這么一個(gè)所謂的標(biāo)準(zhǔn)規(guī)范而多寫(xiě)這么一行代碼呢？答案你可以參考另外一篇文章用Margin還是用Padding里找到答案。

用Margin還是用Padding
何時(shí)應(yīng)當(dāng)使用margin：
需要在border外側(cè)添加空白時(shí)。
空白處不需要背景（色）時(shí)。
上下相連的兩個(gè)盒子之間的空白，需要相互抵消時(shí)。如15px + 20px的margin，將得到20px的空白。
何時(shí)應(yīng)當(dāng)時(shí)用padding：
需要在border內(nèi)測(cè)添加空白時(shí)。
空白處需要背景（色）時(shí)。
上下相連的兩個(gè)盒子之間的空白，希望等于兩者之和時(shí)。如15px + 20px的padding，將得到35px的空白。
個(gè)人認(rèn)為：margin是用來(lái)隔開(kāi)元素與元素的間距；padding是用來(lái)隔開(kāi)元素與內(nèi)容的間隔。margin用于布局分開(kāi)元素使元素與元素互不相干；padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段“呼吸距離”。

二、margin 的基本寫(xiě)法
外邊距的 margin-width 的值類型有：auto | length | percentage
percentage：百分比是由被應(yīng)用 box 的containing block（注：一個(gè)元素的 containing block 是該元素產(chǎn)生的 box(es)在計(jì)算位置和大小時(shí)參考的一個(gè)矩形）的大小所決定。對(duì)于 margin-top 和 margin-bottom 也同樣成立。
margin 的默認(rèn)值為 0，并且 margin 支持負(fù)值。
上面我們?cè)岬綄傩?margin 可以用來(lái)同時(shí)指定 box 的四邊外邊距。如果屬性 margin 有四個(gè)值，那么值將按照上-右-下-左的順序作用于四邊，即從元素的上邊開(kāi)始，按照順時(shí)針的順序圍繞元素。表達(dá)式如下：

margin：top rightright bottombottom left；

四個(gè)數(shù)值中間以空格分隔。效果等同于：

margin-top:value;   
margin-right:value;   
margin-bottom:value;   
margin-left:value;

并且規(guī)范還提供了省略的數(shù)值寫(xiě)法，基本原則如下：
如果沒(méi)有 left 值，則使用 right 代替；
如果沒(méi)有 bottom 值，則使用 top 代替；
如果沒(méi)有 right 值，則使用 top 值代替。
根據(jù)這些基本原則，我們可以有三種省略方式，但不管怎樣省略 margin 的數(shù)值都會(huì)大于等于一個(gè)，而 margin 的默認(rèn)數(shù)值是從 top 開(kāi)始至 left 結(jié)束，那么對(duì)于省略的具體情況，我們可以從 left 反推理回去。
1、如果 margin 只有三個(gè)值，按照值的順序?yàn)?margin：top right bottom; 缺少了 left，根據(jù)原則，則 left 的值有 right 來(lái)代替。margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;
2、如果 margin 只有兩個(gè)值，按照值的順序?yàn)?margin：top right; 缺少了 bottom 和 left，根據(jù)原則 left 的值由 right 來(lái)代替，bottm 的值由 top 來(lái)代替。margin:10px 20px; 就等于 margin:10px 20px 10px 20px;
3、如果 margin 只有一個(gè)值，按照值的順序?yàn)?margin:top; 缺少了 bottom、left 和 right，根據(jù)原則 left 的值由 right 來(lái)代替，bottom 的值由 top 來(lái)代替，right 的值右 top 來(lái)代替，也就是說(shuō) left 的值也由 top 來(lái)代替。margin:10px; 就等于 margin:10px 10px 10px 10px;

三、margin的解析邏輯
目前我們已經(jīng)了解到了 margin 的基本特性和基本寫(xiě)法，但對(duì)元素 margin 的基本解析邏輯還是很模糊，到底 margin 的 top、right、bottom、left 都是以什么為基準(zhǔn)來(lái)促使 box model 形成。為了形象，易懂的對(duì) margin 的邏輯進(jìn)行說(shuō)明，下面講解的過(guò)程中，將引入 W3C 上沒(méi)有的參考線的說(shuō)法。何謂參考線？參考線就是 margin 移動(dòng)的基準(zhǔn)點(diǎn)，此基準(zhǔn)點(diǎn)相對(duì)于 box 是靜止的。而 margin 的數(shù)值，就是 box 相對(duì)于參考線的位移量。
在 margin 中 top、right、bottom、left 的參考線并不一致為一類，而是分為了兩類參考線，top 和 left 的參考線屬于一類，right 和bottom 的參考線屬于另一類。那他們到底各以什么為參考線呢？top 以 containing block 的 content 上邊或者垂直上方相連元素 margin 的下邊為參考線垂直向下位移；left 以 containing block 的 content 左邊或者水平左方相連元素 margin 的右邊為參考線水平向右位移。right 以元素本身的 border 右邊為參考線水平向右位移；bottom 以元素本身的border 下邊為參考線垂直向下位移。從上我們可以看到 top 和 left 都是以外元素為參考，而 right 和 bottom 以本元素為參考。上面的位移方向是指 margin 數(shù)值為正值時(shí)候的情形，如果是負(fù)值則位移方向相反。

或許理論聽(tīng)起來(lái)比較枯燥，我們舉例說(shuō)明一下：

   
   
   
   
   
   
div {   
        width:200px;   
        height:200px;   
        background:#ccc;   
}   
   
       
  
   
        
外邊距的margin-width的值類型有：auto | length | percentage
   
   

如上代碼，很簡(jiǎn)單，為了方便我們看到效果，我們給 div 設(shè)置了寬度和高度以及背景色。
現(xiàn)在我們給 div 的樣式加上 margin 屬性，比如：

margin:-10px 20px -30px 40px;

這時(shí)候 margin 的解析邏輯是怎樣的呢？首先我們要搞清 div 的和周邊元素的關(guān)系，div 沒(méi)有相連元素，而此時(shí) div 的 containing block 是 body 產(chǎn)生的 block box。則根據(jù)上面介紹的參考線原理，div 的左外邊距以 containing block 的 content 左邊為參考線，及此時(shí)以 body 的 content 左邊為參考線進(jìn)行水平向右位移，位移的大小為 40px，同理，上邊距以 body 的 content 上邊為參考線進(jìn)行垂直向上位移 10px（負(fù)值和正值的方向相反），下邊距依照現(xiàn)在 div 的 borer 下邊（此時(shí)的 div 已經(jīng)經(jīng)過(guò)上邊距位移過(guò)了）垂直向上位移 30px（此時(shí)，margin 不會(huì)改變 box 的 border 內(nèi)的物理大小，但會(huì)改變 box 的邏輯大小，即：以此 box 的 margin 的下邊為參考的元素，不是從 box 的物理位置開(kāi)始的，而是從邏輯位置開(kāi)始），右邊距依照現(xiàn)在 div 的 borer 右邊（此時(shí)的 div 已經(jīng)經(jīng)過(guò)左邊距位移過(guò)了）水平向右位移 20px?；蛟S有朋友問(wèn)你分析的順序怎么和 margin 表達(dá)式中出現(xiàn)的順序不一樣？如果按照 margin 表達(dá)式中出現(xiàn)的順序來(lái)分析，結(jié)果是一樣的，只是為了更好的方便大家的理解而沒(méi)有按照表達(dá)式的順序來(lái)分析。

用 margin 最后的實(shí)際顯示大小的到底是怎么樣呢，或許有朋友也比較疑惑，我暫時(shí)用邏輯大小和物理大小來(lái)區(qū)分（其實(shí)上面已用到此概念），到底什么是邏輯大小，什么是物理大小呢？！具體可以看圖，物理大小指的是除去 margin，也就是包含 border 以內(nèi)的 box 大小，而邏輯大小，則是 box 通過(guò) margin 解析規(guī)則解析后得到的大?。ㄟ@或許可以解釋為什么IE5會(huì)錯(cuò)誤解析盒模型）。在上圖中，box 的實(shí)際顯示的寬度等于 box 的邏輯大小，而 box 實(shí)際顯示的高度等于 box 的物理大小，這說(shuō)明 box 實(shí)際顯示的大小可能是 box 的邏輯大小，也可能是 box的 物理大小，規(guī)則到底是怎樣的——
box 的實(shí)際大小 = box 的物理大小 + 正的 margin
這僅對(duì)元素本身有效，對(duì)于其后面的相關(guān)元素，他們則只以 margin 的邏輯大小為準(zhǔn)則，進(jìn)行布局。
有朋友反應(yīng)，聽(tīng)得很迷糊，越看越不懂，如果你對(duì)具體的理解過(guò)程不感興趣的話，那記住下面我總結(jié)的結(jié)論就可以了，XD
結(jié)論：
box 最后的顯示大小等于 box 的 border 及 border 內(nèi)的大小加上正的 margin 值。而負(fù)的 margin 值不會(huì)影響 box 的實(shí)際大小，如果是負(fù)的 top 或 left 值會(huì)引起 box 的向上或向左位置移動(dòng)，如果是 bottom 或 right 只會(huì)影響下面 box 的顯示的參考線。

關(guān)于“CSS中怎樣使用margin屬性”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。