主題：關於CSS細節集合(一)

時間  2019-12-20
標籤 主題 關於 css 細節 集合 欄目 CSS 简体版
原文   原文鏈接

1、當文字與圖片在一行，須要將文字與圖片底對齊，須要這樣寫：

1
< li >記住密碼< img  src = ""  align = "bottom"  style = "margin-bottom:-4px" /></ li >

2、當文字與圖片在一行，須要將文字與圖片居中對齊，須要這樣寫：

1
< li >記住密碼< img  src = "static/img/xyx.jpg"  align = "middle" /></ li >

3、更改IE「查看源代碼」菜單打開的編輯器

  1. 打開註冊表編輯器,在開始-運行中輸入regedit前端UI分享
  2. 找到如下位置： HKEY_LOCAL_MACHINE」SOFTWARE」Microsoft」Internet Explorer」View SourceEditor」Editor Name」修改默認的數據爲」D:」Program Files」EmEditor」EmEditor.exe」

切換到IE中查看源代碼就能夠看到效果了。
若是View Source Editor」Editor Name項沒有,能夠本身新建。javascript

4、自動最大化窗口，在 <body> 與 </body> 之間加入：

1
2
3
4
<SCRIPT language= "javascript" >
setTimeout( 'top.moveTo(0,0)' ,5000);
setTimeout( 'top.resizeTo(screen.availWidth,screen.availHeight)' ,5000);
</script>

5、window.opener 實際上就是用window.open打開的窗體的父窗體。

好比在父窗體parentForm裏面 經過 window.open(「subForm.html」),那麼在subform.html中 window.opener
就表明parentForm,能夠經過這種方式設置父窗體的值或者調用js方法。css

  1. window.opener.test(); —調用父窗體中的test()方法；
  2. 若是window.opener存在,設置parentForm中stockBox的值。 前端UI分享
1
2
3
4
if  (window.opener && !window.opener.closed)
     {
        window.opener.document.parentForm.stockBox.value = symbol;
     }

6、刷新頁面的方法

Javascript刷新頁面的方法：html

  1. history.go(0)
  2. location.reload()
  3. location=location
  4. location.assign(location)
  5. document.execCommand(‘Refresh’)
  6. window.navigate(location)
  7. location.replace(location)
  8. document.URL=location.href

自動刷新頁面的方法:前端

  1. 頁面自動刷新：把<meta http-equiv=」refresh」 content=」20″>加入<head>區域中
  2. 頁面自動跳轉：把<meta http-equiv=」refresh」 content=」20;url=http://www.wyxg.com」>加入<head>區域中 前端UI分享
  3. js自動刷新頁面：
1
2
3
4
5
6
7
<script language= "JavaScript" >
function  myrefresh()
{
        window.location.reload();
}
setTimeout( 'myrefresh()' ,1000);  //指定1秒刷新一次
</script>

1、IE6及如下不識別a 標籤外的:hover僞類，在火狐，IE7裏能正確達到效果，解決辦法：

.代碼    收藏代碼
  1. #show li.s1{ border:1px solid #ff9900; background:#454242;}  
  2. #show li.s2{ border:1px solid #D9D8D8; background:#312E2E;}  

 

2、爲元素設置hasLayout

不少IE6（或IE7）的問題能夠用設置hasLayout值的方法來解決，最簡單的給元素設置hasLayout值的方法是給加上CSS 的height或width(固然，zoom也能夠用，但這不是CSS的一部分)。好比設置爲height:1%。若是父元素沒有設置高度，那麼元素的物理高度並不會改變，可是，已經具有hasLayout屬性。java

3、IE6下字符重複出現

確保浮動元素設置了 display:inline;chrome

在浮動元素中使用 margin-right:-3px;前端UI分享瀏覽器

4、樣式優先級

1，內聯樣式 [1.0.0.0]
2，ID選擇器 [0.1.0.0]
3，類，屬性，僞類 選擇器 [0.0.1.0]
4，元素標籤，僞元素 選擇器 [0.0.0.1]前端框架

5、一個元素垂直居中的css寫法

.代碼    收藏代碼
  1. #exm{  
  2.     position:absolute;  
  3.     left:50%;  
  4.     top:50%;  
  5.     z-index:1;  
  6.     width:200px;  
  7.    
  8.     height:100px;  
  9.     margin-left:-100px;  
  10.     margin-top:-52px;  
  11. }  

 

6、zoom : normal | number

設置或檢索對象的縮放比例。設置或更改一個已被呈遞的對象的此屬性值將致使環繞對象的內容從新流動。雖然此屬性不可繼承，可是它會影響對象的全部子對象( children )。前端UI分享app

7、圖片跟文字並排時, 要實現圖片文字垂直居中:

  1. 將line-height:設置成圖片的高度,或者圖片父元素的高度.
  2. 再將圖片的CSS設置vertical-align:middle;

8、li 元素中包含 a img 元素的時候，IE6下出現空白

解決方法 一:框架

使 li 浮動，並設置 img 爲塊級元素

解決方法 二:

設置 ul 的 font-size:0;

解決方法 三:

設置 img 的 vertical-align: bottom;

解決方法 四:

設置 img 的 margin-bottom: -5px;

9、被點擊訪問過的超連接樣式不在具備hover和active

解決方法：改變CSS屬性的排列順序: L-V-H-A

10、FF下連續長字段不能自動換行

解決方法：

.代碼    收藏代碼
  1. div{word-wrap:break-word;overflow:hidden;}  
 

11、FF下父容器高度不能自適應

解決辦法：清除子元素的浮動

12、IE下圖片下方產生空隙

解決辦法：

  • 定義img 爲display:block，或vertical-align爲top/bottom/middle/text-bottom
  • 定義父容器的字體大小爲零，font-size:0

十3、IE6下浮動元素和它相鄰的非浮動元素之間有3px空隙

解決辦法：

  • 相鄰的非浮動元素也設置浮動；
  • 浮動元素相對IE6定義_margin-right:-3px;

十4、LI內容超長後以省略號顯示

解決辦法： white-space:nowrap;(文本不換行)text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;

十5、文本不能垂直居中

解決辦法：行高和容器高度相等line-height=height；

十6、文本輸入框和相鄰的文本不能對齊

解決辦法：設置文本輸入框vertical-align:middle;前端UI分享

十7、IE設置滾動條樣式

解決辦法：

.代碼    收藏代碼
  1. body{  
  2. scrollbar-face-color:#f6f6f6;  
  3. scrollbar-highlight-color:#fff;  
  4. scrollbar-shadow-color:#eeeeee;  
  5. scrollbar-3dlight-color:#eeeeee;  
  6. scrollbar-arrow-color:#000;  
  7. scrollbar-track-color:#fff;  
  8. scrollbar-darkshadow-color:#fff;  
  9. }  

 

十8、IE6沒法定義高度爲1px的容器

解決辦法：

.代碼    收藏代碼
  1. div{  
  2. overflow:hidden;  
  3. zoom:0.8;  
  4. line-height:1px;  
  5. }  

1、讓層顯示在flash之上

解決辦法：給FLASH設置透明<param name=」wmode」 value=」transparent」 />或者<param name=」wmode」 value=」opaque」 />

2、使一個層垂直居中瀏覽器中

解決辦法：使用百分比絕對定位，與外補丁負值的方法。

.代碼 
  1. {position:absolute;  
  2.     top:50%;  
  3.     left:50%;  
  4.     margin:-100px auto auto -100px;  
  5.     width:200px;  
  6.     height:200px;  
  7. }  
 

3、加入收藏夾前端框架分享

解決辦法：

.代碼 
  1. <script type="text/javascript">  
  2. // <![CDATA[  
  3. function bookmark(){  
  4. var title=document.title  
  5. var url=document.location.href  
  6. if (window.sidebar) window.sidebar.addPanel(title, url,"");  
  7. else if( window.opera && window.print ){  
  8. var mbm = document.create_r_rElement_x('a');  
  9. mbm.setAttribute('rel','sidebar');  
  10. mbm.setAttribute('href',url);  
  11. mbm.setAttribute('title',title);  
  12. mbm.click();}  
  13. else if( document.all ) window.external.AddFavorite( url, title);  
  14. }  
  15. // ]]>  
  16. </script>  
 
.代碼 
  1. <a href="javascript:bookmark()">加入收藏夾</a>  
 

4、IE實現頁面背景漸變（FF及chrome不支持）

從上到下：

.代碼 
  1. body{filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);}  
 

左上至右下：

.代碼 
  1. body{  
  2. filte: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100); skyblue;  
  3. }  
 

從左至右：

.代碼 
  1. body{FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);}  
 

從上到下：

.代碼 
  1. style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"  
 

5、border:none;與border:0區別

理論上的性能差別:

前端框架分享

border:0;把border設爲「0」像素雖然在頁面上看不見，但按border默認值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經佔用了內存值。border:none;把border設爲「none」即沒有，瀏覽器解析「none」時將不做出渲染動做，即不會消耗內存值。

兼容性差別：

兼容性差別只針對瀏覽器IE六、IE7與標籤button、input而言，在win、win七、vista 的XP主題下均會出現此狀況。

當border爲「none」時彷佛對IE6/7無效邊框依然存在,當border爲「0」時，感受比「none」更有效，全部瀏覽器都一致把邊框隱藏，如何讓border:none;實現全兼容？只須要在同一選擇符上添加背景屬性便可

6、css實現多列等高佈局,正內邊距與負外邊距

給每一個須要實現等高的列應用樣式：

.代碼 
  1. .e{padding-bottom:32767px;margin-bottom:-32767px;}  
 

7、display:inline-block;顧名思義，就是在內聯狀況下的塊狀，能夠設定高度寬度。前端框架分享

.代碼 
  1. .element-class {  
  2. display: -moz-inline-stack; //Firefox only code  
  3. display: inline-block; //some standard browsers  
  4. zoom: 1; //IE only  
  5. *display: inline; //Only IE know this code (CSS Hack)  
  6. }  
 

8、清理浮動

.代碼 
  1. .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}  
  2. .clearfix {zoom:1;}  

 

9、文字用省略號截斷

.代碼 
  1. div{width:200px;height:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}  
 
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程