為什么有些內(nèi)聯(lián)（行內(nèi)）元素可以設(shè)置寬高？

netScorpion 發(fā)布于2019-04-23 13:31 / 3811人閱讀

摘要：宋體塊級(jí)元素主要有宋體宋體內(nèi)聯(lián)元素不會(huì)以新行開始，和相鄰的內(nèi)聯(lián)元素在同一行。也就是說，絕對(duì)定位或者浮動(dòng)的內(nèi)聯(lián)元素，實(shí)際表現(xiàn)為塊級(jí)元素，可以設(shè)置寬高和邊距。

為什么有些內(nèi)聯(lián)（行內(nèi)）元素如img、input可以設(shè)置寬高？

在說明之前我們先來了解一些定義。

塊級(jí)元素和內(nèi)聯(lián)元素：

①塊級(jí)元素總是獨(dú)占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示。

寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制。

塊級(jí)元素主要有:

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

②內(nèi)聯(lián)元素不會(huì)以新行開始，和相鄰的內(nèi)聯(lián)元素在同一行。

一般情況下，寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，只能改變左右邊距。

內(nèi)聯(lián)元素主要有:

a , abbr , acronym , b , bdo , 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

③可變?cè)兀鶕?jù)上下文關(guān)系確定該元素是塊元素還是內(nèi)聯(lián)元素：

applet , button , del , iframe , ins , map , object , script

一般情況下，行內(nèi)元素只能包含數(shù)據(jù)和其他行內(nèi)元素，而塊級(jí)元素可以包含行內(nèi)元素和其他塊級(jí)元素。

置換元素(替換元素)和非置換元素(不可替換元素)：

①置換元素

一個(gè)內(nèi)容不受CSS視覺格式化模型控制，CSS渲染模型不考慮對(duì)其內(nèi)容的渲染，且元素本身一般擁有固有尺寸（寬度，高度，寬高比）的元素，被稱之為置換元素。

瀏覽器會(huì)根據(jù)元素的標(biāo)簽和屬性，來決定置換元素的具體顯示內(nèi)容。

它們所具有的特征為：在不使用css修飾時(shí)，元素的標(biāo)簽和屬性也會(huì)影響元素的顯示。

例如，瀏覽器會(huì)根據(jù) <title>paddingtitle> <style> .test { width: 200px; height: 50px; padding: 10px; border: 1px solid #000; box-sizing: border-box; } style> head> <body> <div class="test">塊級(jí)元素div> <input class="test" type="button" value="行內(nèi)置換元素"/> <br /> <label class="test">行內(nèi)非置換元素label> <br /> 文本 body> html>

結(jié)果：

一些邊距規(guī)則：

②所有元素（除?非table | inline-table | table-caption的表格類元素之外）都可以設(shè)置橫向外邊距（margin-right/margin-left）；所有元素（除?非table | inline-table | table-caption的表格類元素和行內(nèi)非置換元素?之外）都可以設(shè)置縱向外邊距（margin-top/margin-bottom）。

③當(dāng)我們?yōu)樾袃?nèi)非置換元素設(shè)置縱向內(nèi)邊距（padding-top/padding-bottom）或縱向外邊距（margin-top/margin-bottom）時(shí)，如果不將之轉(zhuǎn)化為行內(nèi)塊（inline-block）或者塊級(jí)（block）元素，那么它的縱向邊距屬性不會(huì)影響布局。上、下邊距會(huì)在當(dāng)前元素的行框基礎(chǔ)上向頂部和底部外延，但是這些外延不會(huì)拓展新的布局大小。

④如果元素的position不是static | relative或者float不是none或者該元素是根元素，當(dāng)display: inline | inline-block | run-in | table-*系時(shí)，display的計(jì)算值為block。也就是說，絕對(duì)定位或者浮動(dòng)的內(nèi)聯(lián)元素，實(shí)際表現(xiàn)為塊級(jí)元素，可以設(shè)置寬高和邊距。