html中的行內元素和塊內元素分別有哪些

這篇文章主要介紹了html中的行內元素和塊內元素分別有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　HTML行內元素（inlineelement）的特點：

　　行內元素也叫內聯元素或者內嵌元素。行內元素和其他元素都在一行上，高度、行高、內邊距和外邊距都不可改變。寬度是它文字或者圖片的寬度，也是不可改變的。行內元素只能容納文本或者其他行內元素。

　　之前文章中講到的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都不會產生邊距效果。（水平方向有效，豎直方向無效）

　　行元素和塊元素分別有哪些：

　　塊元素(blockelement)

　　address-地址

　　blockquote-塊引用

　　center-舉中對齊塊

　　dir-目錄列表

　　div-常用塊級容易，也是csslayout的主要標簽

　　dl-定義列表

　　fieldset-form控制組

　　form-交互表單

　　h2-大標題

　　h3-副標題

　　h4-3級標題

　　h5-4級標題

　　h6-5級標題

　　h7-6級標題

　　hr-水平分隔線

　　menu-菜單列表

　　noframes-frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容

　　noscript-可選腳本內容（對于不支持script的瀏覽器顯示此內容）

　　ol-排序表單

　　p-段落

　　pre-格式化文本

　　able-表格

　　ul-非排序列表

　　內聯元素(inlineelement)（行內元素）

　　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中的行內元素和塊內元素分別有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!