詳解塊級元素與行級元素

2022-09-08 02:48:12 字數 2283 閱讀 2652

html中的元素可分為兩種型別:塊級元素和行級元素。這些元素的型別是通過文件型別定義(dtd)來指明。塊級元素:顯示在一塊內,會自動換行,元素會從上到下垂直排列,各自佔一行,如p,ul,form,div等標籤元素。行內元素:元素在一行內水平排列,高度由元素的內容決定,height屬性不起作用,如span,input等元素。

每個塊級元素預設佔一行高度,一行內新增乙個塊級元素後無法一般無法新增其他元素(float浮動後除外)。兩個塊級元素連續編輯時,會在頁面自動換行顯示。塊級元素一般可巢狀塊級元素或行內元素;

塊級元素一般作為容器出現,用來組織結構,但並不全是如此。有些塊級元素,如只能包含塊級元素。其他的塊級元素則可以包含 行級元素如.也有一些則既可以包含塊級,也可以包含行級元素。

div 是最常用的塊級元素,元素樣式的display:block都是塊級元素。它們總是以乙個塊的形式表現出來,並且跟同級的兄弟塊依次豎直排列,左右撐滿。

①、總是在新行上開始;

②、高度,行高以及外邊距和內邊距都可控制;

③、寬度預設是它的容器的100%,除非設定乙個寬度。

④、它可以容納內聯元素和其他塊元素

行內元素一般都是基於語義級(semantic)的基本元素,只能容納文字或其他行內元素,常見內聯元素 「a」。比如 span 元素,iframe元素和元素樣式的display : inline的都是行內元素。例如文字這類元素,各個字母 之間橫向排列,到最右端自動折行。

①、和其他元素都在一行上;

②、寬度就是它的文字或的寬度,不可改變;

③丶行內元素只能容納文字或者其他內聯元素

demo

普通的div塊

這是普通span

這是普通span

這是普通span

這是span,被改造成了塊級元素

結果:

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 – 無序列表

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 – 下劃線

行級元素 塊級元素

一.元素分類 行間元素 inline span,strong,em,a,del 塊級元素 block div,p,h1 h6,ul,ol,li,form,address 行塊級元素 inline block img 1.行間元素 內容決定元素所在位置,不可以通過css改變寬高。1234 設定的寬高無...

HTML 塊級元素與行級元素

一 行內元素與塊級元素 塊級元素列表 定義位址 定義 標題 定義列表中定義條目 定義文件中的分割槽或節 定義列表 定義列表中的專案 定義乙個框架集 建立 html 表單 定義最大的標題 定義副標題 定義標題 定義標題 定義標題 定義最小的標題 建立一條水平線 元素為 fieldset 元素定義標題 ...

塊級元素與行級元素分類

塊級元素 定義位址 定義 標題 定義列表中定義條目 定義文件中的分割槽或節 定義列表 定義列表中的專案 定義乙個框架集 建立 html 表單 定義最大的標題 定義副標題 定義標題 定義標題 定義標題 定義最小的標題 建立一條水平線 元素為 fieldset 元素定義標題 標籤定義列表專案 為那些不支...