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

izhuhaodev 發布于2019-08-28 18:12 / 2027人閱讀

摘要：元素寬度為第一種情況元素為文檔流中元素結論將上面結論中的例子元素寬度換為，表現與結論例子的表現一樣，因此若元素為文檔流中元素，則子元素寬度為父元素寬度的的。

約定:以下所討論元素均為,display:block的非置換元素。
關于什么是置換元素，什么是非置換元素元素，以及在w3c標準中定義的各種視覺化格式的框將在一篇博文中作出詳細闡述。

1.元素不設寬度 第一種情況：元素為文檔流中元素

dd

dd

dd

結論1：把子元素定位換成position：relative與上述例子表現一樣，因此在元素不設寬度時，若元素為文檔流中元素，則此元素繼承其父元素寬度

第二種情況：元素為脫離文檔流元素

dd

結論2：把子元素定位換成position:absolute或position:fixed與上述例子表現一樣，因此在元素不設寬度的情況下，若子元素為脫離文檔流元素，則此元素寬度等于其內容寬度。

2.元素寬度為100% 第一種情況：元素為文檔流中元素

結論3：將上面結論1中的例子元素寬度換為100%，表現與結論1例子的表現一樣，因此若元素為文檔流中元素，則子元素寬度為父元素寬度的的100%。

第二種情況：元素為脫離文檔流元素

1.元素為浮動元素

dd

dd

結論4：當元素寬度為100%時，若元素為浮動元素，則此元素寬度為父元素寬度的100%。

2.元素為絕對定位元素

dd

dd

dd

結論5：當元素寬度為100%時，若元素為絕對定位元素，則元素寬度等于元素的offset-parent寬度的100%

3.元素為固定定位元素

dd

dd

結論6：當元素寬度為100%時，若元素為固定定位元素，則元素的寬度始終都為body寬度的100%

總結一 1.在元素不設寬度的情況下：

若元素為普通流中元素，元素寬度等于父元素寬度;
若元素不在文檔流中,元素寬度等于內容寬度;

2.在元素寬度為100%的情況下：

若元素為普通流元素或者浮動元素，元素寬度為父元素寬度的100%；若元素為絕對定位元素，元素寬度為元素offset-parent寬度的100%；若元素為固定定位元素，元素寬度始終為body的100%

關于元素高度的討論

根據上面關于寬度的討論，大家可以自己根據此思路進行元素高度討論得出結論，這里我就直接給出我經過驗證得出的結論。若有不當之處，請指正。

總結二 1.在元素不設高度的情況下：

若元素沒有內容，則高度為0；若元素有內容，元素高度為內容高度

2.在元素高度為100%的情況下：

若元素為普通流元素或者浮動元素，元素高度為父元素高度的100%；若元素為絕對定位元素，元素高度為元素offset-parent高度的100%；若元素為固定定位元素，元素高度始終為body的100%

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

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

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

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

前言：在上一篇文章中討論了關于塊級非置換元素寬度與高度在不同情況下的表現，在這篇文章中將詳細的闡述來自w3c定義的視覺化格式模型中對于各種元素的定義，以及行內級非置換元素與行內級置換元素寬度與高度的討論元素的各種定義塊級元素與塊元素塊級元素(block-level elements) 那些視覺上會被格式化成塊狀的元素，通俗一點來說就是那些會換新行的元素。display 屬性值為：block,...

曹金海 2019-08-28 18:14 評論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
[譯] 關于兩種視口（viewport）的故事：其一

摘要：它能給予一個關于你使用何種設備的正式結論，并且能通過獲得。寬度兩倍，高度兩倍，總體四倍。視口的作用是限制元素，元素是所有網頁塊元素中最高一級的元素。視口并非一個結構，其不受控制。重點是上訴結論是在縮放的條件下成立的。原文地址：http://quirksmode.org/mobile/... 這篇小短文中，我將會介紹關于viewport與諸如html元素，window 對象，scree...

rose 2019-08-01 15:43 評論0 收藏0