CSS篇之inline-block

ARGUS 發(fā)布于2019-08-29 11:22 / 847人閱讀

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

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

代碼：

主頁

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

like this:

原因：

對(duì)于inline-block元素，如果里面沒有inline內(nèi)聯(lián)元素，或者overflow不是visible，那么這個(gè)元素的基線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;}

原因：設(shè)置overflow:hidden之所以能解決這個(gè)問題，是因?yàn)閛verflow:hidden的設(shè)置使其內(nèi)容產(chǎn)生了BFC，受BFC之間互不影響這一特性，所以不再因?yàn)槲淖侄侣洹?/p>

效果：

拓展：

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

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

結(jié)語：暫時(shí)這么多。

GPU云服務(wù)器云服務(wù)器 inline-block css引入css css _CSS

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111602.html

相關(guān)文章

CSS篇之inline-block

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

Y3G 2019-08-01 15:45 評(píng)論0 收藏0
CSS篇之巧用line-height

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

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

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

hsluoyz 2019-08-01 16:23 評(píng)論0 收藏0
CSS篇之水平導(dǎo)航

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

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

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

zorpan 2019-08-20 15:56 評(píng)論0 收藏0