(二)盒子模型
一个漂亮的网页,除了有漂亮的图片外,还要有漂亮的页面布局,页面布局的好坏,对页面的美观度也是至关重要的!!
通过观察大量网站页面布局,都会用到盒子模型进行页面布局,那什么是盒子模型呢?
关于盒子模型,看了讲解视频,也是云里雾里的,下面是个人的一些理解,不足之处还请前辈们给予指点...
盒子模型简而言之就是一间房间里面,放一个盒子,而盒子里面放的也有珠宝。房间相当于一个完整的html页面,盒子可以理解为一个<div></div>块,珠宝就是div标签中存放的内容。
一个简单的盒子模型页面就是:
html页面如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="box.css"/>
<title>盒子模型</title>
</head>
<body>
<div class="se1">
<img src="1.jpg"/><br/>
<a href="#">点击信息</a>
</div>
</body>
</html>
CSS代码如下:
body{
border:1px solid red; /*1px表示边框的宽度 solid实线 red颜色*/
width:600px;
height:500px;
font-size:12px;
/*body体自动居中*/
margin:0px auto; /*0px表示上下距离,auto左右自动居中*/
}
.se1{
width:65px;
height:62px;
border:1px solid blue;
margin:5px 0px 0px 5px; /*margin中值的个数:1-->上右下左,2-->上下、右左,3-->上、右左、下,4-->上右下左*/
padding-left:5px;
}
.se1 img{
border:1px solid black;
width:40px;
height:40px;
margin-top:5px;
margin-left:5px;
margin-bottom:3px;
}