html塊級元素和內聯元素小結

2022-02-12 15:25:33 字數 1334 閱讀 5674

block element 塊級元素 

顧名思義就是以塊顯示的元素,高度寬度都是可以設定的。比如我們常用的、、預設狀態下都是屬於塊級元素。塊級元素比較霸道,預設狀態下每次都佔據一整個行,後面的內容也必須再新起一行顯示。當然非塊級元素也可以通過css的display:block;將其更改成塊級元素。此外還有個特殊的,float也具有此功能。 

inline element 內聯元素 

通俗點來說就是文字的顯示方式,與塊級元素相反,內聯元素的高度寬度都是不可以設定的,其寬度就是自身文字或者的寬度。我們常用到的、、都屬於內聯元素。內聯元素的顯示特點就是像文字一樣的顯示,不會獨自佔據乙個行。當然塊級元素也能變成內聯元素,那就是通過css的display:inline;和float來實現。 

內聯元素是什麼意思呢?什麼是塊級別元素。 

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

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

a:行內就是在一行內的元素,只能放在行內;塊級元素,就是乙個四方塊,可以放在頁面上任何地方 

b:說白了,行內元素就好像乙個單詞;塊級元素就好像乙個段落,如果不另加定義的話,它將獨立一行出現。 

c:一般的塊級元素諸如段落、標題...、列表,、**、表單、div和body等元素。而內聯元素則如:表單元素、超級鏈結、影象

、... 

d:塊級無素的顯著特點是:每個塊級元素都是從乙個新行開始顯示,而且其後的無素也需另起一行進行顯示。 

e:在css定義中屬於乙個行內元素,而是塊級元素。 

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

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

我在舉個簡單的乙個實際例子吧,比如: 

abcdefg

我想用css定義字母c的樣式,因此我們就可以用到了。 

abcdefg

html塊級元素和內聯元素

塊級元素 就是乙個方塊,像段落一樣,預設佔據一行出現 內聯元素 又叫行內元素,顧名思義,只能放在行內,就像乙個單詞,不會造成前後換行,起輔助作用。一般的塊級元素諸如段落 標題.列表,body 元素的內容會顯示在瀏覽器中。title 元素的內容會顯示在瀏覽器的標題欄中。從上圖的例子可以看出,塊級元素預...

塊級元素和內聯元素

我們首先要了解,所有的html元素,都要麼是block 塊元素 要麼是inline 內聯元素 下面了解一下block inline各自的特點 block元素的特點 example source code www.52css.com 總是在新行上開始 高度,行高以及頂和底邊距都可控制 寬度預設是它的容...

塊級元素和內聯元素

塊級元素和內聯元素 塊級元素 譯為 block level element,內聯元素 譯為 inline element。塊級元素在瀏覽器顯示時,通常會以新行來開始 和結束 例子 內聯元素在顯示時通常不會以新行開始。例子 html 分組標籤 定義文件中的分割槽或節 division section ...