CSS 塊級元素、內聯元素概念


《CSS權威指南》中文字顯示:任何不是塊級元素的可見元素都是內聯元素。其表現的特性是“行布局”形式,這里的“行布局”的意思就是說其表現形式始終以行進行顯示。比如,我們設定一個內聯元素border-bottom:1px solid #000;時其表現是以每行進行重復,每一行下方都會有一條黑色的細線。如果是塊級元素那么所顯示的的黑線只會在塊的下方出現。

p、h1、或div等元素常常稱為塊級元素,這些元素顯示為一塊內容;Strong。span等元素稱為行內元素,它們的內容顯示在行中,即“行內框”。(可以使用display=block將行內元素轉換成塊元素,display=none表示生成的元素根本沒有框,也既不顯示元素,不占用文檔中的空間)。

a、行內就是在一行內的元素,只能放在行內;塊級元素,就是一個四方塊,可以放在頁面上任何地方。
b、說白了,行內元素就好像一個單詞;塊級元素就好像一個段落,如果不另加定義的話,它將獨立一行出現。
c、一般的塊級元素諸如段落<p>、標 題<h1><h2>...、列表。<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>
等元素。而內聯元素則如: 表單元素<input>、超級鏈接<a>、圖像<img>、<span> ........
d、塊級無素的顯著特點是:每個塊級元素都是從一個新行開始顯示,而且其后的無素也需另起一行進行顯示。
e、<span>在CSS定義中屬於一個行內元素,而<div>是塊級元素。

對於學過CSS的人來說一聽就能明白。可對於新手來說不易理解,我主要對新手說通熟點吧!

用容器這一詞會更容易形象理解它們的存在與用途,行內元素相當一個小容器,而<div>相當於一個大容器,大容器當然可以放一個小容器了。<span>就是小容器,這樣一說你也許會在腦海中有一個初步的印象了吧,如果我們想在大容器中裝一些清水。但我也想在里裝一些墨水怎么辦?很簡單,我們把小容器拿出來裝上墨水然后放入大容器里的清水中不就成了嗎。

塊元素(block element)一般是其他元素的容器元素

塊元素一般都從新行開始,它可以容納內聯元素和其他塊元素。常見塊元素是段落標簽'P"。“form"這個塊元素比較特殊,它只能用來容納其他塊元素。

內聯元素(inline element)一般都是基於語義級(semantic)的基本元素。內聯元素只能容納文本或者其他內聯元素,常見內聯元素 “a”。

塊元素(block element)和內聯元素(inline element)都是html規范中的概念。塊元素和內聯元素的基本差異是塊元素一般都從新行開始。而當加入了css控制以后,塊元素和內聯元素的這種屬 性差異就不成為差異了。比如,我們完全可以把內聯元素cite加上display:block這樣的屬性,讓他也有每次都從新行開始的屬性。

可變元素的基本概念就是他需要根據上下文關系確定該元素是塊元素或者內聯元素。可變元素還是屬於上述兩種元素類別,一旦上下文關系確定了他的類別,他就要遵循塊元素或者內聯元素的規則限制。大致的元素分類見下文。

塊元素(block element)

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

 

內聯元素(inline element)

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

 

可變元素

可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。

applet - java applet
button - 按鈕
del - 刪除文本
iframe - inline frame
ins - 插入的文本
map - 圖片區塊(map)
object - object對象
script - 客戶端腳本

 

如果,您認為閱讀這篇博客讓您有些收獲,不妨點擊一下右下角的【推薦】。
如果,您希望更容易地發現我的新博客,不妨點擊一下左下角的【關注我】。
如果,您對我的博客所講述的內容有興趣,請繼續關注我的后續博客,我是【Ruthless】。

本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM