盒子模型
来源：程序员人生 发布时间：2015-01-21 08:16:39 阅读次数：3031次
这个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个标准，大家可以百度下。
如果自己学习的话可以下载代码然后自己修改参数，运行试试。
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
