元素隱藏總結

2021-10-05 00:27:30 字數 871 閱讀 2641

static靜態定位:不脫標 ,占用文件流,不能使用偏移;

relative相對定位:不脫標 ,占用文件流 ,相當於自身進行移動;

absolute絕對定位:脫標,不再占用文件流,以帶有定位的父級盒子為參照物;

fixed固定定位:脫標,不再占有原來的位置,以瀏覽器為參照物;

sticky粘性定位:不脫標,占用原來的位置,也是以瀏覽器為參照物體,但是必須給定某一偏移屬性值才會生效

絕對定位和固定定位也和浮動類似。

1.行內元素新增絕對或固定定位,可以直接設定寬度和高度,別的定位不生效(只限絕對和固定定位)

2.塊級元素新增絕對或固定定位,如果不給寬度或者高度,預設大小為內容的大小,而不是寬度佔100%了

3.只要是脫標的盒子都不會出發外邊距塌陷(float、絕對或者固定)

4.絕對/固定定位會完全壓住盒子

但是浮動元素不同,浮動元素只會壓住它下面標準流的盒子,但是不會壓住下面標準流盒子裡面的文字((因為浮動最初產生的目的就是做文字環繞效果的,文字會圍繞浮動的元素),而絕對/固定定位會完全的壓住該盒子 內容/也會壓住。

5.如果乙個盒子定位時既有left又有right則缺省會執行left值 上下則預設執行上

本質:讓乙個元素在頁面中隱藏或顯示出來

1.display 顯示隱藏,設定乙個元素應該如何顯示

display:none 隱藏元素後,隱藏的元素位置也沒有了。

2.visibility 顯示隱藏

visibility:inherit 繼承上乙個父物件的可見性| visible 物件可視 | hidden 物件隱藏,隱藏的元素會繼續占有原理的位置

3.overflow:溢位顯示隱藏

overflow:visible|hidden|scroll|auto

CSS隱藏元素

在製作網頁時,隱藏內容也是一種比較常用的手法,它的作用一般有 隱藏文字 隱藏鏈結 隱藏超出範圍的內容 隱藏彈出層 隱藏滾動條 清除錯位和浮動等等。使用css即可使以上提到的內容隱藏起來,幾種隱藏內容的方法 1 使用display none來隱藏所有內容 display none可以讓網頁中所有內容不...

css元素隱藏

這個方式會把空間都釋放了,在控制台也不顯示了,所以綁在元素上的事件也都沒有了。不能修改子孫節點的dispaly值顯示出來。2.opacity 0 這個方式只是把元素的透明度設定為0,也就是把它變得透明,它本身還是在的只是看不到了,所以空間就不會釋放,綁在上面的事件也都在,能正常使用。3.visili...

CSS隱藏元素

一說到隱藏元素,很多人會想到display none 其實除了它還有很多隱藏元素的方法,它們都有各自特點和屬性,今天就來介紹以下兩種 一 display 在將display之前我們來看看元素的分類 分類一 塊級元素 特點 獨佔一行,對寬高生效,如果不給寬度撐滿整行,如果不給高度隨著內容的增長而增長。...