成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

LINE-HEIGHT那些坑

zsirfs / 3518人閱讀

摘要:但是使用時有很多坑,需要注意。注意點以和百分比為單位的行高,其基數(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ù)是元素本身的字體尺寸。繼承的都是計算值,而非屬性值。

123

456

字符“456”的行高會與“123”一致為21px,會導致重疊。

為避免上述情況則可以設(shè)置采用固定數(shù)字(縮放因子)來避免,縮放因子直接繼承。

123

456

字符“456”的行高為60px,“123”的行高為21px。

在垂直居中中的運用 1. 單行文字垂直居中

Line-height值與height高度設(shè)為一致即可。適用于列表項,圖片按鈕項。

2. 多行文字垂直居中

需要注意將vertical-align設(shè)為middle才會垂直居中,僅對內(nèi)聯(lián)元素有效,塊級元素無效。

```    
123.
123
```
3. 圖文混排時垂直居中

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ān)文章

  • flex布局踩過的那些

    摘要:接下來說說我踩過的那些坑布局版本兼容問題布局自提出之后,變化過好幾個版本標志標志標志新增了對項的規(guī)定草案階段兼容方案父級布局不用考慮其他屬性都對應(yīng)相關(guān)的版本方案,目前項目中是只寫最新的方案,由自動添加兼容方案。 接觸H5項目后,開始了解到flex布局,功能非常之強大,用起來相當之舒服?;镜闹R介紹就不說了,參考http://www.ruanyifeng.com/blo...。 接下來...

    劉玉平 評論0 收藏0
  • PostCSS自學筆記(二)【插件篇】

    摘要:本期主要介紹以下幾個插件和幾個坑和坑這個就不用多說了,必裝插件之一。看似寫法沒有任何問題。編譯后的結(jié)果那么這樣就沒有問題了。 PostCSS常用插件介紹 繼上一次PostCSS學習指南(一)后,漸漸開始在項目中應(yīng)用。 這次決定主要講解一些個人認為非常有幫助的PostCSS插件。 本期主要介紹以下幾個插件和幾個坑 autoprefixer postcss-partial-import...

    lcodecorex 評論0 收藏0
  • css中那些需要組合、互斥和特別注意的屬性

    摘要:盒子的偏移位置不影響常規(guī)流中的任何元素,其不與其他任何折疊。當?shù)闹禐榉菚r,其層疊級別通過屬性定義。最常見的有簡稱和簡稱。它是塊級盒布局出現(xiàn)的區(qū)域,也是浮動層元素進行交互的區(qū)域。 css學習 很少有人會很系統(tǒng)的把css學習一遍,大部分都是遍歷下。然后然后記住常用的,不常用的也要回查找,前端人很多都認同要學好css真的不很難,這里記錄下很多場景下使用css需要注意的地方,同樣,開頭頁列出一...

    plokmju88 評論0 收藏0
  • weex踩之旅第二彈 ~ 在weex中集成vue-router

    摘要:也就是說在中,我們的代碼是要在環(huán)境中運行。而在中,是沒有等以及的,即所有的框架都是不可以使用的。比如相關(guān)組件,相關(guān)組件,等都不能在中引用。是可以在中使用的。 接著第一彈講,我們已經(jīng)搭建好一個屬于自己的weex項目了,然后如何開發(fā)呢?由于之前項目中都是采用vue全家桶進行開發(fā),路由使用vue-router插件,狀態(tài)管理使用vuex,Ajax前后臺交互使用axios,圖標庫使用font-a...

    tyheist 評論0 收藏0
  • 深入理解行內(nèi)元素的布局

    摘要:看上面的例子我們也能看出來,實際上一個內(nèi)聯(lián)元素是有兩個高度的高度實際渲染的那個高度和高度實際區(qū)域占空間的高度也就是。 前言 總括: 本文通過實例講解CSS中最大的難點之一,行內(nèi)元素的布局,主要是挖掘line-height和vertical-align兩個屬性在布局方面的使用。 原文博客地址:深入理解行內(nèi)元素的布局 知乎專欄&&簡書專題:前端進擊者(知乎)&&前端進擊者(簡書) 博...

    heartFollower 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<