1、display：inline-block后為什么有間距?
- display:inline-block是讓元素在一行顯示，但是這些元素在html里面是上下行排列的，所以中間有換行符，于是并排顯示就有了換行符帶來的空隙。
- 解決這種問題的方式有：
- 將html標(biāo)簽要display:inline-block 的元素寫在一行。缺點：代碼可讀性差。
- 給父元素設(shè)置font-size:0,給子元素設(shè)置需要的font-size值。缺點:是子元素如果里面有文字，文字會消失不見，所以又要給子元素設(shè)置font-size,增加了代碼量。
- 給元素設(shè)置float:left,缺點需要清除浮動。
- 設(shè)置子元素的margin-left為負(fù)值，但是元素之間的間隙大小是根據(jù)上下文的字體大小確定的，而每個瀏覽器的換行空隙大小不同，所以這個方法不通用。
- 設(shè)置父元素 display:table;word-spacing:-1em;目前這個方法可以完美解決，且兼容其他瀏覽器。
2、display有哪幾種屬性值?分別代表什么?Img屬于什么元素？
display屬性的含義：display控制元素的顯示類型：
display屬性的屬性值可以分成兩大類
常用的屬性值
none代表為不顯示：控制元素的隱藏
block代表顯示為塊級元素：還可以讓元素控制元素顯示
塊級元素的特點：默認(rèn)站寬一整行，能設(shè)置寬度高度，縱向排列
塊級元素有：div,p,h1,h6,ol,ul,ol,li,dl,dt,dd,form,fieldset,legend,table,header,footer,section,main,nav,article,aside等等
inline代表行內(nèi)元素;
行內(nèi)元素的特點：不能設(shè)置寬度高度，并且能橫向顯示
行內(nèi)元素有:a,b,strong,u,i,em,s,del,sup,sub,span,font,mark,var
inline-block代表行內(nèi)塊元素
行內(nèi)塊元素的特點：能設(shè)置寬度高度并且橫向顯示
行內(nèi)塊元素有:input,textarea,select,
flex代表的是觸發(fā)彈性盒子
grid代表的是觸發(fā)網(wǎng)格布局
- 不常用的屬性值
list-item 此元素會作為列表顯示。
run-in 此元素會根據(jù)上下文作為塊級元素或內(nèi)聯(lián)元素顯示。
compact CSS 中有值 compact，不過由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。
marker CSS 中有值 marker，不過由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。
table 此元素會作為塊級表格來顯示(類似 )，表格前后帶有換行符。
inline-table 此元素會作為內(nèi)聯(lián)表格來顯示(類似 )，表格前后沒有換行符。
table-row-group 此元素會作為一個或多個行的分組來顯示(類似 )。
table-header-group 此元素會作為一個或多個行的分組來顯示(類似 )。
table-footer-group 此元素會作為一個或多個行的分組來顯示(類似 )。
table-row 此元素會作為一個表格行顯示(類似 )。
table-column-group 此元素會作為一個或多個列的分組來顯示(類似)。
table-column 此元素會作為一個單元格列顯示(類似 )
table-cell 此元素會作為一個表格單元格顯示(類似 和 )
table-caption 此元素會作為一個表格標(biāo)題顯示(類似)
inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值。
- img屬于什么元素：
瀏覽器中的computed計算屬性中的圖片的display的取值為inline，雖然為inline但是實際開發(fā)的時候圖片是作為行內(nèi)塊元素進(jìn)行使用的，因為遵循能設(shè)置寬度高度，并且還能橫向顯示；所以屬于行內(nèi)塊元素，但是有些程序員也會把圖片認(rèn)為是行內(nèi)元素也是可以，從另一個角度講img也稱作是置換元素。
更多關(guān)于“前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。
京公網(wǎng)安備 11010802030320號