根據CSS規範的規定,每一個網頁元素都有一個display屬性,用於確定該元素的類型,每一個元素都有默認的display屬性值,比如div元素,它的默認display屬性值爲“block”,成爲“塊級”元素(block-level);而span元素的默認display屬性值爲“inline”,稱爲“行內”元素。
塊級元素:
動佔據一定矩形空間,可以通過設置高度、寬度、內外邊距等屬性,來調整的這個矩形的樣子;
行內元素:
自己的獨立空間,它是依附於其他塊級元素存在的,因此,對行內元素設置高度、寬度、內外邊距等屬性,都是無效的。
例子:
鏈接
a 元素,在默認情況下是是“行內元素”,因此對a元素設置高度、寬度等屬性,都是無效的。而比如div,p,li,img等默認情況下的display屬性值就是“block”。所以對於鏈接a來說只能這樣:display:block;強制將它改成塊元素。
看完概念看代碼:
<
style
>
span,div{background-color:#F60;margin-bottom:5px;margin-left:5px;height:50Px;}
</
style
>
<
div
style
=
"background-color:#F60"
>Div默認爲 block</
div
>
<
span
style
=
"display:block;"
>加了block屬性</
span
>
<
span
style
=
"display:block;"
>加了block屬性</
span
>
<
span
style
=
"display:block;"
>加了block屬性</
span
>
<
span
>沒加block屬性</
span
>
<
span
>沒加block屬性</
span
>
<
span
>沒加block屬性</
span
>
效果圖:
<address> | 定義地址 |
<caption> | 定義表格標題 |
<dd> | 定義列表中定義條目 |
<div> | 定義文檔中的分區或節 |
<dl> | 定義列表 |
<dt> | 定義列表中的項目 |
<fieldset> | 定義一個框架集 |
<form> | 創建 HTML 表單 |
<h1> | 定義最大的標題 |
<h2> | 定義副標題 |
<h3> | 定義標題 |
<h4> | 定義標題 |
<h5> | 定義標題 |
<h6> | 定義最小的標題 |
<hr> | 創建一條水平線 |
<legend> | 元素爲 fieldset 元素定義標題 |
<li> | 標籤定義列表項目 |
<noframes> | 爲那些不支持框架的瀏覽器顯示文本,於 frameset 元素內部 |
<noscript> | 定義在腳本未被執行時的替代內容 |
<ol> | 定義有序列表 |
<ul> | 定義無序列表 |
<p> | 標籤定義段落 |
<pre> | 定義預格式化的文本 |
<table> | 標籤定義 HTML 表格 |
<tbody> | 標籤表格主體(正文) |
<td> | 表格中的標準單元格 |
<tfoot> | 定義表格的頁腳(腳註或表注) |
<th> | 定義表頭單元格 |
<thead> | 標籤定義表格的表頭 |
<tr> |
定義表格中的行 |
<a> | 標籤可定義錨 |
<abbr> | 表示一個縮寫形式 |
<acronym> | 定義只取首字母縮寫 |
<b> | 字體加粗 |
<bdo> | 可覆蓋默認的文本方向 |
<big> | 大號字體加粗 |
<br> | 換行 |
<cite> | 引用進行定義 |
<code> | 定義計算機代碼文本 |
<dfn> | 定義一個定義項目 |
<em> | 定義爲強調的內容 |
<i> | 斜體文本效果 |
<img> | 向網頁中嵌入一幅圖像 |
<input> | 輸入框 |
<kbd> | 定義鍵盤文本 |
<label> | 標籤爲 input 元素定義標註(標記) |
<q> | 定義短的引用 |
<samp> | 定義樣本文本 |
<select> | 創建單選或多選菜單 |
<small> | 呈現小號字體效果 |
<span> | 組合文檔中的行內元素 |
<strong> | 語氣更強的強調的內容 |
<sub> | 定義下標文本 |
<sup> | 定義上標文本 |
<textarea> | 多行的文本輸入控件 |
<tt> | 打字機或者等寬的文本效果 |
<var> | 定義變量 |