提示：您可以先修改部分代碼再運行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>子級元素寬大於父級元素寬的情況[請用標準瀏覽器查看]</title><style type="text/css"><!--* {margin:0px; padding:0px;}body {margin:10px; font-size:12px;}#box {background-color: #66CCFF; margin-left:200px; height: 100px; width: 300px; border: 1px solid #66CCCC; float:left;}#box2 {background-color: #33CC99; height: 30px; width: 500px; border: 1px solid #336666;float:right;}--></style></head><body><div id="box">我現在左浮動（float:left），我的寬小於子盒子，但它不會把我撐開，同時我設定了一定的左邊界，目的是方便看到子盒子越出去的情況 <div id="box2">我是子盒子，我的寬比父級要大，同時我的浮動是folat:right,所以右邊靠在父級盒子的右邊，而寬於父盒子的部分在大盒子左邊越出。</div></div><p>什麼是CSS的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名稱：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那麼內容就是盒子裡裝的東西；而填充就是怕盒子裡裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至於邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現實生活中盒子不同的是，現實生活中的東西一般不能大於盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充只有寬度屬性，可以理解為生活中盒子裡的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。在現實生活中，假設我們在一個廣場上，把不同大小和顏色的盒子，以一定的間隙和順序擺放好，最後從廣場上空往下看，看到的圖形和結構就類似我們要做的網頁版面設計了，如下圖。</p></body></html>
提示：您可以先修改部分代碼再運行
