第十四課 div css當(dāng)中 DIV內(nèi)邊距和外邊距概念講解

asp老師

好我們分別來看html代碼，這個是body 當(dāng)中的內(nèi)容；

1. <font size="4"><font size="4">
   
2. <div class="aaa">111</div>
   
3. 
   
4. <div class="bbb">222</div></font></font>

復(fù)制代碼

好我們來定義下css代碼

1. <font size="4"><font size="4">.aaa{background:#099; width:300px; height:200px;}
   
2. .bbb{ background:#F00; width:300px; height:200px;}</font></font>

復(fù)制代碼

此時效果如下

我們在css代碼當(dāng)中添加了一個margin-bottom:50px; 這個表示的是下面的邊距即為-（外邊距）
我們來看效果：

同樣的如果改為

1. <font size="4"><font size="4">margin-left:50px;</font></font>

復(fù)制代碼

那么此時的效果如下：

margin-left:50px; 這個表示的外面的左邊距；此時我們修改源代碼html為;

1. <font size="4">
   
2. </font><blockquote><font size="4"><div class="aaa"></font>

復(fù)制代碼

css代碼為;

1. <blockquote><font size="4">.aaa{background:#099; width:500px; height:300px; }</font>

復(fù)制代碼

那么效果如下;

我們看到類為.bbb的被類為.aaa的包含進(jìn)來！此時我們修改css代碼為

1. <font size="4">.aaa{background:#099; width:500px; height:300px; padding-left:50px;}
   
2. .bbb{ background:#F00; width:300px; height:100px;}
   
3. </font>

復(fù)制代碼

此時我們看到這個類為.aaa的 多了一個padding-left:50px; 這個表示什么意識呢？值得是內(nèi)邊距左側(cè)50px，誰在誰的內(nèi)部，.bbb在.aaa的內(nèi)部，那么此時我們?nèi)绻�要用�?nèi)邊距padding的話，就應(yīng)該修改大的那個div的內(nèi)邊距，那么就是這個類為.aaa的css屬性！（當(dāng)然可能會有人講我單獨設(shè)置這個類別為.bbb的div的外邊距marigin-left:50px; 這樣不也是可以的嘛。）


如果我們來寫

1. padding:25px 50px 45px 10px;}

復(fù)制代碼

的這個表示的是內(nèi)邊距為：25px 50px 45px 10px 這個順序分別是上 右 下 左
如果是2個數(shù)值呢：代碼如下

1. .aaa{background:#099; width:500px; height:300px; padding:25px 50px }
   
2. .bbb{ background:#F00; width:300px; height:100px; }

復(fù)制代碼

這個就表示的是，上下是25px 左右是50px

1. .aaa{background:#099; width:500px; height:300px; }
   
2. .bbb{ background:#F00; width:300px; height:100px; margin:25px auto;}

復(fù)制代碼

道勤主機(jī)提供365天*24小時全年全天無休、實時在線、零等待的售后技術(shù)支持。竭力為您免費處理您在使用道勤主機(jī)過程中所遇到的一切問題! 如果您是道勤主機(jī)用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費電話、后臺提交工單這些方式聯(lián)系道勤主機(jī)客服！ 如果您不是我們的客戶也沒問題，點擊頁面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購買后，我們?yōu)槟�免費進(jìn)行無縫搬家服務(wù)，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)！

奇�；ヂ�(lián)

謝謝 道勤                                            

asp老師

奇睿互聯(lián) 發(fā)表于 2016-10-3 17:27
謝謝 道勤

感謝您的支持