很多人對盒子模型搞暈頭了,下面通過一個簡單的代碼來分析盒子模型的結構!
爲了方便方便觀看!在第一個div中畫了一個表格,並將其尺寸設置成與div內容大小一樣!且設置body的margin和padding的屬性都爲0px;
本例子採用行內CSS樣式!
代碼如下:
<!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="; height::auto"> <div style="width:900px; height:100px; background-color:#021; 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>