display幾點解釋

2021-09-22 18:49:24 字數 1553 閱讀 5027

1.解釋一下display的幾個常用的屬性值,inline , block, inline-block

圖一:

圖二:

兩個圖可以看出,display:inline-block後塊級元素能夠在同一行顯示,有人這說不就像浮動一樣嗎。沒錯,display:inline-block的效果幾乎和浮動一樣,但也有不同,接下來講一下inline-block和浮動的比較。

2.inline-block布局 vs 浮動布局

a.不同之處:對元素設定display:inline-block ,元素不會脫離文字流,而float就會使得元素脫離文字流,且還有父元素高度坍塌的效果

b.相同之處:能在某程度上達到一樣的效果

>>乍一看兩個都能做到幾乎相同的效果,(仔細看看display:inline-block中有間隙問題,這個留到下面再講)

c.浮動布局不太好的地方:參差不齊的現象,我們看乙個效果:

圖三: 

圖四: 

>>從圖3,4可以看出浮動的侷限性在於,若要元素排滿一行,換行後還要整齊排列,就要子元素的高度一致才行,不然就會出現圖三的效果,而inline-block就不會。

3.inline-block存在的小問題:

a.上面可以看到用了display:inline-block後,存在間隙問題,間隙為4畫素,這個問題產生的原因是換行引起的,因為我們寫標籤時通常會在標籤結束符後順手打個回車,而回車會產生回車符,回車符相當於空白符,通常情況下,多個連續的空白符會合併成乙個空白符,而產生「空白間隙」的真正原因就是這個讓我們並不怎麼注意的空白符。

b.去除空隙的方法:

1.對父元素新增,,即將字型大小設為0,那麼那個空白符也變成0px,從而消除空隙

現在這種方法已經可以相容各種瀏覽器,以前chrome瀏覽器是不相容的

圖一:

c.瀏覽器相容性:ie6/7是不相容 display:inline-block的所以要額外處理一下:

在ie6/7下:

對於行內元素直接使用

對於塊級元素:需新增

4.總結:

display:inline-block的布局方式和浮動的布局方式,究竟使用哪個,我覺得應該根據實際情況來決定的:

a.對於橫向排列東西來說,我更傾向與使用inline-block來布局,因為這樣清晰,也不用再像浮動那樣清除浮動,害怕布局混亂等等。

b.對於浮動布局就用於需要文字環繞的時候,畢竟這才是浮動真正的用武之地,水平排列的是就交給inline-block了。

ArcGIS Server 配置的幾點解釋

1.soc配置時capacity的含義。capacity表示一台soc能夠同時執行arcgis 服務的數目。通常情況下,建議一台soc最好同時執行4個服務,這樣能夠達到最佳執行效果 機子配置較高,capacity的值可以相應增加 執行乙個service,任務管理器中會增加乙個arcsoc.exe的程...

關於大O法的幾點解釋

大o表示法指出演算法有多快。例如,假設列表包含n個元素。簡單查詢需要檢查每個元素,因此需要執行n次操作。使用大o表示法,這個執行時間為o n 主要單位不是秒啊,大o表示法值得並非以秒為單位的速度,而是運算元,操作了幾次。它指出了演算法執行時間的增速。大o表示法指出的是最槽情況下的執行時間。如果你用簡...

關於知識付費的幾點解析

一 知識付費的背景 網際網路出現20多年來,資訊大 隨著部落格時代的到來,大量ugc充斥在網際網路上,導致資訊分辨挖掘成本增高,大量虛假無用資訊引發人們信任危機 由於資訊革命到來,帶來新的 工具 支付手段的便捷化 知識傳授的去平台化,為知識付費成為消費公升級中的乙個節點 伴隨移動端使用熱潮,碎片化時...