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

izhuhaodev 發(fā)布于2019-08-28 18:12 / 2032人閱讀

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

約定:以下所討論元素均為,display:block的非置換元素。
關于什么是置換元素，什么是非置換元素元素，以及在w3c標準中定義的各種視覺化格式的框?qū)⒃谝黄┪闹凶鞒鲈敿氷U述。

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

dd

dd

dd

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

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

dd

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

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

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

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

1.元素為浮動元素

dd

dd

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

2.元素為絕對定位元素

dd

dd

dd

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

3.元素為固定定位元素

dd

dd

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

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

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

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

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

關于元素高度的討論

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

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

若元素沒有內(nèi)容，則高度為0；若元素有內(nèi)容，元素高度為內(nèi)容高度

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

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

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

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

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

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

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

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

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

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

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

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

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

ivan_qhz 2019-08-28 18:24 評論0 收藏0
[譯] 關于兩種視口（viewport）的故事：其一

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

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