關於元素的隱藏

2022-03-25 04:51:49 字數 1307 閱讀 1274

又是好久沒寫部落格了。每每想寫篇部落格,卻發現比我寫得好的多不勝數。

當然,寫部落格的初心不會為了攀比和炫耀,但看到別人寫得如此甚好,我只能自慚形穢了。

於是選擇了摘抄在自己的筆記裡(onenote中),在此也向那些寫部落格的人表達敬意。因為你們,我收穫了很多。

因為你們,很多次遇到難題,我迎面而解。也感激那些無私幫助我的人。

還是就此步入正題好了,我怕偏題太遠。

1.display:none;  ----不佔空間

2.visibility:hidden; ----佔空間,無法點選

2.1position: absolute;

visibility: hidden;

---- 不佔空間

3.  opacity: 0;

-moz-opacity: 0;/*moz + ff */

filter: alpha(opacity=0);/*ie*/

-----佔空間,可點選(存在效能問題)

4.  height:0;

overflow:hidden;

----不佔空間(只能用於塊元素,因為行內元素設定高無效)

5.  font-size:0

----不佔空間 (某些瀏覽器不支援,存在相容問題)

6.text-indent: 9999px; -----設乙個很大值

height: 20px;

overflow: hidden;

-----佔空間,可點選(只能用於塊元素,因為text-indent只用於塊元素首行)

text-indent 可設乙個很大的正值或者負值視情況而定

7. line-heihgt:500px;-----設乙個很大的值

height:50px;

overflow:hidden;

-----佔空間,可點選(只能用於塊元素)

8.   position: relative;

top: -99999em;

-----佔空間,可點選

9.  position: absolute;

top: -99999em;

----不佔空間

10.  zoom: 0.001;

-moz-transform: scale(0);

-webkit-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

-----不佔空間(ie下好使,谷歌下內聯元素不正常)

11.如果支援的話,字型與背景顏色一致也可偽隱藏效果

css總是那麼的神奇。。。

關於前端隱藏元素的問題

1.visibility 不會自適應 可選值 visible 預設值。元素是可見的。hidden 元素是不可見的。collapse 當在 元素中使用時,此值可刪除一行或一列,但是它不會影響 的布局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上,會呈現為 hidden inheri...

論元素的隱藏

1 display none,確保元素不可見,連盒模型都不生成,真正意義上的隱藏,被隱藏的元素也不佔據文件的任何空間,所以繫結在元素上的dom事件也不會被觸發,同時,連這個元素的子孫元素也不可見。2 visibility hidden,被隱藏的元素依然佔據文件的空間,對布局產生影響,想要顯示某個子孫...

隱藏元素的方法

a.visibility hidden 這個屬性只是簡單的隱藏某個元素,但是元素占用的空間任然存在 b.opacity 0 乙個css3屬性,設定0可以使乙個元素完全透明,製作出和visibility一樣的效果。與visibility相比,它可以被transition和animate c.posit...