html之垂直外邊距問題_第1頁
html之垂直外邊距問題_第2頁
html之垂直外邊距問題_第3頁
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、html之垂直外邊距問題之垂直外邊距、兄弟元素的垂直相鄰首先寫倆個div，分別設(shè)置寬高均為10Opx,此時倆個div在垂直方向相鄰。<!DOCTYPEhtml><html><head>vmetacharset="utf-8"><title></title></head><styletype="text/css">bodymargin:0auto;.div1width:100px;height:100px;background-color:red;.div2width

2、:100px;height:100px;background-color:#OOOOFF;</style><body><divclass="div1">我是第一個div</div><divclass="div2">我是第二個div</div></body></html>我是第一個div我是第個div為上面的div設(shè)置下邊距為100px,下面div2設(shè)置上邊框為100px.div1width:100px;height:100px;background-color

3、:red;margin-bottom:100px;.div2width:100px;height:100px;background-color:#0000FF;margin-top:100px;運(yùn)行發(fā)現(xiàn)，倆個div之間的垂直外邊距仍是100px。我是第一fdiv素之間的垂直外邊距，不是求和，而是取最大值。二、父子元素的垂直相鄰問題分別創(chuàng)建父divl和子div2。分別設(shè)置寬高和背景色vstyletype="text/css">bodymargin:0auto;.div1width:100px;height:100px;background-color:red;.div2

4、width:50px;height:50px;background-color:yellow;</style><body><divclass="div1"><divclass="div2"x/div></div></body>運(yùn)行效果現(xiàn)在設(shè)置子div2的外上邊距為50px，運(yùn)行時和子元素下移50px。對子元素設(shè)置的margin-top也影響到了父元素。這顯然不是我們想要的效果，如何只讓子元素下移50px而不影響到父元素？產(chǎn)生這種原因是：父子元素的外上邊距相鄰導(dǎo)致。我們可以通過設(shè)置父元素的上內(nèi)邊距或者上邊框，來隔開父子元素給父元素設(shè)置padding-top:1px，這樣父子元素的上邊框不再相鄰，但是設(shè)置內(nèi)邊距或者設(shè)置邊框。都會把整個可見框總面積撐大。（我們的寬高設(shè)置的只是內(nèi)容區(qū)大小，整個可見框大小包括內(nèi)邊距、邊框和內(nèi)容區(qū)）。為了維持整個可見框的總大小，我們設(shè)置height為99px。去除內(nèi)邊距影響。.div1width:100px;background-color:red;父元素高度設(shè)為99,并增加內(nèi)邊距pxheight:99px;padding-top:1px;.div2width:50px;height:50px;backgro

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論