国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  應聘面試  >  html5面試題  > 前端面試題總結整理之display篇

前端面試題總結整理之display篇

來源:千鋒教育
發布人:syq
時間: 2022-07-14 14:16:30 1657779390

  1、display:inline-block后為什么有間距?

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

千鋒教育

  - 解決這種問題的方式有:

  - 將html標簽要display:inline-block 的元素寫在一行。缺點:代碼可讀性差。

  - 給父元素設置font-size:0,給子元素設置需要的font-size值。缺點:是子元素如果里面有文字,文字會消失不見,所以又要給子元素設置font-size,增加了代碼量。

  - 給元素設置float:left,缺點需要清除浮動。

  - 設置子元素的margin-left為負值,但是元素之間的間隙大小是根據上下文的字體大小確定的,而每個瀏覽器的換行空隙大小不同,所以這個方法不通用。

  - 設置父元素 display:table;word-spacing:-1em;目前這個方法可以完美解決,且兼容其他瀏覽器。

  2、display有哪幾種屬性值?分別代表什么?Img屬于什么元素?

  display屬性的含義:display控制元素的顯示類型:

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

  常用的屬性值

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

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

  塊級元素的特點:默認站寬一整行,能設置寬度高度,縱向排列

  塊級元素有:div,p,h1,h6,ol,ul,ol,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代表的是觸發網格布局

  - 不常用的屬性值

  list-item 此元素會作為列表顯示。

  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也稱作是置換元素。

  更多關于“前端培訓”的問題,歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學,課程大綱緊跟企業需求,更科學更嚴謹,每年培養泛IT人才近2萬人。不論你是零基礎還是想提升,都可以找到適合的班型,千鋒教育隨時歡迎你來試聽。

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT