《Web前端開發基礎》課件-視頻9 盒子的計算_第1頁
《Web前端開發基礎》課件-視頻9 盒子的計算_第2頁
《Web前端開發基礎》課件-視頻9 盒子的計算_第3頁
《Web前端開發基礎》課件-視頻9 盒子的計算_第4頁
《Web前端開發基礎》課件-視頻9 盒子的計算_第5頁
已閱讀5頁，還剩3頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

盒子模型

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

<head><title>盒子模型的計算思考題</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;/*左側外邊距為0，其余為20像素*/

padding:10px0px10px10px;/*右側內邊距為0，其余10像素*/

list-style:none

/*取消項目符號*/}.withborder{

border-style:dashed;

border-width:5px;

/*設置邊框為2像素*/

border-color:black;

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

<body>

<h1>標準流中的盒子模型演示</h1>

<ul>

<li>第1個項目內容</li>

<liclass="withborder">第2個項目內容，第2個項目內容，第2個項目內容，第2個項目內容，第2個項目內容，第2個項目內容。</li>

</ul>

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

<html>

<head>

<title>盒子模型的計算思考題</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>標準流中的盒子模型演示</h1>

<ul>

<li>第1個項目內容</li>

</ul>

</body>

</html>

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

margin-top和margin-bottom的這種塌陷現象在制作網頁時要特別注意，否則常常會被增大了margin-top或者margin-bottom值卻發現塊沒有移動的假象所迷惑。所以，k和n的值是多少呢？k=15px

溫馨提示

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

評論

0/150

提交評論