塊級元素與行內元素的區別

2022-07-24 11:51:11 字數 1072 閱讀 7220

塊級元素與行內元素的區別

塊級元素和行內元素是布局最基本的兩種元素,我們都知道常見的塊級元素有div,p,form,ul,li等,行內元素有span,strong,em等,對於這兩者的區別,我也只是簡單的了解了一番,要正真的理解及掌握,還得在不斷的練習中深入體會。下面是他們的區別:

對於塊級元素:

對於行內元素:

塊級元素和行內元素的css相關屬性是:display,其中塊級元素對應與display:block;行內元素對應於display:inline;我們可以通過這個屬性來切換這兩個元素。

display:inline 的作用是設定物件做為行內元素顯示,inline是內聯物件的預設值(ps:內聯物件就是不自動產生換行的元素,比如span) 而我們一般用的div是塊級元素,預設display屬性是block, 但將div的display設定為inline的話,則多個div可以像span一樣顯示在一行了。

相關聯的幾點總結

display:inline 對應不顯示為 display:none

display:block 對應不顯示為 hidden

說通俗點 樣式為none的元素不佔位置,而樣式為hidden的元素雖然不顯示但還是佔地方。

visibility:visible(元素可見,預設值)

visibility:hidden(元素不可見,但仍然為其保留相應的空間)

visibility:none 和 display:hidden 的區別是:

display:none;

使用該屬性後,html元素(物件)的寬度、高度等各種屬性值都將「丟失」;

visibility:hidden;

使用該屬性後,html元素(物件)僅僅是在視覺上看不見(完全透明),而它所佔據的空間位置仍然存在,也即是說它仍具有高度、寬度等屬性值。

如果想讓某一段**在前台不顯示,最簡單的方法是用css的display:none(某些情況下可以使用left:-100000px來達到同樣效果。),這樣,下邊的內容就自動填補這個空隙。但是在一些特殊的情況下,我們只需要隱藏這個元素,但它的位置不能被占用了,那麼,visibility:hidden就可以實現這個要求。

塊級元素與行內元素區別

1.塊級元素 特性 佔一行顯示,可以設定寬度和高度 屬性 描述 位址長的引用 標題 列表中定義條目 劃分區域 定義列表 列表中專案 框架集表單 標題 一級到六級 一條水平線 為fieldset元素定義標題 列表給不支援框架的瀏覽器顯示文字,frameset元素內部 在指令碼未被執行時的替代內容 有序...

行內元素與塊級元素的區別

1 塊級元素 div p form ul,li ol,dl,form,address,fieldset,hr,menu,table 2 行內元素 span,strong,em,br,img input,label,select,textarea,cite,塊級元素會單獨佔一行,預設情況下,其寬度自動...

塊級元素與行內元素的區別

htm元素一般分塊級元素和行內元素。塊級元素 塊級元素單獨一行,可以設定寬度高度,可以設定margin,padding。可以成為其他元素的容器,可以容納塊級元素可行內元素。常見的塊級元素有div,p h1 h6,ul,table,form,hr等。行內元素 行內元素設定width無效,height無...