亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS篇之inline-block

Y3G / 1896人閱讀

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

今天寫代碼時遇到當設(shè)置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;}

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

效果：

拓展：

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/50087.html

相關(guān)文章

  • CSS篇之inline-block

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

    ARGUS 評論0 收藏0

  • CSS篇之巧用line-height

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

    dendoink 評論0 收藏0

  • CSS篇之巧用line-height

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

    hsluoyz 評論0 收藏0

  • CSS篇之水平導(dǎo)航

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

    李義 評論0 收藏0

  • JQuery 干貨篇之選擇元素

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

    zorpan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<