CSS篇－line-height計(jì)算方法（父子元素）

liukai90 發(fā)布于2019-08-30 15:52 / 1299人閱讀

此處僅列舉幾種個人認(rèn)為易模糊不清的情形。
html結(jié)構(gòu)如下：


     
        測試行高

父元素為數(shù)字，子元素未設(shè)

.parent{
     font-size: 12px;
     ine-height: 1;
 }
.child{
    font-size: 16px;
 }

父元素parent為
子元素child為
表明子元素繼承了父元素顯示設(shè)置的數(shù)字值，與父元素自身font-size有關(guān)

父元素百分比，子元素未設(shè)

.parent{
    font-size: 12px;
    line-height: 100%;
}
.child{
    font-size: 16px;
}

父元素parent為
子元素child為
表明子元素繼承了父元素根據(jù)百分比計(jì)算后的行高，與父元素自身font-size無關(guān)

相關(guān)

對于1、2情形，給子元素child增加line-height: inherit，衍生情形3、4，表現(xiàn)不變

云服務(wù)器 GPU云服務(wù)器 css元素 java插入元素方法云計(jì)算系列服務(wù)器篇 line-height

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/116453.html

相關(guān)文章

整理：子容器垂直居中于父容器的方案

摘要：子容器溢出時，父容器出現(xiàn)滾動條。父容器或很顯然，子容器溢出時，被父容器截?cái)嗟那樾螣o法和父容器自適應(yīng)于子容器共存。現(xiàn)在這個布局可以自動生成，詳見林小志的小工具圖片垂直居中。溢出子容器溢出時會變成頂對齊，原因同上。本文在evernote里有備份。如果evernote的閱讀區(qū)域嫌窄了，那么可以把這個鏈接拖入書簽并點(diǎn)擊javascript:jQuery(#container).width(9...

youkede 2019-08-28 17:51 評論0 收藏0
CSS那些事

摘要：今天跟大家分享一下中一些比較重要和比較容易被忽略的東西，開始吧。當(dāng)為時，塊級元素的寬度會填滿整個包含塊。也就是說上下外邊距的值也是以父元素的寬度為標(biāo)準(zhǔn)的。今天跟大家分享一下CSS中一些比較重要和比較容易被忽略的東西，開始吧。樣式優(yōu)先級當(dāng)你在不同地方不同的選擇器中對同一個元素屬性添加了不同的樣式的時候，該如何判斷最后哪個樣式會作用到元素上呢？判斷的依據(jù)就是樣式的優(yōu)先級。樣式優(yōu)先...

LinkedME2016 2019-08-28 17:56 評論0 收藏0
前端學(xué)習(xí)筆記（CSS、JS基礎(chǔ)篇）

摘要：搜索引擎中有一個爬蟲模塊，在頁面中使用諸如等強(qiáng)調(diào)式的標(biāo)簽，有利于，說白了就是有利于被搜索到。定位相對定位不影響元素本身特性不使元素脫離文檔流。定時器如果是由事件控制的，要先關(guān)再開，避免多次觸發(fā)而混亂。 CSS篇注意：css注釋使用/ /，而不是或者//，否則很容易導(dǎo)致不明錯誤！??！ div padding：內(nèi)邊距。盒子內(nèi)容與盒子邊框的距離設(shè)置，相當(dāng)于給盒子加了厚度，使用此屬性后會改...

caikeal 2019-08-19 17:57 評論0 收藏0
前端學(xué)習(xí)筆記（CSS、JS基礎(chǔ)篇）

摘要：搜索引擎中有一個爬蟲模塊，在頁面中使用諸如等強(qiáng)調(diào)式的標(biāo)簽，有利于，說白了就是有利于被搜索到。定位相對定位不影響元素本身特性不使元素脫離文檔流。定時器如果是由事件控制的，要先關(guān)再開，避免多次觸發(fā)而混亂。 CSS篇注意：css注釋使用/ /，而不是或者//，否則很容易導(dǎo)致不明錯誤?。。?div padding：內(nèi)邊距。盒子內(nèi)容與盒子邊框的距離設(shè)置，相當(dāng)于給盒子加了厚度，使用此屬性后會改...

xietao3 2019-08-30 12:54 評論0 收藏0
深入理解BFC

摘要：最常見的有簡稱和簡稱。計(jì)算的高度時，浮動元素也參與計(jì)算。遇到這種情形，我們?nèi)绾翁幚硖幚矸椒ㄆ鋵?shí)有很多，在元素中添加或者使其父元素形成一個也可以在元素中添加或是這些都可以有效解決父子元素重疊問題。解決這個問題，只需要把把父元素變成一個就行了。一、什么是BFC Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，...

legendmohe 2019-08-29 17:01 評論0 收藏0