html行內元素和區塊內元素分別有哪些? html行內元素和區塊內元素的特點介紹
html行內元素有哪些? html塊內元素有哪些?本文介紹了哪些是行內元素,哪些是區塊級元素,他們的特徵和差異。
HTML行內元素(inline element)的特性:
行內元素也叫內聯元素或內嵌元素。行內元素和其他元素都在一行上,高度、行高、內邊距和外邊距都無法改變。寬度是它文字或圖片的寬度,也是不可改變的。行內元素只能容納文字或其他行內元素。
之前文章中講到的 a,img,br是行內元素。
區塊層級(block)元素的特性:
①總是在新行開始;
②高度,行高以及外邊距和內邊距都可控制;
③寬度缺省是它的容器的100%,除非設定一個寬度;
④它可以容納內聯元素和其他區塊元素。
內聯(inline)元素的特徵:
①和其他元素都在一行上;
②高,行高及外邊距和內邊距離不可改變;
③寬度就是它的文字或圖片的寬度,不可改變;
④內聯元素只能容納文字或其他內聯元素。
關於行內元素和區塊狀元素的說明:
#根據CSS規範的規定,每一個網頁元素都有一個display屬性,用於確定該元素的類型,每個元素都有預設的display屬性值,例如div元素,它的預設display屬性值為“block”,成為“區塊級”元素(block-level);而span元素的預設display屬性值為“inline”,稱為“行內”元素。 div這樣的區塊級元素,就會自動佔據一定矩形空間,可以透過設定高度、寬度、內外邊距等屬性,來調整的這個矩形的樣子;與之相反,像「span」「a」這樣的行內元素,則沒有自己的獨立空間,它是依附於其他區塊級元素存在的,因此,對行內元素設定高度、寬度、內外邊距等屬性,都是無效的。
行內、區塊狀元素差異:
(1).區塊級元素會獨佔一行,其寬度會自動填滿其父元素寬度
# 行內元素不會獨佔一行,相鄰的行內元素會排列在同一行裡,知道一行排不下,才會換行,其寬度隨元素的內容而變化
# (2). 一般情況下,區塊級元素可以設定width, height屬性,行內元素設定width, height無效
(注意:區塊級元素即使設定了寬度,仍獨佔一行的)
(3) .區塊級元素可以設定margin 和padding. 行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果,但是垂直方向的padding-top,padding-bottom, margin-top,margin-bottom都不會產生邊距效果。 (水平方向有效,垂直方向無效)
行元素和區塊元素分別有哪些:
區塊元素(block element)
address - 位址
blockquote - 區塊引用
center - 舉中對齊區塊
dir - 目錄清單
#div - 常用區塊等級容易,也是css layout的主要標籤
dl - 定義清單
fieldset - form控制群組
form - 互動表單
h1 - 大標題
h2 - 副標題
h3 - 3級標題
#h4 - 4級標題
h5 - 5級標題
#h6 - 6級標題
hr - 水平分隔線
menu - 選單清單
noframes - frames可選內容,(對於不支援frame的瀏覽器顯示此區塊內容
noscript - 可選腳本內容(對於不支援script的瀏覽器顯示此內容)
#ol - 排序表單
p - 段落
##pre - 格式化文字able - 表格ul - 非排序清單內聯元素(inline element)(行內元素)
#a - 錨點abbr - 縮寫acronym - 首字b - 粗體(不推薦)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 - 底線var - 定義變數【相關推薦】以上是html行內元素和區塊內元素分別有哪些? html行內元素和區塊內元素的特點介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...

網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能,特別是如何處理批註之間的間�...

實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中,需要實現一種交互效果:點擊某張圖片,使其周圍的...

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。
