網頁制作：CSS細節優化集合

2020-03-24 18:58:29

字體：大中小

來源：轉載

供稿：網友

本文有關于CSS一些細節問題的總結，都是我們在設計中常用的一些內容。希望對大家有所幫助。
細節1。。。。。。。。。。。。。。。。。。。。。。。。。。。
一、當文字與圖片在一行，需要將文字與圖片底對齊，需要這樣寫： li 記住密碼 img src="" align="bottom" / /li 二、當文字與圖片在一行，需要將文字與圖片居中對齊，需要這樣寫： li 記住密碼 img src="html' target='_blank'>static/img/xyx.jpg" align="middle"/ /li 三、更改IE“查看源代碼”菜單打開的編輯器打開注冊表編輯器,在開始-運行中輸入regedit
找到以下位置： HKEY_LOCAL_MACHINE"SOFTWARE"Microsoft"Internet Explorer"View SourceEditor"Editor Name"修改默認的數據為"D:"Program Files"EmEditor"EmEditor.exe"
切換到IE中查看源代碼就可以看到效果了。
如果View Source Editor"Editor Name項沒有,可以自己新建。
四、自動最大化窗口，在 body 與 /body 之間加入： SCRIPT language="javascript"
setTimeout('top.moveTo(0,0)',5000);
setTimeout('top.resizeTo(screen.availWidth,screen.availHeight)',5000);
/script 五、window.opener 實際上就是用window.open打開的窗體的父窗體。比如在父窗體parentForm里面通過 window.open("subForm.html"),那么在subform.html中 window.opener就代表parentForm,可以通過這種方式設置父窗體的值或者調用js方法。1,window.opener.test(); ---調用父窗體中的test()方法；2,如果window.opener存在,設置parentForm中stockBox的值。 if (window.opener !window.opener.closed) { window.opener.document.parentForm.stockBox.value = symbol; }六、刷新頁面的方法Javascript刷新頁面的方法：
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.poluoluo.com" 加入 head 區域中3.js自動刷新頁面
script language="JavaScript"
function myrefresh()
{
window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
/script 4.JS刷新框架a)刷新包含該框架的頁面用
script language=JavaScript
parent.location.reload();
/script b)子窗口刷新父窗口
script language=JavaScript
self.opener.location.reload();
/script
( 或 a href="javascript:opener.location.reload()" 刷新 /a )c)刷新另一個框架的頁面
script language=JavaScript
parent.另一FrameID.location.reload();
/script
七、用過CSS hack應該知道，用下劃線命名是一種hack，如使用“_style”這樣的命名，可以讓IE外的大部分瀏覽器忽略這個樣式的定義，所以使用“_”做為命名時的分隔符是不規范的。在做CSS檢查時會出現錯誤提示。八、IE條件注釋寫法 !--[if !IE] 除IE外都可識別 ![endif]--
!--[if IE] 所有的IE可識別 ![endif]--
!--[if IE 5.0] 只有IE5.0可以識別 ![endif]-- 九、CSS HACK 寫法第一種：
.div {
background:orange;
*background:green !important;
*background:blue;
}
第二種：
.div {
margin:10px;
*margin:15px;
_margin:15px;
}
第三種：
#div { color: #333; }
*+html #div { color: #999; }
* html #div { color: #666; }
細節2………………………………………………………………………………
一、IE6及以下不識別a 標簽外的:hover偽類，在火狐，IE7里能正確達到效果，解決辦法：
#show li.s1{ border:1px solid #ff9900; background:#454242;}
#show li.s2{ border:1px solid #D9D8D8; background:#312E2E;}
li onMouseOut="this.className='s2'" /li 二、為元素設置hasLayout很多IE6（或IE7）的問題可以用設置hasLayout值的方法來解決，最簡單的給元素設置hasLayout值的方法是給加上CSS 的height或width(當然，zoom也可以用，但這不是CSS的一部分)。比如設置為height:1%。如果父元素沒有設置高度，那么元素的物理高度并不會改變，但是，已經具備hasLayout屬性。三、IE6下字符重復出現確保浮動元素設置了 display:inline; 在浮動元素中使用 margin-right:-3px;四、樣式優先級1，內聯樣式 [1.0.0.0]
2，ID選擇器 [0.1.0.0]
3，類，屬性，偽類選擇器 [0.0.1.0]
4，元素標簽，偽元素選擇器 [0.0.0.1]五、一個元素垂直居中的css寫法#exm{
position:absolute;
left:50%;
top:50%;
z-index:1;
width:200px; height:100px;
margin-left:-100px;
margin-top:-52px;
}六、zoom : normal | number
設置或檢索對象的縮放比例。設置或更改一個已被呈遞的對象的此屬性值將導致環繞對象的內容重新流動。雖然此屬性不可繼承，但是它會影響對象的所有子對象( children )。七、圖片跟文字并排時, 要實現圖片文字垂直居中:1 將line-height:設置成圖片的高度,或者圖片父元素的高度.
2 再將圖片的CSS設置vertical-align:middle;八、li 元素中包含 a img 元素的時候，IE6下出現空白解決方法一使 li 浮動，并設置 img 為塊級元素解決方法二設置 ul 的 font-size:0;解決方法三設置 img 的 vertical-align: bottom;
解決方法四設置 img 的 margin-bottom: -5px;細節3………………………………………………………………………………
一、被點擊訪問過的超鏈接樣式不在具有hover和active 解決方法：改變CSS屬性的排列順序: L-V-H-A二、FF下連續長字段不能自動換行解決方法：word-wrap:break-word;overflow:hidden;三、FF下父容器高度不能自適應解決辦法：清除子元素的浮動四、IE下圖片下方產生空隙解決辦法：定義img 為display:block，或vertical-align為top/bottom/middle/text-bottom 定義父容器的字體大小為零，font-size:0五、IE6下浮動元素和它相鄰的非浮動元素之間有3px空隙解決辦法：相鄰的非浮動元素也設置浮動；浮動元素相對IE6定義_margin-right:-3px;六、LI內容超長后以省略號顯示解決辦法： white-space:nowrap;(文本不換行)text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;七、文本不能垂直居中解決辦法：行高和容器高度相等line-height=height；八、文本輸入框和相鄰的文本不能對齊解決辦法：設置文本輸入框vertical-align:middle;九、IE設置滾動條樣式解決辦法：body{
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}十、IE6無法定義高度為1px的容器解決辦法：overflow:hidden zoom:0.8 line-height:1px細節4………………………………………………………………………………
一、讓層顯示在flash之上解決辦法：給FLASH設置透明 param name="wmode" value="transparent" / 或者 param name="wmode" value="opaque" / 二、使一個層垂直居中瀏覽器中解決辦法：使用百分比絕對定位，與外補丁負值的方法。 position:absolute;
top:50%;
left:50%;
margin:-100px auto auto -100px;
width:200px;
height:200px;三、加入收藏夾解決辦法： script type="text/javascript"
// ![CDATA[
function bookmark(){
var title=document.title
var url=document.location.href
if (window.sidebar) window.sidebar.addPanel(title, url,"");
else if( window.opera window.print ){
var mbm = document.create_r_rElement_x('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();}
else if( document.all ) window.external.AddFavorite( url, title);
}
// ]]
/script
a href="javascript:bookmark()" 加入收藏夾 /a 細節5………………………………………………………………………………
1.常見新聞列表的寫法：
ul
li span 2006年6月6日 /span a 新聞標題01 /a /li
li span 2006年6月6日 /span a 新聞標題02 /a /li
li span 2006年6月6日 /span a 新聞標題03 /a /li
li span 2006年6月6日 /span a 新聞標題04 /a /li
/ul
2.IE實現頁面背景漸變（FF及chrome不支持）
從上到下：
body{filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);}
左上至右下：
FILTER: Alpha( >從左至右
body{FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);}
從上到下

3.a hover的樣式實現多種效果，可以靈活運用
#outer a { border:1px solid #069;}
#outer a:hover {border:1px dashed #c00;}
4.border:none;與border:0區別
理論上的性能差異:
border:0;把border設為“0”像素雖然在頁面上看不見，但按border默認值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經占用了內存值。border:none;把border設為“none”即沒有，瀏覽器解析“none”時將不作出渲染動作，即不會消耗內存值。
兼容性差異：
兼容性差異只針對瀏覽器IE6、IE7與標簽button、input而言，在win、win7、vista 的XP主題下均會出現此情況。當border為“none”時似乎對IE6/7無效邊框依然存在,當border為“0”時，感覺比“none”更有效，所有瀏覽器都一致把邊框隱藏，
如何讓border:none;實現全兼容？只需要在同一選擇符上添加背景屬性即可
5.css實現多列等高布局,正內邊距與負外邊距
給每個需要實現等高的列應用樣式：.e {padding-bottom: 32767px; margin-bottom: -32767px;}6.position:relative;特殊用法？？？？
* {margin:0;padding:0;font:normal 12px/25px "宋體";}
body {background:#f8f8f8;}
ul {list-style:none;width:300px;height:25px;margin:20px auto;}
li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}
a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(***.gif) center center no-repeat;}
a:hover {color:#000;background:url(***.gif) 0 0 no-repeat;width:86px;position:relative;}
細節6………………………………………………………………………………
1。innerText：從起始位置到結束位置的內容，不包含標簽
innerHTML
outerHTML:包含 innerHTML和標簽
div id="test" span test1 /span test2 /div
test.innerText:test1 test2
test.innerHTML: span test1 /span test2
test.outerHTML: div id="test" span test1 /span test2 /div

2。Number（）：任何包含非數字字符的字符串做參數時，結果為NaN
parseInt():從左到右盡可能多低把字符串轉化為數字，直到遇到一個非數字時停止
isNaN():參數不是一個數字時，返回true;
3。a=23.50abc
typeof(a)=String
parseFloat(a)=23.5
parseInt(a)=23
Number(a)=NaN
4。JS變量名包含數字字母美元符下劃線，不能以數字開頭
5。getElementsByTagName_r()需要等文檔加載完畢后才能獲取到
6。nodeType：共12種，1表示元素節點，3表示文本節點
nodeName：表示節點名稱，如果是文本節點，則表示#text
nodeValue：表示節點的值
eg: 獲取tagname為li的節點if(obj.nodeName.toLowerCase()=='li'){}
改變P的文本內容 document.getElementsByTagName_r('p')[0].firstchild.nodeValue=''
7。父節點到子節點
childNodes：元素所有第一層子節點列表，不包括向下更深層次的子節點
obj.firstChild=obj.childNodes[0]
obj.lastChild=obj.childNodes[obj.childNodes.length-1]
hasChildNodes() 判斷元素是否有子節點，返回布爾值
7。子節點到父節點
var parentElm=myLinkItem.parentNode;
while(parentElm,className!=‘syna’ parentElm!='document.body')
parentElm=parentElm.parentNode
8。修改元素屬性
1）以對象屬性的方式獲取或設置
var mainImage=document.getElementByIdx_x('nav').getElementsByTagName['img'][0];
mainImage.src='';
mainImage.alt='';
2)用getAttribute()和setAttribute()方法
細節7………………………………………………………………………………
1。將數字轉化為擁有X位小數位的形式
function roundTo(base,precision)
{ var m=Math.pow(10,precision);
var a=Math.round(base*m)/m;
return a;
}
var n=3.942487;
roundTo(n,3)=3.942
roundTo(n,0)=3
2。創建受約束的隨機數
function randomBetween(min,max)
{ return min+Math.floor(Math.random()*(max-min+1))}
3。數字轉換為字符串
var a=10;
a=String(a);/a=a.toString();
4。對url的編碼
var a="http://www.google.com/directoryname/?p=e";
var b=escape(a);
var c=(b);
5。改變文檔內元素的類型
p--- div
首先創建一個div元素，然后復制p的子節點到div中，最后再用div 替換p
6。一個函數需要多少參數
function add(n1,n2){}
return num=add.length;
7。一個函數傳入了多少參數
function add(n1,n2){
return arguments.length;}
細節8………………………………………………………………………………
1). display:inline-block;顧名思義，就是在內聯情況下的塊狀，可以設定高度寬度。.element-class {
display: -moz-inline-stack; //Firefox only code
display: inline-block; //some standard browsers
zoom: 1; //IE only
*display: inline; //Only IE know this code (CSS Hack)
}2).清理浮動.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}.clearfix {zoom:1;} 3).在地址欄添加自定義圖標首先，我們需要預先制作一個圖標文件，大小為16*16像素。文件擴展名為ico，然后上傳到相應目錄中。在HTML源文件“ head /head ”之間添加如下代碼： Link Rel=”ICON NAME” href=”http://圖片的地址（注意與剛才的目錄對應）” ，當然如果用戶使用IE5或以上版本瀏覽時，就更簡單了，只需將圖片上傳到網站根目錄下，即可自動識別！4). 在IE6中設置display:block的空容器一個較小高度時，如 p >5).文字用省略號截斷div{width:200px;height:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS語法手冊（二）文本屬性

下一篇：HTML和CSS實現字體加粗的三種方法