很多人對盒子模型搞暈頭了，下麵通過一個簡單的代碼來分析盒子模型的結構！ 為了方便方便觀看！在第一個div中畫了一個表格，並將其尺寸設置成與div內容大小一樣！且設置body的margin和padding的屬性都為0px； 本例子採用行內CSS樣式！ 代碼如下： 1 2 3 4 5 6 7 8 9 1 ...
很多人對盒子模型搞暈頭了，下麵通過一個簡單的代碼來分析盒子模型的結構！
為了方便方便觀看！在第一個div中畫了一個表格，並將其尺寸設置成與div內容大小一樣！且設置body的margin和padding的屬性都為0px；
本例子採用行內CSS樣式！
代碼如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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=utf-8" />
<title>盒子模型</title>
</head>
<body style="margin:0px; padding:0px;">
<div style="width:900px; height::auto">
<div style="width:900px; height:100px; color:#FFF; padding:25px; margin:25px;border: 50px solid #0CF; ">
<table width="900px" height="100px" border="1" cellspacing="0" cellpadding="0" bordercolor="#FF0000">
<tr >
<td style="text-align:center; font-size:36px;">Javalittleman</td>
</tr>
</table>
</div>
<div style="width:30%; height:120px; float:left; border-color:#039;"></div>
<div style="width:70%; height:120px;float:left; "></div>
<div style="width:900px; height:120px;float:left; "></div>
</div>
</body>
</html>
|
把標尺打開！
大家發現了什麼沒有？
分析如下：
顯示效果：
其它設置的table是固定不變的，也就是說內容大小都不會改變的，改變的只是位置！
border：是邊框，向外擴張，並可以為其添加顏色屬性；
margin：是向外擴張，沒有顏色屬性，所以我們看到擴張後的顏色是外部的顏色，在本例子中是無色的！
padding：是向內填充的，沒有顏色屬性，顯示的顏色是內部內容設置的顏色！
