摘要:總結(jié)置換元素的高寬度計算規(guī)律都一樣。非置換元素塊級非置換元素如,具體計算見前面的文章非置換元素如,寬度與高度的設(shè)置對他不起作用非置換元素元素不設(shè)寬度,則元素寬度等于內(nèi)容寬度
前言
在之前的文章主要討論了下面幾種元素寬度與高度的計算:
塊級非置換元素(例:div)
Inline,非置換元素(例:span)
Inline,置換元素(例:表單元素)
這篇文章將繼續(xù)討論下列幾種元素的寬度與高度的在不同情況下的高度與寬度的計算
Inline-block,非置換元素在文檔流中(例:div設(shè)置為inline-block)
Inline-block,置換元素在文檔流中
Inline-block,非置換元素在文檔流中如果元素不設(shè)置寬度,則元素寬度等于內(nèi)容寬度。
Inline-block,置換元素與Inline,置換元素的規(guī)律一樣。
總結(jié)置換元素的高寬度計算規(guī)律都一樣。
非置換元素:
塊級非置換元素:如 Inline,非置換元素:如,寬度與高度的設(shè)置對他不起作用 Inline-block,非置換元素:元素不設(shè)寬度,則元素寬度等于內(nèi)容寬度 文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/115165.html
前言:在上一篇文章中討論了關(guān)于塊級非置換元素寬度與高度在不同情況下的表現(xiàn),在這篇文章中將詳細(xì)的闡述來自w3c定義的視覺化格式模型中對于各種元素的定義,以及行內(nèi)級非置換元素與行內(nèi)級置換元素寬度與高度的討論 元素的各種定義 塊級元素與塊元素 塊級元素(block-level elements) 那些視覺上會被格式化成塊狀的元素,通俗一點來說就是那些會換新行的元素。display 屬性值為:block,...
摘要:元素寬度為第一種情況元素為文檔流中元素結(jié)論將上面結(jié)論中的例子元素寬度換為,表現(xiàn)與結(jié)論例子的表現(xiàn)一樣,因此若元素為文檔流中元素,則子元素寬度為父元素寬度的的。 約定:以下所討論元素均為,display:block的非置換元素。關(guān)于什么是置換元素,什么是非置換元素元素,以及在w3c標(biāo)準(zhǔn)中定義的各種視覺化格式的框?qū)⒃谝黄┪闹凶鞒鲈敿?xì)闡述。 1.元素不設(shè)寬度 第一種情況:元素為文檔流中元素 ...
摘要:元素不在文檔流中結(jié)論如文章一中的結(jié)論一樣元素寬度等于其內(nèi)容所占空間同樣的在文章一中也得出了元素不設(shè)高度元素的高度為其內(nèi)容所占據(jù)空間若沒有內(nèi)容則高度為。 前言 在CSS:關(guān)于元素高度與寬度的討論 系列文章(一)中討論了display為display:block的置換元素的寬度與高度在不同情況下的表現(xiàn),但是有些地方并不嚴(yán)謹(jǐn),因此在這里做一個補充,在補充前先簡單介紹一下css盒模型以及其在可...
摘要:參考線示意圖如圖所示按箭頭所指方向使參考線變化的值都為正值。栗子沒在上加前效果如圖發(fā)生了堆疊。因此效果上來看便符合了預(yù)期如圖此布局便利用了原理,通過元素對相鄰元素位置的控制來達(dá)到預(yù)期的效果。 Margin與寬高度的關(guān)系 博客同步地址Margin與布局 在講此之前,必須知道什么是containing-box以及一些寬高度的一些關(guān)系,關(guān)于containing-box的概念以及與寬高度的關(guān)系...
摘要:它能給予一個關(guān)于你使用何種設(shè)備的正式結(jié)論,并且能通過獲得。寬度兩倍,高度兩倍,總體四倍。視口的作用是限制元素,元素是所有網(wǎng)頁塊元素中最高一級的元素。視口并非一個結(jié)構(gòu),其不受控制。重點是上訴結(jié)論是在縮放的條件下成立的。 原文地址:http://quirksmode.org/mobile/... 這篇小短文中,我將會介紹關(guān)于viewport與諸如html元素,window 對象,scree...
閱讀 634·2023-04-25 18:37
閱讀 2796·2021-10-12 10:12
閱讀 8374·2021-09-22 15:07
閱讀 577·2019-08-30 15:55
閱讀 3183·2019-08-30 15:44
閱讀 2204·2019-08-30 15:44
閱讀 1634·2019-08-30 13:03
閱讀 1570·2019-08-30 12:55