CSS屬性之margin的理解

css屬性改變?nèi)萜鞯某叽?/h4>
  • 可以改變元素占據(jù)空間（如影響父元素的高度（當(dāng)父元素不定高的情況下））
<html>
<style>
/*此處省略reset.css*/
.box1{background:gray;}
/*設(shè)置vertical-align：bottom 是為了解決img與父級元素之間留有空白的故障*/ 
.box2{height:200px;width:200px;background:gold;vertical-align:bottom;} 
</style>
<body>
<div class="box1"> 
    
![cat-5.png](http://upload-images.jianshu.io/upload_images/1819278-20366c1cd398bed2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</div> 
</body> 
</html>

margin負(fù)值的應(yīng)用

  1. margin負(fù)值下的兩端對齊（margin改變元素尺寸）


    圖片.png
  2. margin負(fù)值下的等高布局（margin改變元素占據(jù)空間）

通過設(shè)置margin-bottom為負(fù)值，padding-bottom為正值來實(shí)現(xiàn)。父元素需overflow:hidden;

  1. margin負(fù)值下的兩欄自適應(yīng)布局
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,796評論 1贊 92
  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素；行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,042評論 1贊 4
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表，主要用...
    寥寥十一閱讀 1,868評論 0贊 6
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,094評論 0贊 1
  • 每一個(gè)人游戲里面都有屬于你的英雄，若水三千，只取一瓢。 王者榮耀玩的人都知道它有多火，從我剛剛開始玩的時(shí)候只有50...
    風(fēng)重閱讀 795評論 35贊 11