html中內嵌元素和塊元素的區別、用法以及聯絡

標籤：style   blog   class   code   java   tar   

昨天用asp.net的BulletedList做一個導覽列，最終該控制項形成的html代碼是ul列表和a超連結，具體代碼如下：　　

 <ul id="BulletedList1" style="width:300px;">    <li><a href="javascript:__doPostBack(&#39;BulletedList1&#39;,&#39;0&#39;)">課程更新</a></li><li><a href="javascript:__doPostBack(&#39;BulletedList1&#39;,&#39;1&#39;)">專題講座</a></li><li><a href="javascript:__doPostBack(&#39;BulletedList1&#39;,&#39;2&#39;)">資料下載</a></li>

他在頁面中顯示的間距太擠，於是我想要用css來控制一下超連結的外邊距，和內邊距。下面是我css的代碼：

   #div_menu a{            text-decoration :none;            margin-top:10px;            padding:5px;        }        #div_menu a:hover{            color:Red;        }

我明顯是用css控制了，但是我調試後在頁面上根本沒有出現效果，以前是什麼樣的，現在依然是什麼樣。然後在網上查了一些資料，原來a標籤是內嵌元素，高，行高，以及內邊距都是不可改變的。他們是根據元素中的內容而確定元素的大小的。於是在上述的代碼中的

#div_menu a 中加上一條css控制語句 display:block;將該元素變為塊元素即可。

修改後的css代碼如下：

?

1 2 3 4 5 6 7 8 9

#div_menu a{           display:block;           text-decoration :none;           margin-top:10px;           padding:5px;       }       #div_menu a:hover{           color:Red;       }

　這樣就是實現a超連結的邊距樣式的控制。

以下總結了html中快元素和內嵌元素之間的用法、區別以及聯絡

　　內嵌元素和區塊層級元素都是html中的範疇，塊元素和內嵌元素的主要差異是塊元素是從新的一行開始。而內嵌元素一般顯示在一行上。但是可以通過css的display屬性將內嵌元素改變為塊元素，（display：block） 也可以將塊元素改變為內嵌元素（display：in-line）。

　　 內聯元素的特點

　　 1.和其他的元素顯示在一行上；

　　  2.內邊距和外邊距、高度，寬度都是不可改變的，他的寬度是根據他的顯示文本和映像的寬度

　　  3.可以通過css來將它變成為塊元素之後然後就可以用css其他樣式應用了。

 　　塊元素的特點：

　　 1.總是在新的一行上顯示；

　　 2.高度、行高、寬度、內邊距、外邊距等都是可控制的；

　　 3.他的高度預設為0，是根據元素內的內容而決定的，寬度是父元素的寬度，但是可以通過css控制它，顯示的指定他的寬度和高度，可以利用浮動和定位來將他與其他的塊元素也顯示在一行上；

 

　　常用的內聯（行內）元素

　　
* a - 錨點
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字型
* br - 換行
* cite - 引用
* code - 電腦代碼(在引用源碼的時候需要)
* dfn - 定義欄位
* em - 強調
* font - 字型設定(不推薦)
* i - 斜體
* img - 圖片
* input - 輸入框
* kbd - 定義鍵盤文本
* label - 表格標籤
* q - 短引用
* s - 中劃線(不推薦)
* samp - 定義範例電腦代碼
* select - 項目選擇
* small - 小字型文本
* span - 常用內聯容器，定義文本內區塊
* strike - 中劃線
* strong - 粗體強調
* sub - 下標
* sup - 上標
* textarea - 多行文本輸入框
* tt - 電傳文本
* u - 底線
* var - 定義變數

常用的塊元素

 

* address - 地址
* blockquote - 區塊引述
* center - 舉中對齊塊
* dir - 目錄列表
* div - 常用塊級容易，也是css layout的主要標籤
* dl - 定義列表
* fieldset - form控制組
* form - 互動表單
* h1 - 大標題
* h2 - 副標題
* h3 - 3級標題
* h4 - 4級標題
* h5 - 5級標題
* h6 - 6級標題
* hr - 水平分隔線
* isindex - input prompt
* menu - 菜單列表
* noframes - frames可選內容，（對於不支援frame的瀏覽器顯示此區塊內容
* noscript - ）可選指令碼內容（對於不支援script的瀏覽器顯示此內容）
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表