你可能不知道的東西

2021-08-15 23:42:54 字數 1500 閱讀 9419

元素可以分為塊級元素,行內元素以及行內塊級元素。

行內元素的margin或者padding只有margin-leftmargin-right以及padding-leftpadding-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...