盒子模型
來源：程序員人生 發布時間：2015-01-21 08:16:39 閱讀次數：3199次
這個demo有兩個文件:hezi.html和box.css。還是老模樣，直接上代碼：
hezi.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>盒子模型</title>
<link rel="stylesheet" type="text/css" href="box.css">
</head>
<body>
<div class="div1">
<img src="1.png" />
</div>
</body>
</html>
box.css
body
{
border: 1px solid red; /* 1px表示邊框寬度， solid實線， red色彩 */
width: 600px;
height: 500px;
margin: 0 auto; /* 讓body自動居中 */
}
/* 盒子模型 概念：margin，padding，border */
.div1
{
width: 100px;
height: 100px;
border: 1px solid blue;
margin: 5px 0px 0px 5px;
/*padding-top: 80px;*? /* 注意：padding會將盒子撐破 */
}
.div1 img
{
width: 90px;
height: 50px;
margin-top: 5px;
margin-left: 10px;
}
我們首先應當注意的 是hezi.html的第1句，他是1個標準，大家可以百度下。
如果自己學習的話可以下載代碼然后自己修改參數，運行試試。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
