元素可以分為塊級元素,行內元素以及行內塊級元素。行內元素的margin或者padding只有
margin-left
和margin-right
以及padding-left
和padding-right
有效果,margin-top、margin-bottom、padding-top、padding-bottom這四個屬性都可以對行內元素(如span)設定,但是在頁面中並不會生效。
塊級元素以及行內塊級元素的margin和padding都是正常生效的。
當頁面中的乙個元素div不對其設定寬度和高度的時候,則html、body、div,三者的寬度都是100%
,但是高度都是為0。
於是可以打出以下結論
塊級元素當沒有主動為其設定寬度和高度,瀏覽器會自動為其分配可使用的最大寬度(比如全屏寬度),但是不負責分配高度,塊級元素的高度是由子元素堆砌撐起來的。
那麼,html和body標籤的高度也都是由子級元素堆砌撐起來的。
* .div1
.div1
.div2
style>
class="div1">
class="div2">
div>
div>
body>
此時我們可以看到div2的高度為div1高度的一半
當我們不對div1設定高度的時候,頁面中什麼都沒有,
我們可以得出以下結論:
元素高度百分比需要向上遍歷父標籤要找到乙個定值高度
才能起作用,如果中途有個height為auto或是沒有設定height屬性,則高度百分比不起作用。
再來乙個小栗子:
* html
body
.div1
.div1
.div2
style>
class="div1">
class="div2">
div>
div>
body>
效果圖如下:
當html標籤無背景樣式時,body的背景色其實不是body標籤的背景色,而是瀏覽器的。參照:一旦html標籤含有背景色,則body的背景色變成了正常的body標籤自己的背景色,而此時的html標籤最頂級,背景色被瀏覽器獲取,成為瀏覽器的背景色。
你可能不知道的const
眾所周知,使用 const 宣告的變數必須同時初始化為某個值。一經宣告,在其生命週期的任何時候都不能再重新賦予新值 const a syntaxerror 常量宣告時沒有初始化 const b 3 console.log b 3 b 4 typeerror 給常量賦值const 宣告只應用到頂級原語...
你可能不知道的python logging機制
先來看幾個例子,先想一下執行結果,答案稍後揭曉 例一 mylogger logging.getlogger mylogger mylogger.info mylogger info mylogger.warning mylogger warning 例二 mylogger logging.getlo...
你可能不知道的viewport
前幾天偶然看到乙個pc端網頁,發現用手機開啟竟然同比縮放了,作為乙個前端從業者,我自然想要弄清它到底是怎麼縮放的。之後查了它的meta資訊,css和js,發現沒有任何相容手機端的 那它到底是怎麼縮放的呢?百思不得其解,最後無意中看別人說viewport的預設值是980px,才知道原來是viewpor...