前端面試題-display篇

1、display: inline-block後為什麼有間距?

display:inline-block是讓元素在一行顯示， 但是這些元素在html裡面是上下行排列的,所以中間有換行符,於是並排顯示就有了換行符帶來的空隙。

解決這種問題的方式有:

• -將html標籤要display:inline-block的元素寫在一行。缺點:程式碼可讀性差。
• -給父元素設定font-size:0，給子元素設定需要的font-size值。缺點:是子元素如果裡面有文字，文字會消失不見,所以又要給子元素設定font-size,增加了程式碼量。
• -給元素設定float:lef,缺點需要清除浮動。
• -設定子元素的margin-left為負值,但是元素之間的間隙大小是根據.上下文的字型大小確定的，而每個瀏覽器的換行空隙大小不同，所以這個方法不通用。
• -設定父元素display:table;word-spacing:-1em;目前這個方法可以完美解決,且相容其他瀏覽器。

2、display有 哪幾種屬性值?分別代表什麼?lmg屬於什麼元素?

display控制元素的顯示型別:

display屬性的屬性值可以分成兩大類

1）常用的屬性值——

none代表為不顯示：控制元素的隱藏；

block代表顯示為塊級元素：還可以讓元素控制元素顯示；

塊級元素的特點：預設站寬-整行，能設定寬度高度,縱向排列；

塊級元素有：div,p,h1 ,h6,ol,l,l,li,dl,dt,dd ,form,fieldset,legend,table header,footer,section,main,nav,article,aside等等。

inline代表行內元素——

行內元素的特點：不能設定寬度高度,並且能橫向顯示

行內元素有：a,b,strong,u,i,em,s,del,sup,sub,span,font,mark,var

inline-block代表行內塊元素——

行內塊元素的特點：能設定寬度高度並且橫向顯示

行內塊元素有：input,textarea,select,

flex代表的是觸發彈性盒子

grid代表的是觸發網格佈局

2）不常用的屬性值

• listitem此元素會作為列表顯示；
• run-in此元素會根據上下文作為塊級元素或內聯元素顯示；
• compact CSS中有值compact,不過由於缺乏廣泛支援，已經從CSS2.1中刪除；
• marker CSS中有值marker,不過由於缺乏廣泛支援，已經從CSS2.1中刪除；
• table此元素會作為塊級表格來顯示(類似),表格前後帶有換行符；
• inline-table此元素會作為內聯表格來顯示(類似),表格前後沒有換行符；
• table-row-group此元素會作為一個或多個行的分組來顯示(類似)；
• table-header-group此元素會作為一個或多個行的分組來顯示(類似)；
• table-footer-group此元素會作為一個或多個行的分組來顯示(類似)；
• table-row此元素會作為一個表格行顯示(類似)；
• table-column-group此元素會作為一個或多個列的分組來顯示(類似)；
• table-column此元素會作為一個單元格列顯示(類似)；
• table-cell此元素會作為一個表格單元格顯示(類似和)；
• table- caption此元素會作為一個表格標題顯示(類似)；
• inherit規定應該從父元素繼承display屬性的值。

img屬於什麼元素：

瀏覽器中的computed計算屬性中的圖片的display的取值為inline,雖然為inline但 是實際開發的時候圖片是作為

行內塊元素進行使用的，因為遵循能設定寬度高度,組還能橫向顯示;所以屬於行內塊元素,但是有些程式設計師也會把圖片認為是行內元素也是可以，從另一個角度講img也稱作是置換元素。

前端面試題庫 wap.mobiletrain.org/zcjy/