《Web前端開發(fā)基礎(chǔ)》課件-視頻9 盒子的計(jì)算_第1頁(yè)
《Web前端開發(fā)基礎(chǔ)》課件-視頻9 盒子的計(jì)算_第2頁(yè)
《Web前端開發(fā)基礎(chǔ)》課件-視頻9 盒子的計(jì)算_第3頁(yè)
《Web前端開發(fā)基礎(chǔ)》課件-視頻9 盒子的計(jì)算_第4頁(yè)
《Web前端開發(fā)基礎(chǔ)》課件-視頻9 盒子的計(jì)算_第5頁(yè)
已閱讀5頁(yè)，還剩3頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

盒子模型

--盒子的計(jì)算01計(jì)算水平寬度計(jì)算垂直高度02目錄<!DOCTYPEhtml><html>

<head><title>盒子模型的計(jì)算思考題</title><styletype="text/css">body{

margin:0000;

font-family:宋體;}ul{

background:#ddd;

margin:15px;

padding:10px;

font-size:12px;

line-height:14px;}h1{

background:#ddd;

margin:15px;

padding:10px;

height:30px;

font-size:25px;}p,li{

color:black;

/*黑色文本*/

background:#aaa;

/*淺灰色背景*/

margin:20px20px20px20px;/*左側(cè)外邊距為0，其余為20像素*/

padding:10px0px10px10px;/*右側(cè)內(nèi)邊距為0，其余10像素*/

list-style:none

/*取消項(xiàng)目符號(hào)*/}.withborder{

border-style:dashed;

border-width:5px;

/*設(shè)置邊框?yàn)?像素*/

border-color:black;

margin-top:20px;}</style></head>

<body>

<h1>標(biāo)準(zhǔn)流中的盒子模型演示</h1>

<ul>

<li>第1個(gè)項(xiàng)目?jī)?nèi)容</li>

<liclass="withborder">第2個(gè)項(xiàng)目?jī)?nèi)容，第2個(gè)項(xiàng)目?jī)?nèi)容，第2個(gè)項(xiàng)目?jī)?nèi)容，第2個(gè)項(xiàng)目?jī)?nèi)容，第2個(gè)項(xiàng)目?jī)?nèi)容，第2個(gè)項(xiàng)目?jī)?nèi)容。</li>

</ul>

</body></html>h1標(biāo)簽ul標(biāo)簽li標(biāo)簽withborder類選擇器并集選擇器a=15px（h1的左外邊距）b=10px+20px=30px（ul的左內(nèi)邊距+li的左外邊距）c=5px（第2個(gè)li的左邊框）d=10px（第2個(gè)li左內(nèi)邊距）e=？（）f=5px（第2個(gè)li右邊框）g=10px+20px=30px（ul的右內(nèi)邊距+li的右外邊距）h=15px（ul的右外邊距或h1的右外邊距）計(jì)算水平距離i=15px（h1的上外邊距）j=10px+30px+10px=50px（h1的上內(nèi)邊距+文字行高+h1的下內(nèi)邊距）k=15px+15px=30px（h1的下外邊距+ul的上外邊距）？？l=10px+20px=30px（ul的上內(nèi)邊距+第1個(gè)li的上外邊距）m=10px+10px+14px=34px（第1個(gè)li的上內(nèi)邊距+下內(nèi)邊距+文字高）n=20px（第1個(gè)li的下外邊距+第2個(gè)li的上外邊距）？？o=5px+5px+14px*2+10px+10px=58px（第2個(gè)li上邊框距離+下邊框距離+2行文字+第2個(gè)li的上內(nèi)邊距+下內(nèi)邊距）p=20px+10px=30px（第2個(gè)li下外邊距+ul標(biāo)簽的下內(nèi)邊框）計(jì)算垂直距離<!DOCTYPEhtml>

<html>

<head>

<title>盒子模型的計(jì)算思考題</title>

<styletype="text/css">

body{

margin:0000;

font-family:宋體;

}

h1{

background:#ddd;

margin-bottom:100px;

}

ul{

background:#ddd;

margin-top:10px;

}

</style>

</head>

<body>

<h1>標(biāo)準(zhǔn)流中的盒子模型演示</h1>

<ul>

<li>第1個(gè)項(xiàng)目?jī)?nèi)容</li>

</ul>

</body>

</html>

k和n的值：這個(gè)高度是110px嗎？測(cè)試方法：將ul的margin-top加大到80px（不要超過h1下外邊框）結(jié)果：刷新后，發(fā)現(xiàn)高度并沒有發(fā)生變化原因：h1和ul屬于兩個(gè)塊級(jí)元素，距離不是margin-bottom和margin-top的總和，而是兩者中的較大者。這個(gè)現(xiàn)象叫外邊距的“塌陷”（或“合并”）現(xiàn)象。取較小的外邊距合并（或塌陷）到了較大的外邊距中。h1ulmargin-bottommargin-toph1ulmax(margin-bottom,margin-top)特別注意?。?！

margin-top和margin-bottom的這種塌陷現(xiàn)象在制作網(wǎng)頁(yè)時(shí)要特別注意，否則常常會(huì)被增大了margin-top或者margin-bottom值卻發(fā)現(xiàn)塊沒有移動(dòng)的假象所迷惑。所以，k和n的值是多少呢？k=15px

溫馨提示

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

評(píng)論

0/150

提交評(píng)論