CSS篇之inline-block

Y3G 發(fā)布于2019-08-01 15:45 / 1856人閱讀

摘要：代碼主頁原因?qū)τ谠?，如果里面沒有內(nèi)聯(lián)元素，或者不是，那么這個元素的基線就是其底邊緣，否則，它的就是元素包含的內(nèi)容中最后一行內(nèi)聯(lián)元素的基線。在此例中中沒有內(nèi)聯(lián)元素，所以就是下邊緣，中有內(nèi)容主頁，所以是以內(nèi)容的主頁的下邊緣作為自己的。

今天寫代碼時遇到當設置inline-block的元素有內(nèi)容時總有部分掉下去的感覺。

代碼：

主頁

i{display: inline-block;width: 20px;height: 20px;background: url(homepage.svg) no-repeat;}
span{display: inline-block;width:50px;height: 20px;}

like this:

原因：

對于inline-block元素，如果里面沒有inline內(nèi)聯(lián)元素，或者overflow不是visible，那么這個元素的基線baseline就是其margin底邊緣，否則，它的baseline就是元素包含的內(nèi)容中最后一行內(nèi)聯(lián)元素的基線。

在此例中i中沒有內(nèi)聯(lián)元素，所以baseline就是margin下邊緣，span中有內(nèi)容“主頁”，所以是以內(nèi)容的baseline(“主頁”的下邊緣)作為自己的baseline。

方法：

1.添加：

i,span{vertical-align:top;}

2.添加:

span{overflow:hidden;}

原因：設置overflow:hidden之所以能解決這個問題，是因為overflow:hidden的設置使其內(nèi)容產(chǎn)生了BFC，受BFC之間互不影響這一特性，所以不再因為文字而下落。

效果：

拓展：

1.vertical-algin是一個應用于行內(nèi)元素和表格單元的屬性，默認值是baseline。
baseline是要求該元素的基線與其父元素的基線對齊。

2.BFC相關內(nèi)容鏈接：BFC

結語：暫時這么多。

GPU云服務器云服務器 inline-block css引入css css _CSS

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/50087.html

CSS篇之inline-block

摘要：代碼主頁原因?qū)τ谠?，如果里面沒有內(nèi)聯(lián)元素，或者不是，那么這個元素的基線就是其底邊緣，否則，它的就是元素包含的內(nèi)容中最后一行內(nèi)聯(lián)元素的基線。在此例中中沒有內(nèi)聯(lián)元素，所以就是下邊緣，中有內(nèi)容主頁，所以是以內(nèi)容的主頁的下邊緣作為自己的。今天寫代碼時遇到當設置inline-block的元素有內(nèi)容時總有部分掉下去的感覺。代碼：主頁 i{display: inline-block;wid...

ARGUS 2019-08-29 11:22 評論0 收藏0
CSS篇之巧用line-height

摘要：公司一個頁面中的一個樣式如下，使左邊文字豎直排列且水平垂直居中代碼已中止一般情況，我會用如上或者用使文字豎直排放看起來居中，但是這樣不夠智能或顯得比較冗余。公司一個頁面中的一個樣式如下，使左邊文字豎直排列且水平垂直居中：showImg(https://segmentfault.com/img/bVJKr7?w=737&h=180); 代碼：已中止 .left-tit{ wi...

dendoink 2019-08-30 15:53 評論0 收藏0
CSS篇之巧用line-height

摘要：公司一個頁面中的一個樣式如下，使左邊文字豎直排列且水平垂直居中代碼已中止一般情況，我會用如上或者用使文字豎直排放看起來居中，但是這樣不夠智能或顯得比較冗余。公司一個頁面中的一個樣式如下，使左邊文字豎直排列且水平垂直居中：showImg(https://segmentfault.com/img/bVJKr7?w=737&h=180); 代碼：已中止 .left-tit{ wi...

hsluoyz 2019-08-01 16:23 評論0 收藏0
CSS篇之水平導航

摘要：關于水平導航已然是老生常談之問題，看了網(wǎng)上諸多方法，今天小小的總結對比了一下現(xiàn)有方法的優(yōu)缺點。問題一個最簡單的結構如下，請實現(xiàn)水平導航。缺點，和方法一樣，會出現(xiàn)空白間隙，解決方案如上，因為是行內(nèi)元素，所以不能設置寬高，比較局限。關于水平導航已然是老生常談之問題，看了網(wǎng)上諸多方法，今天小小的總結對比了一下現(xiàn)有方法的優(yōu)缺點。問題：一個最簡單的html結構如下，請實現(xiàn)水平導航。 ...

李義 2019-08-29 11:19 評論0 收藏0
JQuery 干貨篇之選擇元素

摘要：干貨篇之選擇元素實驗的的代碼選擇器選擇正在處理動畫的元素選擇第一個元素選擇最后一個元素選擇第個元素從開始選擇序號為偶數(shù)的元素選擇序號為奇數(shù)的元素選擇序號大于的元素選擇序號小于的元素選擇所有的文本輸入框 JQuery 干貨篇之選擇元素實驗的HTML+CSS的代碼 html Example Jacquis Flower Shop ...

zorpan 2019-08-20 15:56 評論0 收藏0