行內塊元素的空白符問題

2022-09-03 10:15:10 字數 1797 閱讀 4632

@(資源收集)[前端開發, css]

在前端開發中,將幾個有固定寬高的盒子並列排布是極為常見的頁面效果,實現這個效果的方式有很多,諸如定位,浮動,彈性盒,行內塊元素等等,每個方法都有著其獨特的優點和缺點,今天我們這裡就來討論討論使用行內塊元素來實現並列排列的優缺點

首先我們先建立乙個大盒子並在其中再建立三個小盒子

.box

.boxli

效果圖

那為了讓小盒子能在一行排列,我們只需給小盒子加上一行**

.boxli
效果圖

這種方法的好處很明顯,比如:不用考慮父元素是否坍塌,不用考慮父元素寬度變化時自身的位置和大小是否發生變化,不必考慮相容性等等優勢,但她還有乙個小小的問題,請看圖示:

這個空白符是什麼玩意,它是如何產生的?

其實這個空白就是我們自己寫出來的。不信?你看看

咱們在寫**時每個div元素後面都敲了乙個換行符,而瀏覽器則就把這個換行符給顯示為乙個空白符號了,這就是小盒子之間空白的由來。

那我們如何清除掉這個空白符呢?萬章老師下面就給大家列舉幾樣方法:

頁面結構

最終效果

這種方式是從根源上解決問題,徹底去除換行符。但又產生了乙個新的問題,**結構不清晰,看上去沒有層次感,對於閱讀**造成很大的困擾。

頁面結構

每行**的最後乙個標籤移到下一行**的首部

最終效果

這個方式能夠在保證頁面基本的結構之餘還能消除換行符

給大盒子設定乙個font-size:0;以此來把空白符的大小設定成0,從視覺上清除了空白符的影響

.box

.boxli

最終效果

在這三種方案之外還可以利用諸如注釋、負的margin等等來清除空白符,每種方案都各有優劣,在實際的專案開發中具體採用哪種方案就根據自己的實際業務需求選擇即可。

css中行內元素和行內塊元素空白間隙的問題

在html 中,如果把行內元素或者行內塊元素寫成下面這樣的話,會出現空格的問題 class 我是行內元素span 我是行內元素span 我是行內元素span div 效果圖 我麼可以看到,這裡保留了乙個空格,之所以出現先這個問題,在於 我們 裡面的這幾個span 標籤都有換行,這些換行也叫作空文字節...

C語言中的空白符

空格 製表符 換行符統稱為空白符,它們只能佔位,沒有實際的內容。製表符也稱縮排,就是tab鍵,預設占用4個空格的位置,你也可以在編輯器中修改。對於編譯器,有的空白符會被忽略,有的卻不能。請看下面幾種 puts 的寫法 includeint main 執行結果 看到輸出結果,說明 沒有錯誤,以上幾種 ...

容易弄混的行內元素,塊元素,行內塊元素

在css中,有乙個屬性為 display 它可以將內聯元素,塊元素,行內塊元素互相轉化 display block 轉化為塊元素,以便於設定寬高 display inline block 轉化為行內塊狀元素 display inline 轉化為行內元素 1 行內元素 又稱為內聯元素 的代表元素 sp...