成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

曹金海 / 2752人閱讀 

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

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

塊元素

display屬性值為block的元素，是塊級元素的一個子集。

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

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

行內(nèi)元素

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

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

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

非置換元素(non-replaced element)

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

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

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

2.沒有固有比例的元素

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

結(jié)論

對于行內(nèi)級置換元素：在設(shè)寬度為100%的情況下
比照上一篇的例子，可自行進行實驗，這里我就直接給出結(jié)論
若元素為普通流元素或者浮動元素，元素寬度或者高度為父元素寬度或者高度的100%；若元素為絕對定位元素，元素寬度或者高度為元素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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/111106.html

相關(guān)文章

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

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

    izhuhaodev 評論0 收藏0

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

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

    syoya 評論0 收藏0

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

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

    hqman 評論0 收藏0

  • CSS:Margin與布局

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

    ivan_qhz 評論0 收藏0

  • CSS：不同元素margin:auto的計算

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

    Michael_Ding 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<