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

資訊專欄INFORMATION COLUMN

CSS:關(guān)于元素高度與寬度的討論 系列文章（二）

曹金海 / 2695人閱讀 

前言：在上一篇文章中討論了關(guān)于塊級(jí)非置換元素寬度與高度在不同情況下的表現(xiàn)，在這篇文章中將詳細(xì)的闡述來自w3c定義的視覺化格式模型中對(duì)于各種元素的定義，以及行內(nèi)級(jí)非置換元素與行內(nèi)級(jí)置換元素寬度與高度的討論
元素的各種定義 塊級(jí)元素與塊元素 塊級(jí)元素(block-level elements)

那些視覺上會(huì)被格式化成塊狀的元素，通俗一點(diǎn)來說就是那些會(huì)換新行的元素。display 屬性值為：block, list-item, table 值都可以將一個(gè)元素設(shè)置成塊級(jí)元素。

塊元素

display屬性值為block的元素，是塊級(jí)元素的一個(gè)子集。

行內(nèi)級(jí)元素與行內(nèi)元素 行內(nèi)級(jí)元素(inline-level elements)

行內(nèi)級(jí)元素是那些不會(huì)為自身內(nèi)容形成新的塊，而讓內(nèi)容分布在同一行中的元素。display 屬性的：inline, inline-table, inline-block 值都可以將一個(gè)元素設(shè)置成行內(nèi)級(jí)元素。

行內(nèi)元素

display屬性為inline的元素，是行內(nèi)級(jí)元素的一個(gè)子集

置換元素與非置換元素 置換元素(replaced element)

一個(gè)內(nèi)容 不受CSS視覺格式化模型控制，CSS渲染模型并不考慮對(duì)此內(nèi)容的渲染，且元素本身一般擁有固有尺寸（寬度，高度，寬高比）的元素，被稱之為置換元素。這類元素，瀏覽器根據(jù)元素的標(biāo)簽和屬性，來決定元素的具體顯示內(nèi)容。
常見的置換元素有這些：img,input,textarea,select,button等

非置換元素(non-replaced element)

w3c并沒有給出明確的非置換元素的解釋，但能確定的是除置換元素之外，所有的元素都是非置換元素。

元素高度與寬度的討論 行內(nèi)級(jí)非置換元素 
寬度與高度的設(shè)置對(duì)于行內(nèi)級(jí)非置換元素時(shí)不適用的，例如span,a
行內(nèi)級(jí)置換元素 
在前面已經(jīng)結(jié)束過關(guān)于置換元素的概念，置換元素一般都是一般擁有固有尺寸（寬度，高度，寬高比）的元素，因此對(duì)于置換元素在不設(shè)寬度和高度的情況下，元素寬高度等于元素自身固有尺寸。因此只用對(duì)當(dāng)元素寬度或者高度設(shè)為100%的情況進(jìn)行討論
1.有固有比例的元素

對(duì)于有固有比例的元素來說如果寬度與高度的一方有確定的值，若另一方并無設(shè)置值，則另一方的計(jì)算值就由確定的高度或者寬度乘以固有比例來得到，因此對(duì)于有固有比例的元素，我們只用討論高度與寬度中的一方即可，例如img元素

2.沒有固有比例的元素

對(duì)于沒有固定比例的元素，元素的寬度或者高度不會(huì)隨另一方的變化而變化，例如input,textarea,select,button等

結(jié)論

對(duì)于行內(nèi)級(jí)置換元素：在設(shè)寬度為100%的情況下
比照上一篇的例子，可自行進(jìn)行實(shí)驗(yàn)，這里我就直接給出結(jié)論
若元素為普通流元素或者浮動(dòng)元素，元素寬度或者高度為父元素寬度或者高度的100%；若元素為絕對(duì)定位元素，元素寬度或者高度為元素offset-parent寬度或者高度的100%；若元素為固定定位元素，元素寬度或者高度始終為body的100%

參考：
http://www.w3.org/TR/CSS21/conform.html
http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html
視覺格式化模型中的各種框
置換元素與非置換元素

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

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

相關(guān)文章

  • CSS：關(guān)于元素寬度與高度的討論 系列文章（一）

    摘要：元素寬度為第一種情況元素為文檔流中元素結(jié)論將上面結(jié)論中的例子元素寬度換為，表現(xiàn)與結(jié)論例子的表現(xiàn)一樣，因此若元素為文檔流中元素，則子元素寬度為父元素寬度的的。 約定:以下所討論元素均為,display:block的非置換元素。關(guān)于什么是置換元素，什么是非置換元素元素，以及在w3c標(biāo)準(zhǔn)中定義的各種視覺化格式的框?qū)⒃谝黄┪闹凶鞒鲈敿?xì)闡述。 1.元素不設(shè)寬度 第一種情況：元素為文檔流中元素 ...

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

  • CSS:關(guān)于元素高度與寬度的討論 系列文章(三)

    摘要：元素不在文檔流中結(jié)論如文章一中的結(jié)論一樣元素寬度等于其內(nèi)容所占空間同樣的在文章一中也得出了元素不設(shè)高度元素的高度為其內(nèi)容所占據(jù)空間若沒有內(nèi)容則高度為。 前言 在CSS:關(guān)于元素高度與寬度的討論 系列文章（一）中討論了display為display：block的置換元素的寬度與高度在不同情況下的表現(xiàn),但是有些地方并不嚴(yán)謹(jǐn),因此在這里做一個(gè)補(bǔ)充，在補(bǔ)充前先簡(jiǎn)單介紹一下css盒模型以及其在可...

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

  • CSS：元素高度與寬度的討論 系列文章(四)

    摘要：總結(jié)置換元素的高寬度計(jì)算規(guī)律都一樣。非置換元素塊級(jí)非置換元素如，具體計(jì)算見前面的文章非置換元素如，寬度與高度的設(shè)置對(duì)他不起作用非置換元素元素不設(shè)寬度，則元素寬度等于內(nèi)容寬度 前言 在之前的文章主要討論了下面幾種元素寬度與高度的計(jì)算: 塊級(jí)非置換元素(例:div) Inline,非置換元素(例:span) Inline,置換元素(例:表單元素)這篇文章將繼續(xù)討論下列幾種元素的寬度與高度...

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

  • CSS:Margin與布局

    摘要：參考線示意圖如圖所示按箭頭所指方向使參考線變化的值都為正值。栗子沒在上加前效果如圖發(fā)生了堆疊。因此效果上來看便符合了預(yù)期如圖此布局便利用了原理，通過元素對(duì)相鄰元素位置的控制來達(dá)到預(yù)期的效果。 Margin與寬高度的關(guān)系 博客同步地址Margin與布局 在講此之前，必須知道什么是containing-box以及一些寬高度的一些關(guān)系，關(guān)于containing-box的概念以及與寬高度的關(guān)系...

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

  • CSS：不同元素margin:auto的計(jì)算

    摘要：塊級(jí)置換元素，在文檔流中同塊級(jí)非置換元素一樣。塊級(jí)非置換元素，不在文檔流中當(dāng)這個(gè)值不是，而，則包含塊的高度定位元素高度塊級(jí)置換元素，不在文檔流中同上總結(jié)行內(nèi)級(jí)元素行內(nèi)級(jí)置換元素和非置換元素，在值為時(shí)，和的計(jì)算值都為。 關(guān)于什么元素的分類可以看我這篇文章CSS:關(guān)于元素高度與寬度的討論 系列文章（二） 行內(nèi)級(jí)元素 Inline，非置換元素:如果margin值為auto，則margin-...

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

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

0條評(píng)論

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