關於元素的隱藏

又是很久沒寫博客了。往往想寫篇博客,卻發現比我寫得好的多不勝數。css

固然,寫博客的初心不會爲了攀比和炫耀,但看到別人寫得如此甚好,我只能自慚形穢了。web

因而選擇了摘抄在本身的筆記裏(oneNote中),在此也向那些寫博客的人表達敬意。由於大家,我收穫了不少。瀏覽器

由於大家,不少次遇到難題,我迎面而解。也感激那些無私幫助個人人。性能

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

關於元素的隱藏:

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

2.visibilityhidden; ----佔空間,沒法點擊orm

2.1 ci

   position: absolute; 博客

   visibility: hidden; it

   ---- 不佔空間

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老是那麼的神奇。。。

相關文章
相關標籤/搜索