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>
//兩張圖片在同一行
</body>
此外,<div>可以包含<span>,反之則不行。
<div>用於大區塊;
<span>用於需要單獨設定樣式的小元素,eg:一個單詞、圖片、超連結等。
2、盒子模型
盒子模型是CSS控制頁面時一個重要概念。只有很好的掌握盒子模型以及每個元素的用法,才能真正地控制頁面中各元素的位置。
所有頁面中的元素都可以看成是一個盒子,佔據著一定的頁面空間。
盒子的實際寬度(或高度)= content+border+padding+margin