摘要:但是使用時有很多坑,需要注意。注意點以和百分比為單位的行高,其基數(shù)是元素本身的字體尺寸。多行文字垂直居中需要注意將設(shè)為才會垂直居中,僅對內(nèi)聯(lián)元素有效,塊級元素無效。參考文檔行高的一些深入理解及應(yīng)用屬性
line-height 用來設(shè)置行間的距離(行高),最為人熟悉的是可以用在垂直居中上,非常簡單。但是使用時有很多坑,需要注意。p.s通常這些坑會出現(xiàn)在面試題目中:)
基本屬性normal:默認,設(shè)置合理的行間距,瀏覽器默認值1.0-1.2。
number:設(shè)置數(shù)字,此數(shù)字會與當前的字體尺寸相乘來設(shè)置行間距??s放因子,直接繼承,而不是繼承計算值。
length:設(shè)置固定具體的行間距。
%:基于當前字體尺寸的百分比行間距。繼承的是計算值,而非屬性值。
inherit:規(guī)定應(yīng)該從父元素繼承 line-height.屬性的值。(IE不支持)。
注意點以em、ex和百分比%為單位的行高,其基數(shù)是元素本身的字體尺寸。繼承的都是計算值,而非屬性值。
123456
字符“456”的行高會與“123”一致為21px,會導致重疊。
為避免上述情況則可以設(shè)置采用固定數(shù)字(縮放因子)來避免,縮放因子直接繼承。
123456
字符“456”的行高為60px,“123”的行高為21px。
在垂直居中中的運用 1. 單行文字垂直居中Line-height值與height高度設(shè)為一致即可。適用于列表項,圖片按鈕項。
2. 多行文字垂直居中需要注意將vertical-align設(shè)為middle才會垂直居中,僅對內(nèi)聯(lián)元素有效,塊級元素無效。
```3. 圖文混排時垂直居中123.```
123
IE6-7使用該方法時,圖片無法居中。需要hack,方法如下:
``````![]()
添加額外的span,將display屬性設(shè)置為inline-block使其擁有“l(fā)ayout”,可以修復該bug。
最后的最后為了避免各種繼承,最好將line-height屬性設(shè)置成number數(shù)字;
圖文混排、多行文字的居中最好采用padding模式解決,具體下次另表。
參考文檔:
CSS行高line-height的一些深入理解及應(yīng)用
CSS line-height 屬性
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/111089.html
摘要:接下來說說我踩過的那些坑布局版本兼容問題布局自提出之后,變化過好幾個版本標志標志標志新增了對項的規(guī)定草案階段兼容方案父級布局不用考慮其他屬性都對應(yīng)相關(guān)的版本方案,目前項目中是只寫最新的方案,由自動添加兼容方案。 接觸H5項目后,開始了解到flex布局,功能非常之強大,用起來相當之舒服?;镜闹R介紹就不說了,參考http://www.ruanyifeng.com/blo...。 接下來...
摘要:本期主要介紹以下幾個插件和幾個坑和坑這個就不用多說了,必裝插件之一。看似寫法沒有任何問題。編譯后的結(jié)果那么這樣就沒有問題了。 PostCSS常用插件介紹 繼上一次PostCSS學習指南(一)后,漸漸開始在項目中應(yīng)用。 這次決定主要講解一些個人認為非常有幫助的PostCSS插件。 本期主要介紹以下幾個插件和幾個坑 autoprefixer postcss-partial-import...
摘要:盒子的偏移位置不影響常規(guī)流中的任何元素,其不與其他任何折疊。當?shù)闹禐榉菚r,其層疊級別通過屬性定義。最常見的有簡稱和簡稱。它是塊級盒布局出現(xiàn)的區(qū)域,也是浮動層元素進行交互的區(qū)域。 css學習 很少有人會很系統(tǒng)的把css學習一遍,大部分都是遍歷下。然后然后記住常用的,不常用的也要回查找,前端人很多都認同要學好css真的不很難,這里記錄下很多場景下使用css需要注意的地方,同樣,開頭頁列出一...
摘要:也就是說在中,我們的代碼是要在環(huán)境中運行。而在中,是沒有等以及的,即所有的框架都是不可以使用的。比如相關(guān)組件,相關(guān)組件,等都不能在中引用。是可以在中使用的。 接著第一彈講,我們已經(jīng)搭建好一個屬于自己的weex項目了,然后如何開發(fā)呢?由于之前項目中都是采用vue全家桶進行開發(fā),路由使用vue-router插件,狀態(tài)管理使用vuex,Ajax前后臺交互使用axios,圖標庫使用font-a...
摘要:看上面的例子我們也能看出來,實際上一個內(nèi)聯(lián)元素是有兩個高度的高度實際渲染的那個高度和高度實際區(qū)域占空間的高度也就是。 前言 總括: 本文通過實例講解CSS中最大的難點之一,行內(nèi)元素的布局,主要是挖掘line-height和vertical-align兩個屬性在布局方面的使用。 原文博客地址:深入理解行內(nèi)元素的布局 知乎專欄&&簡書專題:前端進擊者(知乎)&&前端進擊者(簡書) 博...
閱讀 3890·2021-11-25 09:43
閱讀 2215·2021-11-23 10:11
閱讀 1438·2021-09-29 09:35
閱讀 1378·2021-09-24 10:31
閱讀 2067·2019-08-30 15:48
閱讀 2400·2019-08-29 15:28
閱讀 459·2019-08-29 12:36
閱讀 3519·2019-08-28 18:12