塊級元素和行內元素以及display:block

根據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> 定義變量

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章