CSS+div美化和佈局
1、<div>標記與<span>標記
<div>(division)是一個區塊容器標記 ，即<div>與</div>之間可以容納段落，標題、表格、圖片、乃至章節、摘要等各種HTML元素。
因此可以把<div>與</div>的內容視為一個獨立物件，用於CSS控制。
<span>作為容器標記來講，與<div>區別不大；二者作用都是獨立出各個區塊。
區別：<div>是一個塊級元素，包圍的元素會自動換行；
<span>是行內元素，不換行，沒有結構上的意義，純粹是應用樣式。
<body><p>div標記不同行</p> <div><img src="jpg1"></div> <div><img src="jpg2"></div> //兩張圖片自動換行 <p>div標記不同行</p> <span><img src="jpg1"></span> <span><img src="jpg2"></span>
//兩張圖片在同一行此外，<div>可以包含<span>,反之則不行。
<div>用於大區塊；
<span>用於需要單獨設定樣式的小元素，eg:一個單詞、圖片、超連結等。
2、盒子模型
盒子模型是CSS控制頁面時一個重要概念。只有很好的掌握盒子模型以及每個元素的用法，才能真正地控制頁面中各元素的位置。
所有頁面中的元素都可以看成是一個盒子，佔據著一定的頁面空間。
盒子的實際寬度（或高度）= content+border+padding+margin