国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

淺談line-height

zombieda / 1130人閱讀

摘要：與高度由上面的內容可以總結出的高度取決與其下屬的中最高的元素。的最終表現是通過實現的，而無論所占據的高度是多少無論比文字大還是比文字小，其占據的空間都是與文字內容公用水平中垂線的。

基礎知識

有4種模型，分別是

塊，塊盒模型 containing boxing,包括line

行內盒模型 inline boxing ,包含content

行模型 line boxing,包含inline,line高度是由最高的inline元素決定.

內容區域 content area

這部分內容可以著重看 這里有詳細的介紹。

line-height與line boxes高度

由上面的內容可以總結出line boxes 的高度取決與其下屬的inline boxes 中最高的元素。

對于像input這樣的元素,在不同瀏覽器上line-height屬性表現是不同,參考Line-Height Doesn’t Work As Expected On Inputs
垂直居中的特性 
行高還有一個特性，叫做垂直居中性。line-height的最終表現是通過line boxes實現的，而無論line boxes所占據的高度是多少（無論比文字大還是比文字小），其占據的空間都是與文字內容公用水平中垂線的。  ----張鑫旭的博文

我們經?？吹揭环N垂直居中的方法,那就是讓height和line-height 相同

    text-vertical{
        height:30px;
        line-height:30px;
    }

其實在這里起作用的是line-height , 只要設置好了line-height ,在不設置height 的情況下一個div 的高度就是他的line-height 的值

結果如圖:在chrome的測試下

line-height與line boxes高度 by wangjojo (@wweggplant) on CodePen.

多行文字垂直居中

在看了張鑫旭大神的博文后, 發現不使用最后的i標簽也是可以做到垂直居中的,可能是他當時寫那篇文章的時間太久,瀏覽器的更新問題等, 在最新版本的測試下,不必使用i標簽,只使用line-height 就能解決問題,如果發現舊瀏覽器不支持,可以采用他博客中提到的方法.

多行文字居中,添加i方式 by wangjojo (@wweggplant) on CodePen.

行高在文章中的應用

line-height賦值方式px/em、百分值、normal、數值、inherit繼承。px/em和inherit沒什么好說的, normal與數值1.2等價 ,所以下面重點說說百分比和數值兩種賦值方式的區別.

line-height百分比

line-height百分比賦值的結果是當前line-height的值乘以這個百分比數值得到的.demo如下:

line-height賦值方式 by wangjojo (@wweggplant) on CodePen.

外層的 div.wrap 的 line-height 計算結果是 20px*150% = 24px;

內部的h1標簽和 p標簽的通過繼承得到 line-height:150% 然后最后的結果仍然是24px

在line-height采用百分比的情況下,line-height的最終值h就是當前line-height乘以這個百分比計算得出.并且這個值會繼承下去,后代的元素繼承得到的值也是h

line-height純數值

外層的 div.wrap-line-height-number 的 line-height 計算結果是 30px*1.5 = 45px;

內部的h1標簽和 p標簽的通過繼承得到 line-height:1.5


h1的line-height是 16px*1.5 = 24px


p 的line-height是 12px*1.5 = 16px

可以把line-height采用數值形式當作一種倍數的繼承, 后代的元素都會繼承這個倍數,并受這幾數值的影響,得到最后的值

line-height與vertical-align關系(有空再寫) 總結

4種box模型以及各自的含義

line-height與line box的關系

文字垂直居中

line-height賦值形式采用數值或者是百分比時各自的代表的含義

參考

深入了解css的行高Line Height屬性——沁園春

css行高line-height的一些深入理解及應用——張鑫旭

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

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

相關文章

  • 淺談line-height

    摘要：與高度由上面的內容可以總結出的高度取決與其下屬的中最高的元素。的最終表現是通過實現的，而無論所占據的高度是多少無論比文字大還是比文字小，其占據的空間都是與文字內容公用水平中垂線的。 基礎知識 有4種模型，分別是 塊，塊盒模型 containing boxing,包括line 行內盒模型 inline boxing ,包含content 行模型 line boxing,包含inline...

    leeon 評論0 收藏0

  • 淺談CSS3 box-sizing 屬性 有趣的盒模型

    摘要：盒模型的組成大家肯定都懂，由里向外盒模型是有兩種標準的，一個是標準模型，一個是模型。指定元素的寬度和高度最小最大屬性適用于的寬度和高度。盒模型的組成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有兩種標準的，一個是標準模型，一個是IE模型。 ?從上面兩圖不難看出在標準模型中，盒模型的寬高只是內容（content）的寬高， 而在IE模型中盒模型...

    K_B_Z 評論0 收藏0

  • 移動端H5頁面中1px邊框的幾種解決方法

    問題提出 這是一個比較老的問題了，我第一次注意到的時候，是UI設計師來找我麻煩，emmm那時候我才初入前端職場，啥也不懂啊啊啊啊啊，情形是這樣的：設計師拿著手機過來：這些邊框都粗了啊，我的設計稿上是1px的我：？？？？我寫的是1px呀，不信你看。（說著拿出了css代碼設計師：不對啊我眼睛看來這個邊框比我設計稿上粗很多，看起來好奇怪（emmm果然像素眼我：那我把它改成0.5px你看看（邊說邊改了代碼...

    enda 評論0 收藏0

發表評論

0條評論

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