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

昨天用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代碼如下：

  #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 - 非排序列表