css display相關知識點

2021-10-20 20:10:37 字數 1415 閱讀 6213

一、css-display

display:block

block元素會佔一行;預設情況下,block元素寬度為父元素寬度。

block元素可以設定width,height屬性;塊級元素設定了寬度,寬度小於父元素寬度,仍會佔一行顯示。

block元素可以設定margin和padding屬性。

display:inline

inline元素不會佔一行,多個行內元素排列直到一行排列不下就會重新換行,其寬度隨元素的內容變化

inline元素設定width,height屬性無效。

inline元素的margin和padding屬性,水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果;但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

display:inline-block

元素可以擁有block元素可設定的屬性,但是不會佔一行顯示

二、display:none、visibility:hidden 和 opacity:0 之間的區別?

共同點:

都是隱藏

不同點:

一、是否佔據空間

display:none,隱藏之後不佔位置

visibility:hidden、opacity:0 隱藏之後仍然佔據位置

二、子元素是否繼承

display:none 不會被子元素繼承,父元素都不存在了,子元素也不會顯示出。

visibility:hidden 會被元素繼承,通過設定子元素visibility:visibility來顯示子元素。

opacity:0 會被子元素繼承,但是不能設定子元素opacity:1來重新顯示。

三、事件繫結

display:none 的元素都已經不在頁面存在了,因此無法觸發它繫結的事件。

visibility:hidden 不會觸發它上面繫結的事件。

opacity:0 元素上面繫結的事件是可以觸發的。

四、過渡動畫

transition對於display是無效的。

transition對於visibility是無效的。

transition對於opacity是有效的。

相關知識點

nweb inf uclasses uweb.xml ulib n 從httpservlet 繼承,重寫doget dopost方法 n部署web.xml n 只有乙個物件 n 第一次請求的時候被初始化,只一遍 n 初始化後先呼叫init 方法,只一遍 n 每個請求,呼叫一遍service serv...

Camera相關知識點

1 camera涉及到的概念 1.1 preview capture video preview 預覽 capture 拍照 video 錄影 1.2 幀率 快門 幀率 frame rate 用於測量顯示幀數的量度。所謂的顯示單位為每秒顯示的幀數,簡稱fps或hz 快門 shutter。快門是攝像器...

CURL相關知識點

1,建立乙個curl的會話資源 ch curl init 設定url,引數傳遞出來的時候 curl setopt ch,curlopt url,url 使用post提交的資料 curl setopt ch,curlopt post,1 if post data 設定是否將響應結果存入變數,1或者tr...