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

asp老師

好我們分別來(lái)看html代碼，這個(gè)是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ù)制代碼

好我們來(lái)定義下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ù)制代碼

此時(shí)效果如下

我們?cè)赾ss代碼當(dāng)中添加了一個(gè)margin-bottom:50px; 這個(gè)表示的是下面的邊距即為-（外邊距）
我們來(lái)看效果：

同樣的如果改為

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

復(fù)制代碼

那么此時(shí)的效果如下：

margin-left:50px; 這個(gè)表示的外面的左邊距；此時(shí)我們修改源代碼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)來(lái)！此時(shí)我們修改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ù)制代碼

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


如果我們來(lái)寫

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

復(fù)制代碼

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

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

復(fù)制代碼

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

奇�；ヂ�(lián)

謝謝 道勤                                            

asp老師

奇�；ヂ�(lián) 發(fā)表于 2016-10-3 17:27
謝謝 道勤

感謝您的支持