11-8盒模型--寬度和高度 · 初識HTML+CSS

盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的，css內定義的寬（width）和高（height），指的是填充以里的內容范圍。因此一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。 [![](http://img.mukewang.com/539fbb3a0001304305570259.jpg)](http://img.mukewang.com/539fbb3a0001304305570259.jpg) 元素的高度也是同理。比如： css代碼： ~~~ div{ width:200px; padding:20px; border:1px solid red; margin:10px; } ~~~ html代碼： ~~~ <body> <div>文本內容</div> </body> ~~~ 元素的實際長度為：10px+1px+20px+200px+20px+1px+10px=262px。在chrome瀏覽器下可查看元素盒模型，如下圖： [![](http://img.mukewang.com/543b4cae0001b34304300350.jpg)](http://img.mukewang.com/543b4cae0001b34304300350.jpg) ### 任務 **任務：我也來試試，為列表每一項長度設置為200px** （上一節中的列表項長度為什么這么長啊，不明白同學是不是應該看一看標簽分類那一小節，li是塊狀元素，**塊狀元素有一個特點之一：在不設置寬度的情況下，顯示為父容器的100%**。） 1.在右邊編輯器的第9行，輸入下列代碼： ~~~ width:200px;height:30px; ~~~ ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>寬度和高度</title> <style type="text/css"> li{ border-bottom:1px dotted #ccc; width:200px;height:30px; } </style> </head> <body> <ul> <li>別讓不會說話害了你</li> <li>二十七八歲就應該有的見識</li> <li>別讓不好意思害了你</li> </ul> </body> </html> ```