（二）盒子模型
一個漂亮的網(wǎng)頁，除了有漂亮的圖片外，還要有漂亮的頁面布局，頁面布局的好壞，對頁面的美觀度也是至關(guān)重要的！！
通過觀察大量網(wǎng)站頁面布局，都會用到盒子模型進(jìn)行頁面布局，那什么是盒子模型呢？
關(guān)于盒子模型，看了講解視頻，也是云里霧里的，下面是個人的一些理解，不足之處還請前輩們給予指點...
盒子模型簡而言之就是一間房間里面，放一個盒子，而盒子里面放的也有珠寶。房間相當(dāng)于一個完整的html頁面，盒子可以理解為一個<div></div>塊，珠寶就是div標(biāo)簽中存放的內(nèi)容。
一個簡單的盒子模型頁面就是：
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中值的個數(shù)：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;
}
?
轉(zhuǎn)載于:https://www.cnblogs.com/xianxifan/p/4580054.html
總結(jié)
- 上一篇： java 单链表
- 下一篇： Java去除掉HTML里面所有标签的两种