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

曹金海發布于2019-08-28 18:14 / 2684人閱讀

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

元素的各種定義 塊級元素與塊元素 塊級元素(block-level elements)

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

塊元素

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

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

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

行內元素

display屬性為inline的元素，是行內級元素的一個子集

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

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

非置換元素(non-replaced element)

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

元素高度與寬度的討論 行內級非置換元素

寬度與高度的設置對于行內級非置換元素時不適用的，例如span,a

行內級置換元素

在前面已經結束過關于置換元素的概念，置換元素一般都是一般擁有固有尺寸（寬度，高度，寬高比）的元素，因此對于置換元素在不設寬度和高度的情況下，元素寬高度等于元素自身固有尺寸。因此只用對當元素寬度或者高度設為100%的情況進行討論

1.有固有比例的元素

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

2.沒有固有比例的元素

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

結論

對于行內級置換元素：在設寬度為100%的情況下
比照上一篇的例子，可自行進行實驗，這里我就直接給出結論
若元素為普通流元素或者浮動元素，元素寬度或者高度為父元素寬度或者高度的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
視覺格式化模型中的各種框
置換元素與非置換元素

GPU云服務器云服務器關于云服務器的文章寬度高度屏幕高度寬度 html寬度高度

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

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

CSS：關于元素寬度與高度的討論系列文章（一）

摘要：元素寬度為第一種情況元素為文檔流中元素結論將上面結論中的例子元素寬度換為，表現與結論例子的表現一樣，因此若元素為文檔流中元素，則子元素寬度為父元素寬度的的。約定:以下所討論元素均為,display:block的非置換元素。關于什么是置換元素，什么是非置換元素元素，以及在w3c標準中定義的各種視覺化格式的框將在一篇博文中作出詳細闡述。 1.元素不設寬度第一種情況：元素為文檔流中元素 ...

izhuhaodev 2019-08-28 18:12 評論0 收藏0
CSS:關于元素高度與寬度的討論系列文章(三)

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

syoya 2019-08-28 18:18 評論0 收藏0
CSS：元素高度與寬度的討論系列文章(四)

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

hqman 2019-08-30 12:55 評論0 收藏0
CSS:Margin與布局

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

ivan_qhz 2019-08-28 18:24 評論0 收藏0
CSS：不同元素margin:auto的計算

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

Michael_Ding 2019-08-30 12:55 評論0 收藏0