第5章css盒模型-資料下載頁
2024-09-28 16:01本頁面
【導(dǎo)讀】CSS將所有的網(wǎng)頁元素都看做是一個(gè)矩形框，這個(gè)框由元素的。填充是元素的內(nèi)容與邊框之間的空間。CSS把盒子分為兩種基本形態(tài)：。默認(rèn)狀態(tài)下，塊狀元素的寬度為100％。行內(nèi)元素沒有高度和寬度。padding區(qū)域在邊框之內(nèi)，margin區(qū)域在邊框之外。請(qǐng)你算一算我在網(wǎng)頁上占據(jù)多大空間？每條邊框有3種屬性：。none無邊框，默認(rèn)值。同時(shí)設(shè)置4個(gè)邊框。padding:2px4px6px;/*上，左右，下*/. 填充常用于創(chuàng)建一個(gè)呈現(xiàn)背景的區(qū)域。可以單獨(dú)設(shè)置上、右、下、左邊界的大小。
【正文】 ht: 100px。 backgroundcolor: FFCC66。 } son { width: 50px。 height: 50px。 backgroundcolor: 99CCFF。 margintop: 30px。 } ? 例： 父子垂直邊界重疊（續(xù)） 發(fā)生邊界重疊 ? 避免父子垂直邊界重疊的方法是，給父元素設(shè)置填充或邊框，將父子元素的邊界分隔開。 父子垂直邊界重疊（續(xù)） father { width: 100px。 height: 100px。 backgroundcolor: FFCC66。 padding: 1px。 } son { width: 50px。 height: 50px。 backgroundcolor: 99CCFF。 margintop: 30px。 } 盒的高度與文本溢出 ? 如果盒子不設(shè)置高度，當(dāng)內(nèi)容增加時(shí)，盒子會(huì)自動(dòng)增加高度以適應(yīng)內(nèi)容。 高度自適應(yīng) box { width: 300px。 border: 1px solid 000000。 background: CCFFCC。 } ? 如果盒子設(shè)置了高度，當(dāng)內(nèi)容增加時(shí)，盒子不會(huì)增加高度，而是讓內(nèi)容溢出盒子。 高度固定，文本溢出 box { width: 300px。 height: 150px。 border: 1px solid 000000。 background: CCFFCC。 } ? 但是 IE6 瀏覽器對(duì)盒子的高度作了錯(cuò)誤的解析，即使盒子設(shè)置了高度，它也讓盒子增加高度以適應(yīng)內(nèi)容。 IE6 對(duì)高度的錯(cuò)誤解析 IE6 對(duì)高度的 錯(cuò)誤解析 box { width: 300px。 height: 150px。 border: 1px solid 000000。 background: CCFFCC。 } 150px ? 對(duì)于標(biāo)準(zhǔn)瀏覽器，可以使用 CSS的 overflow 屬性來控制內(nèi)容的溢出方式。 ? overflow: visible 默認(rèn)值，讓溢出的內(nèi)容顯示。 ? overflow: scroll 添加滾動(dòng)條。 ? overflow: auto 在內(nèi)容溢出的時(shí)候添加滾動(dòng)條。 ? overflow: hidden 隱藏任何溢出的內(nèi)容 控制文本溢出方式 幾種溢出方式的比較 overflow: visible。 overflow: auto。 overflow: hidden。
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1