資訊專欄INFORMATION COLUMN
摘要：取值方式相信很多前端都使用過來設(shè)置行高布局。百分比取值一般用該方式定義目標元素的行高會配合屬性使用，因為用百分比當前元素的行高為。總結(jié)一般情況下，為了更加方便及清晰的使用，使用倍數(shù)取值是最佳的設(shè)置方式，如原文鏈接
line-height 取值方式
相信很多前端er都使用過 line-height 來設(shè)置行高布局。下面看看官方定義：
On block level elements, the line-height property specifies the minimum height of line boxes within the element.On non-replaced inline elements, line-height specifies the height that is used to calculate line box height.
有時候我們在開發(fā)的時候并沒有太深入的去了解一個屬性，比如：line-height 的不同取值達到的效果并不同，下面依次看看常用的幾種取值方式。?
px 單位取值line-height: 26px 目的就是直接定義目標元素的行高為 26px 的高度。
% 百分比取值line-height: 150% 一般用該方式定義目標元素的行高會配合 font-size: 14px 屬性使用，因為用百分比當前元素的行高為 1.5 * 14px = 21px。且如果其層疊子元素沒有定義 line-height 屬性，不管有沒有定義 font-size 屬性，其層疊子元素行高均為 21px（與自身的 font-size 沒有任何關(guān)系）。
倍數(shù)取值line-height:1.5 用該方式一般也是配合 font:14px 屬性使用，但是對層疊子元素的影響效果并不同，如果層疊子元素沒有定義 line-height 屬性，但是定義了 font-size 屬性，那這些層疊子元素的行高為繼承過來的 line-height 倍數(shù)值乘以自身的 font-size 屬性。
總結(jié)一般情況下，為了更加方便及清晰的使用 line-height，使用倍數(shù)取值是最佳的設(shè)置方式，如：
body {
font: 12px/1.5 tahoma,arial,"5b8b4f53"
}
原文鏈接
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116607.html
摘要：標準盒模型下，設(shè)置的的值后，這個值僅包含的寬高，而在盒模型下，這個值是后的寬高。例標準盒模型下，占據(jù)的實際寬為實際高度同理。對齊所處行內(nèi)框盒子的頂部對齊所處行內(nèi)框盒子的底部。 盒模型 盒模型之所以稱為盒是因為在一個頁面布局中，文檔中的每一個元素（塊級元素）均呈現(xiàn)為一個矩形的盒子，這個盒子包含：內(nèi)容（content） + 內(nèi)邊距（padding） + 邊框（border） + 外邊距（p...
摘要：標準盒模型下，設(shè)置的的值后，這個值僅包含的寬高，而在盒模型下，這個值是后的寬高。例標準盒模型下，占據(jù)的實際寬為實際高度同理。對齊所處行內(nèi)框盒子的頂部對齊所處行內(nèi)框盒子的底部。 盒模型 盒模型之所以稱為盒是因為在一個頁面布局中，文檔中的每一個元素（塊級元素）均呈現(xiàn)為一個矩形的盒子，這個盒子包含：內(nèi)容（content） + 內(nèi)邊距（padding） + 邊框（border） + 外邊距（p...
摘要：很久沒有寫博客了，這里把之前學(xué)習(xí)布局的一篇筆記整理了一下。其在文檔流中的直接子元素將成為。子元素在容器內(nèi)排列的方向稱為主軸，跟主軸垂直的方向稱為輔軸。 很久沒有寫博客了，這里把之前學(xué)習(xí) flex 布局的一篇筆記整理了一下。發(fā)布到博客上。趕一個五月的末班車吧。還是得堅持啊!! flex 彈性布局FlexBox 可控制子元素: 水平或垂直排成一行 控制子元素的對齊方式 控制子元素的高度／...
摘要：很久沒有寫博客了，這里把之前學(xué)習(xí)布局的一篇筆記整理了一下。其在文檔流中的直接子元素將成為。子元素在容器內(nèi)排列的方向稱為主軸，跟主軸垂直的方向稱為輔軸。 很久沒有寫博客了，這里把之前學(xué)習(xí) flex 布局的一篇筆記整理了一下。發(fā)布到博客上。趕一個五月的末班車吧。還是得堅持啊!! flex 彈性布局FlexBox 可控制子元素: 水平或垂直排成一行 控制子元素的對齊方式 控制子元素的高度／...
摘要：設(shè)計思想兼容已有內(nèi)容避免不必要的復(fù)雜性解決現(xiàn)實問題優(yōu)雅降級尊重事實標準變化新增語義化標簽去除純表示性的標簽拖拽離線語法標簽不區(qū)分大小寫推薦小寫空標簽可以不閉合屬性不必引號。遇到這種情況時，會生成匿名塊級盒來包含行級盒。 瀏覽器 瀏覽器 渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...
閱讀 646·2021-11-24 09:39
閱讀 3489·2019-08-30 15:53
閱讀 2527·2019-08-30 15:44
閱讀 3246·2019-08-30 12:54
閱讀 2215·2019-08-29 12:23
閱讀 3311·2019-08-26 14:05
閱讀 2112·2019-08-26 13:36
閱讀 3443·2019-08-26 13:33
