HTML行內元素和塊級元素

2021-10-05 12:59:16 字數 1623 閱讀 5643

特點注意

塊級元素

div h1~h6

p ul ol li

比較霸道;自己獨佔一行

高度,寬度、外邊距以及內邊距都可以控制

寬度預設是容器(父級寬度)的100%

是乙個容器及盒子,裡面可以放行內或者塊級元素

文字類的元素內不能使用塊級元素;標籤主要用於存放文字,因此 裡面不能放塊級元素,特別是不能放;同理~等都是文字類塊級標籤,裡面也不能放其他塊級元素

行內(內聯)元素

span a

strong b

em i del

s ins u

相鄰行內元素在一行上,一行可以顯示多個

高和寬直接設定是無效的

預設寬度就是它本身內容的寬度

行內元素只能容納文字或其他行內元素

鏈結裡面不能再放鏈結;特殊情況鏈結 裡面可以放塊級元素,但是給 轉換一下塊級模式最安全

行內塊元素

img input td

button

和相鄰行內元素(行內塊)在一行上,但是他們之間會有空白縫隙;一行可以顯示多個(行內元素特點)

預設寬度就是它本身內容的寬度(行內元素特點)

高度,行高、外邊距以及內邊距都可以控制(塊級元素特點)

元素模式

元素排列

設定樣式

預設寬度

包含塊級元素

一行只能放乙個塊級元素

可以設定寬度高度

容器的100%

容器級可以包含任何標籤

行內元素

一行可以放多個行內元素

不可以直接設定寬度高度

它本身內容的寬度

容納文字或則其他行內元素

行內塊元素

一行放多個行內塊元素

可以設定寬度和高度

它本身內容的寬度

判斷乙個標籤屬於哪一類只需要設定寬高即可證明

行內元素 上下的margin是無效的,可以指定左右margin值

p標籤裡面 + div 是有問題的

HTML 塊級元素和行內元素

行內內容是說由行內元素組成的內容,行內元素大家都知道吧,比如 span 元素,iframe元素和元素樣式的display inline的都是行內元素。例如文字這類元素,各個字母 之間橫向排列,到最右端自動折行。塊級內容跟則是由塊級元素構成,div 是最常用的塊級元素,元素樣式的display blo...

html塊級元素和行內元素

塊元素一般都從新行開始,它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤 p form 這個塊元素比較特殊,它只能用來容納其他塊元素。如果沒有css的作用,塊元素會順序以每次另起一行的方式一直往下排。而有了css以後,我們可以改變這種html的預設布局模式,把塊元素擺放到你想要 的位置上去。而不...

html 行內元素和塊級元素

行內元素一般是內容的容器,而塊級元素一般是其他容器的容器。一般情況下,行內元素只能包含內容或者其它行內元素,寬度和長度依據內容而定,不可以設定,可以和其它元素和平共處於一行 而塊級元素可以包含行內元素和其它塊級元素,且佔據父元素的整個空間,可以設定 width 和 height 屬性,瀏覽器通常會在...