1、display:inline-block后為什么有間距?
- display:inline-block是讓元素在一行顯示,但是這些元素在html里面是上下行排列的,所以中間有換行符,于是并排顯示就有了換行符帶來的空隙。
- 解決這種問題的方式有:
- 將html標簽要display:inline-block 的元素寫在一行。缺點:代碼可讀性差。
- 給父元素設(shè)置font-size:0,給子元素設(shè)置需要的font-size值。缺點:是子元素如果里面有文字,文字會消失不見,所以又要給子元素設(shè)置font-size,增加了代碼量。
- 給元素設(shè)置float:left,缺點需要清除浮動。
- 設(shè)置子元素的margin-left為負值,但是元素之間的間隙大小是根據(jù)上下文的字體大小確定的,而每個瀏覽器的換行空隙大小不同,所以這個方法不通用。
- 設(shè)置父元素 display:table;word-spacing:-1em;目前這個方法可以完美解決,且兼容其他瀏覽器。
2、display有哪幾種屬性值?分別代表什么?Img屬于什么元素?
display屬性的含義:display控制元素的顯示類型:
display屬性的屬性值可以分成兩大類
常用的屬性值
none代表為不顯示:控制元素的隱藏
block代表顯示為塊級元素:還可以讓元素控制元素顯示
塊級元素的特點:默認站寬一整行,能設(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 此元素會作為一個表格標題顯示(類似)
inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值。
- img屬于什么元素:
瀏覽器中的computed計算屬性中的圖片的display的取值為inline,雖然為inline但是實際開發(fā)的時候圖片是作為行內(nèi)塊元素進行使用的,因為遵循能設(shè)置寬度高度,并且還能橫向顯示;所以屬于行內(nèi)塊元素,但是有些程序員也會把圖片認為是行內(nèi)元素也是可以,從另一個角度講img也稱作是置換元素。
更多關(guān)于“前端培訓(xùn)”的問題,歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué),課程大綱緊跟企業(yè)需求,更科學(xué)更嚴謹,每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升,都可以找到適合的班型,千鋒教育隨時歡迎你來試聽。