麻豆黑色丝袜jk制服福利网站-麻豆精品传媒视频观看-麻豆精品传媒一二三区在线视频-麻豆精选传媒4区2021-在线视频99-在线视频a

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

手機站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時隨地免費學(xué)

千鋒教育

掃一掃進入千鋒手機站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時隨地免費學(xué)習(xí)課程

當(dāng)前位置:首頁  >  應(yīng)聘面試  >  html5面試題  > 前端面試題總結(jié)整理之display篇

前端面試題總結(jié)整理之display篇

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

  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ǔ)還是想提升,都可以找到適合的班型,千鋒教育隨時歡迎你來試聽。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
快速通道
主站蜘蛛池模板: 日本年轻的妈妈| 中国老太大bbw| 夂女yin乱合集高h文| 色午夜影院| 嘟嘟嘟www免费高清在线中文| 欧美最猛黑人xxxx黑人猛交98| 性欧美黑人巨大videos| 国产成人综合欧美精品久久| 高h视频在线免费观看| 黑人xxxx日本| 西西人体44rtwww高清大但| 动漫痴汉电车1~6集在线| 青草青草久热精品视频在线观看| zooslook欧美另类dogs| 久久国产加勒比精品无码| 免费毛片在线视频| 2017狠狠干| 欧美zozozo人禽交免费大片| 久草香蕉在线| 在线中文字幕第一页| 欧美人与动欧交视频| 一个男的操一个女的| 四虎影视永久在线观看| 99亚洲精品高清一二区| 欧美日韩亚洲国产精品| 扒开女人下面| 一级无毛片| 免费看黄a级毛片| 国产成人一区二区在线不卡| 欧美xxx高清| 中文无码久久精品| 免费在线一区| 884aa四虎在线| 日产2021乱码一区| h视频免费观看| 88国产精品欧美一区二区三区| 国产v亚洲v欧美v专区| 亚洲黄区| 午夜在线播放免费高清观看| 最近更新2019中文字幕8 | 免费体验120秒视频|