Div span 标签详解
<div>（divsion）簡單而言是一個取款容器標記，也就是說<div></div>之間是一個容器，可以容納段落，標題，表格，圖片，章節，摘要和備注等各種HTML元素。因此，可以把<div>與</div>中的內容視為一個獨立的對象，用于CSS的控制。聲明時只要對<div>進行相應的控制，其中的各標簽元素都會因此而改變。
<Span>標記和<div>標記一樣，作為容器標記而被廣泛用于HTML語言中。
<div>與<span>區別
區別在于，<div>是一個塊級(block-level)元素，它包圍的元素會自動換行。而<span>僅僅是一個行內元素(inline element)，在它的前后不會換行。<span>沒有結構上的意義，純粹是應用樣式，當其他行內元素都不合適時，就可以使用<span>元素。
需要注意的是，<span>標記可以包含于<div>標記之中，成為他的子元素，而反過來則不成立，即<span>標記不能包含<div>標記。
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<p>div標記不同行</p>
<div><img src="0550372.gif" border="0"/></div>
<div><img src="0550372.gif" border="0"/></div>
<div><img src="0550372.gif" border="0"/></div>
<p>span標記在同一行</p>
<span><img src="0550372.gif" border="0" /></span>
<span><img src="0550372.gif" border="0" /></span>
<span><img src="0550372.gif" border="0" /></span>
</body>
</html>
顯示瀏覽器上的效果
?
?
盒子模型
所有頁面中的元素都可以看成是一個盒子，占據著一定的頁面空間。
一個盒子模型由content（內容），border（邊框），padding（間隙）和margin（間隔）這4個部分組成。如圖
| ???????????????margin-top
|
一個盒子的實際寬度(或高度)是由conetnt+padding+border+margin組成的。在CSS中可以通過設定width和height的值來控制content的大小，并且對于任何一個盒子，都可以分別設定4條邊個子的border，padding和margin。
1Border一般用于分離元素，border的外圍即為元素的最外圍，因此計算元素實際的寬和高時，就要將border納入。注意：在兩種瀏覽器中的執行結果，可以看出IE并沒有對border的背景上色，而firefox的作用域為content+padding+border。
2，padding用于控制content與border之間的距離
當某些時候需要同時設置4個方向的padding值時，可以將4個語句合并到一起，用padding語句統一書寫。Padding:上?右?下?左;
3，margin指的是元素與元素之間的距離。
從直觀上而言，margin用于控制塊與塊之間的距離。倘若將盒子模型比作展覽館里展出的一幅幅畫，那么content就是圖畫本身，padding就是畫面與畫框之間的留白，border就是畫框，而margin就是畫與畫之間的距離。
特別說明：當兩個行內元素緊鄰的時候，他們之間的距離為第1個元素的margin-right加上第2個元素的margin-left。但倘若不是行內元素，而是產生換行效果的塊級元素，情況就會變得有一些不同。兩個塊級元素之間的距離不再是margin-bottom與margin-top的和，而是兩者中的較大者。
除了上面提到的行內元素間隔和塊級元素間隔這兩種關系外，還有一種位置關系，他的margin值對CSS排版也有重要的作用，這就是父子關系。其中子塊的margin將以父塊的content為參考
另外需要指出，IE與Firefox在margin的細節處理上又有區別。設定的父div的高度值小于子塊的高度加上margin的值，此時IE瀏覽器會自動擴大，保持子元素的margin-bottom的空間以及父元素自身的padding-bottom。而Firefox就不會，它會保證元素的height高度的完全吻合，而這時子元素將超過父元素的范圍，如圖所示
?
???????????????? ??
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js</title>
<style type="text/css">
div.father{
background-color:#fffebb;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
border:1px solid #000000;
height:40px;
}
div.son{
background-color:#a2d2ff;
margin-top:10px;
margin-bottom:0px;
padding:15px;
border:1px dashed #004993;
}
</style>
</head>
?
<body>
<div class="father">
<div class="son">子div</div>
</div>
</body>
</html>
以上提及的是margin值都為正數的時候。其實margin的值為負數的應用也很多。這里不再舉例了
元素的定位
圍繞CSS定位的集中原理方法，進行介紹，包括position，float和z-index。這里的定位不是<table>進行排版，而是用CSS的方法對頁面的塊元素的定位
1，??float定位
注：在CSS中可以通過設置快元素的clear屬性，清除對float的影響。
2，??position定位
postion屬性一共有4個值，分別為static，absolute，relative和fixed。
（1）???????static為默認值，它表示塊保持在原本應該在的位置上，即改值沒有任何移動的效果。
（2）???????當子塊的postion值設為absolute時，子塊已經不再從屬于父塊。
注：top，right，bottom和left這4個css屬性，他們都是配合position屬性使用的，不但可以設置為絕對像素，也可以設置為表分數，表示塊的各個邊界離頁面邊框（postion=absolute）的距離，或者各個邊界離原來位置（postion=relative）的距離。只有當postion屬性設置為absolute或者relative時才能生效。如果設置為static，則子塊不會有任何變化。
在IE瀏覽器中，如果right和bottom值沖突，就會只有left和top兩個位置發揮作用，但是在火狐瀏覽器中，為了滿足4個邊界的要求，子塊的大小會被改變。
（3）塊的postion設置為relative時，與將其設置為absolute時完全不同。這時子塊是相對于其父塊來進行定位的，同樣配合top，right，bottom和left這4個屬性來使用的。
（4）當塊的postion參數設置為fixed，本質上與將其設置為absolute一樣，只不過不隨著瀏覽器的滾動條向上或者向下移動。IE7與IE6一樣，依然不支持postion屬性的fixed值。
3，z-index空間位置
Z-index屬性作用域調整定位時重疊塊的上下位置，想象頁面為x-y軸，垂直于月面的方向為z軸，z-index值大的頁面位于其值小的上方。
當塊被設置了 postion 屬性時，該值便可設置各塊之間的重疊高低關系。默認的 z-index 值為 0 ，當兩個快的 z-index 值一樣時，保持原有的高低覆蓋關系。總結
以上是生活随笔為你收集整理的Div span 标签详解的全部內容，希望文章能夠幫你解決所遇到的問題。
