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

liukai90 發布于2019-08-30 15:52 / 1236人閱讀

此處僅列舉幾種個人認為易模糊不清的情形。
html結構如下：


     
        測試行高

父元素為數字，子元素未設

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

父元素parent為
子元素child為
表明子元素繼承了父元素顯示設置的數字值，與父元素自身font-size有關

父元素百分比，子元素未設

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

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

相關

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

GPU云服務器云服務器 css元素 java插入元素方法云計算系列服務器篇 line-height

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116453.html

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

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

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

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

LinkedME2016 2019-08-28 17:56 評論0 收藏0
前端學習筆記（CSS、JS基礎篇）

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

caikeal 2019-08-19 17:57 評論0 收藏0
前端學習筆記（CSS、JS基礎篇）

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

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

摘要：最常見的有簡稱和簡稱。計算的高度時，浮動元素也參與計算。遇到這種情形，我們如何處理處理方法其實有很多，在元素中添加或者使其父元素形成一個也可以在元素中添加或是這些都可以有效解決父子元素重疊問題。解決這個問題，只需要把把父元素變成一個就行了。一、什么是BFC Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，...

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