CSS 開始編寫需要知道的基本要點 block(塊元素)、inline(線性元素) 的性質差異

block元素特點:

總是在新行上開始;(高度,行高 以及 頂和底邊距) 都可控制;寬度缺點是它的容器的100%,除非設定一個寬度。(如果需要自動縮放 盡量不要設定高度)

能夠設置寬高,塊元素可以設置 width,height屬性.
塊元素會獨占一行,默認情況下,其寬度自動填滿其父元素寬度.
塊元素即使設置了寬度,仍然是獨占一行
塊元素可以設置 margin 和 padding 属性,即上下左右 margin [ 有效 ],上下左右 padding [ 有效 ] 塊元素對應於display:block

inline元素特點:

和其他元素 (都在一行)上;高,行高及頂和底邊距 ( 不可改變 );寬度就是它的文字或圖片的寬度( 不可改變 )。

設置寬高無效,只能由内容撑起来,即線性元素設置 width, height属性無效.
線性元素不会獨占一行,線性的行內元素會排列在同一行里,直到一行排不下,才會換行,其寬度隨元素的內容而變化.

設置上下 margin 無效,左右 margin [ 有效 ] 設置上下 padding 無效,左右 padding [ 有效 ]

線性元素的margin和padding屬性,
水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果,
但垂直方向的padding-top,padding-bottom,margin-top,margin-bottom 卻 [ 不會 ] 產生邊距效果.
線性元素對應於 display:inline

我們來具體了解它們的情況。

塊元素(block element)一般是其他元素的容器元素,塊元素一般都從新行開始,它可以容納線性元素和其他塊元素,常見塊元素是段落標簽'P\"。
“form\"這個塊元素比較非凡,它只能用來容納其他塊元素。

沒有css的作用,塊元素會順序以每次另起一行的方式一直往下排。

用css編寫後,我們可以改變這種html的預設模式,把塊元素擺放到設計的位置上去。而不是每次都愚蠢的另起一行。
table標簽也是塊元素的一種,table based layout和css based layout從一般使用者(不包括視力障礙者、盲人等)的角度來看這兩種布局,除了頁面載入速度之外,沒有其他的差別。

如果普通使用者不經意點了查看頁面源代碼按鈕後,兩者所表現出來的差異就非常大了。
基於良好重構理念設計的css頁面編寫碼,至少能讓沒有web開發經驗的普通使用者把內容快速理解。從這角度來說,css layout code應該有更好的美學體驗。

如果你能把塊容器元素div想成一個一個box(箱子),或者你玩過剪貼圖片的話,那就更加輕易理解了。

我們先把需要的文章(資訊)從各種報紙、雜誌全剪下來。每塊剪下來的內容(data)就是一個block(BOX)。
然后我們把這些紙塊按照自己的排版設計,用膠水貼到一張空白的紙上。這樣就形成了你自己獨特的文摘快報了。
作為一種技術的延伸,網頁排版設計也遵循了同樣的模式。
線性元素(inline element)一般都是基於字級(semantic)的基本元素。線性元素只能容納文本或者其他線性元素,常見線性元素 “a”。

需要說明的是:inline element的中文叫法,有多種 線性元素、內聯元素、內嵌元素、行內元素、直進式元素。
基本上沒有統一的翻譯,愛怎樣稱呼怎樣稱呼吧。
另外提到線性元素,我們會想到有個dispay的屬性是display:inline;
這個屬性能夠修復 IE 雙倍浮動 邊界問題。

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

可變元素是基于以上兩者隨環境而變化的,它的基本概念就是他需要根據上下文關系 確定該元素是塊元素或者線性元素。可變元素還是屬於上述兩種元素類別,一旦上下文關係確定了它的類別,它就要遵循塊元素 或 線性元素的規則限制。

什麼是空元素?

没有内容的HTML元素被稱為空元素。
空元素是在開始標籤中關閉的。
<br>就是沒有關閉標籤的空元素(<br>標籤定義換行)。
在XHTML、XML以及未來版本的HTML中,所有元素都必须被關閉。

由於HTML元素的內容是開始標籤與結束標籤之間的內容。
而某些HTML元素具有空內容。那些含有空内容的HTML元素,就是空元素。

空元素特點:

1.没有内容的 HTML 元素被稱為空元素。空元素是在開始標籤中關閉的。

2.由於HTML元素的内容是開始標籤与结束標籤之间的内容。而某些HTML元素具有空内容。那些含有空内容的HTML元素,就是空元素。

3.單標籤,只有開始標籤,没有结束標籤

 

 

空標籤需注意的地方?

<br />就是沒有關閉標籤的空元素(<br />標籤定義換行)。
在開始標籤中添加斜槓,比如<br />,是關閉空元素的正確方法,HTML、XHTML和XML都接受這種方式。
即使<br>在所有瀏覽器中都是有效的,但使用<br /> 其實是更長遠的保障。

HTML 元素語法

1.HTML元素以開始標籤起始 HTML元素以结束標籤終止
2.元素的內容是開始標籤與結束標籤之間的內容
3.某些HTML元素具有空内容(empty content)
4.空元素在開始標籤中進行關閉(以開始標籤的結束而結束)
5.大多數HTML 元素可擁有屬性

HTML 提示:使用小寫標籤
HTML標籤對大小寫不敏感:<P>等同於<p>。許多網站都使用大寫的HTML標籤。
W3School使用的是小寫標籤,而在未來(X)HTML版本中強制使用小寫。

html標簽的block、inline分類明細:

 

 

塊元素與線性元素的包含规则?

大多數 HTML 元素 可以包含其他 HTML 元素。

塊元素可以包含線性元素或者某些區塊元素

線性元素只能包含線性元素,不能包含區塊元素 ( 會產生程式判別錯誤 編寫BUG)

較典型的特例

1.a無所不能,但a不能包含它本身
2.p標籤不能包含區塊元素
3.h1~h6、p、dt標籤:只能包含行內元素,不能再包含區塊元素
4.li很强大,它可以包含div,甚至可以包含它的父元素ul或者ol

Comments are closed.