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

資訊專欄INFORMATION COLUMN

CSS 行內(nèi)布局實(shí)踐小結(jié)

Taste / 2340人閱讀

摘要：相關(guān)內(nèi)聯(lián)格式上下文主要影響內(nèi)布局的行盒模型，這是一個(gè)顯示區(qū)域，根據(jù)塊狀容器內(nèi)，每一行的多個(gè)內(nèi)聯(lián)元素都會(huì)共同生成一個(gè)行盒模型。

前言

通常情況下，要使元素排列在一行內(nèi)，通常做法就是使用float，然后再清浮動(dòng)。
如下：

但是如果要使其垂直居中，則必須手動(dòng)調(diào)整，藍(lán)色或者綠色塊的位置，比較繁瑣。

或者另外一種方法，使用inline-block或inline（即IFC），剛好在這里碰到了點(diǎn)坑。

相關(guān)css

IFC（Inline formatting contexts）內(nèi)聯(lián)格式上下文 ╮(￣▽￣)╭
主要影響IFC內(nèi)布局的css

font-size

line-height

height

vertical-aligin

line-box

行盒模型，這是一個(gè)顯示區(qū)域，根據(jù)塊狀容器內(nèi)，每一行的多個(gè)內(nèi)聯(lián)元素（inline-level element）都會(huì)共同生成一個(gè)行盒模型。

font-size

常見的屬性，用來指定文本類型節(jié)點(diǎn)的大小。IFC內(nèi)的很多屬性的值是基于這個(gè)的。

line-height & height

行高在w3c中更明確的定義：

  
On a block container element whose content is composed of inline-level elements, "line-height" specifies the minimal height of line boxes within the element.The minimum height consists of a minimum height above the baseline and a minimum depth below it。


  
在一個(gè)由多個(gè)內(nèi)聯(lián)元素組成的塊狀容器內(nèi)，"line-height"為內(nèi)聯(lián)元素的行盒模型指定了一個(gè)最低高度。

  這個(gè)最低高度是分別由基線上的最小高度和基線下的最小深度組成。

盜張圖的來示意下，從上到下四條線分別是頂線、中線、基線、底線。
那么行高是指上下文本行的基線間的垂直距離，即圖中兩條紅線間垂直距離（實(shí)際在數(shù)值上，行高也等于其它相同顏色間的距離）。

換種思路來理解下行高。
實(shí)際上很多情況下，一個(gè)容器中是只有一行的即只有一條基線，行高是如何計(jì)算，以確保這個(gè)間距呢?
如下：

藍(lán)色是容器的范圍，邊界線之間是一個(gè)line box。文字其中的內(nèi)聯(lián)元素。

所以，

當(dāng)line-height > font-size時(shí)

一個(gè)為被設(shè)定高度的容器被設(shè)定一個(gè)行高時(shí)，內(nèi)聯(lián)元內(nèi)容的上下會(huì)增加2個(gè)空白內(nèi)容的高度。而容器的高度也會(huì)撐開，使容器的高度與line-height相等。

  
a1 + b1 +c1 == line-height  &  a1 == c1

如果容器的高度已經(jīng)被設(shè)定，那么超出容器下邊界線的部分則不影響布局。

當(dāng)line-height < font-size時(shí)，

容器未被指定高度時(shí)，容器的上下兩側(cè)塌陷(類似于margin為負(fù)值的情況)，但上述公式仍成立。

  
a1（負(fù)值） + b1 + c1(負(fù)值) == line-height  &  a1 == c1

如下所示:

白色是塌陷的部分(即 a1 和 c1)，紅色是line-height，如果把容器設(shè)置為 overflow:hidden,
那么就只能看見紅色的部分。

如果容器被指定height高度時(shí)，

  
height > line-height，那么黃線會(huì)下移，紅色部分會(huì)展示更多，

    height < line-height，那么黃線會(huì)上移，紅色的部分被遮蓋的更多了。

所以在這里的情況是，

  
決定容器高度的優(yōu)先級(jí) height > line-height > font-size
vertical-align

垂直對(duì)齊線，默認(rèn)為baselien，來自W3C的定義：

  
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.


  
該屬性影響由多個(gè)內(nèi)聯(lián)元素生成的盒模型組成的行內(nèi)盒模型的垂直定位

vertical有幾個(gè)特定的值，或者指定一個(gè)值。


  
    English中文
  
  
    中文English

給第一個(gè)span，設(shè)置60px的垂直偏移量，顯示如下：

其中，黃色線就是基線（baseline），綠線和黃線的間隔即為60px。
這里會(huì)發(fā)現(xiàn)，容器（藍(lán)色）的高度被撐高了。

  
容器的高度 height = line-height + vertical-align

當(dāng)然同理,如果容器的高度被指定了，那么高度則不變，而超出的部分則不影響布局。如果設(shè)置overflow:hidden，超過的部分則不可見。

而vertical-align的其它特殊值，均可以看做一個(gè)根據(jù)容器高度而變化的相對(duì)值。

結(jié)論

熟練使用inline-level element和行內(nèi)布局的屬性，以非常快速完成垂直居中和水平居中的效果，并且有良好的可維護(hù)性和拓展性。

參考

W3C IFC
W3C line-height和vertical-aligin
line-height詳解

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/111100.html

相關(guān)文章

  • CSS常見問題小結(jié)

    摘要：常見問題小結(jié)一行內(nèi)樣式內(nèi)聯(lián)樣式外部樣式行內(nèi)樣式代碼寫在具體網(wǎng)頁中的一個(gè)元素內(nèi)比如一般不需要擔(dān)心樣式優(yōu)先級(jí)與樣式覆蓋在制作頁面的時(shí)候需要為很多的標(biāo)簽設(shè)置屬性，所以會(huì)導(dǎo)致頁面不夠純凈，文件體積過大不利于，后期維護(hù)成本高。 CSS常見問題小結(jié) 一、行內(nèi)樣式、內(nèi)聯(lián)樣式、外部樣式 行內(nèi)樣式：代碼寫在具體網(wǎng)頁中的一個(gè)元素內(nèi)；比如： 一般不需要擔(dān)心樣式優(yōu)先級(jí)與樣式覆蓋 在制作頁面的時(shí)...

    ivyzhang 評(píng)論0 收藏0

  • 小結(jié)——居中問題的解決

    摘要：居中問題居中問題定位不管用水平居中需要做如下處理定位不管用，水平居中需要做如下處理定位管用水平居中需要做如下處理定位管用，水平居中需要做如下處理定位加元素已知寬度定位加元素已知寬度父元素設(shè)置為子元素設(shè)置為距上，據(jù)左，然后減去元素自居中問題： 1.Fixed定位margin：0 auto;不管用，水平居中需要做如下處理： position: fixed; top: 0; bottom: 0; ...

    darkbaby123 評(píng)論0 收藏0

  • css寫作建議和性能優(yōu)化小結(jié)

    摘要：前言還有幾天就到國(guó)慶中秋了，快要放假了，先祝大家節(jié)日快樂之前寫過的寫作建議和技巧，那么今天就來聊聊吧說到，每一個(gè)網(wǎng)頁都離不開，但是對(duì)于，很多開發(fā)者的想法就是，只要能用來布局，把效果圖排出來就可以了，其它的細(xì)節(jié)或者優(yōu)化，不需要怎么考慮。 1.前言 還有幾天就到國(guó)慶中秋了，快要放假了，先祝大家節(jié)日快樂！之前寫過js的寫作建議和技巧，那么今天就來聊聊css吧！說到css，每一個(gè)網(wǎng)頁都離不開c...

    lifesimple 評(píng)論0 收藏0

  • css寫作建議和性能優(yōu)化小結(jié)

    摘要：前言還有幾天就到國(guó)慶中秋了，快要放假了，先祝大家節(jié)日快樂之前寫過的寫作建議和技巧，那么今天就來聊聊吧說到，每一個(gè)網(wǎng)頁都離不開，但是對(duì)于，很多開發(fā)者的想法就是，只要能用來布局，把效果圖排出來就可以了，其它的細(xì)節(jié)或者優(yōu)化，不需要怎么考慮。 1.前言 還有幾天就到國(guó)慶中秋了，快要放假了，先祝大家節(jié)日快樂！之前寫過js的寫作建議和技巧，那么今天就來聊聊css吧！說到css，每一個(gè)網(wǎng)頁都離不開c...

    hiYoHoo 評(píng)論0 收藏0

  • 前端入門實(shí)踐：CSS & 調(diào)試工具篇

    摘要：篇塊級(jí)元素行內(nèi)元素文檔流將窗體自上而下分成一行行，并在每行中按從左至右的順序排放元素，即為文檔流。 CSS篇 1.塊級(jí)元素 VS 行內(nèi)元素 文檔流!將窗體自上而下分成一行行， 并在每行中按從左至右的順序排放元素，即為文檔流。 塊級(jí)元素：自動(dòng)換行；垂直排列；width/height/margin/padding都可控制；默認(rèn)寬度100%，除非設(shè)置width/margindiv , ...

    Lavender 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<