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

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

此處僅列舉幾種個(gè)人認(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://specialneedsforspecialkids.com/yun/116453.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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