2011年5月8日 星期日

[CSS]CSS筆記

瀏覽器會出現的問題
IE下浮動元素雙倍邊距時的解決辦法
將浮動元素後再加設display屬性設為inline。

Example Source Code

.spacer {float:left; display:inline; margin-left:20px;}
列表加上浮動在各瀏覽器中的解決
CSS總是出人意表，而IE卻總是讓人意外。
IE下的留白是由 margin引起的，非IE的留白是由padding引起的（margin和padding大概為40px）。
只要對清單元素進行了浮動，在IE 中，列表前的默認序號（圓點或阿拉伯數字，即list-style-type）就會消失無形；而在非IE中卻是正常的。 原因就是margin和padding。
因為預設情況下的序號位置list-style-position為outside，這就要求必須為序號 出現預留位置，或margin或padding。 而要解決這個問題，就得想辦法讓序號出現不需要預留位置，預設outside是需要留白才能顯示的，所以就更換為inside。 

Example Source Code

ul { list-style-position:inside; float:left; }

區分IE6，IE7，firefox
只能辨別*，不能辨別 ，支援_
能辨別*，能辨別 !important，支援_
不能辨別*，能辨別 !important，不支援_
 *_(下底線)!important
IE6oox
IE7oxo
firefoxxxo
所以寫法為firefox，IE7，IE6(順序都是firefox的寫在最前面，IE7的在中間，IE6的在最後面)|

Example Source Code

background:orange; *background:green; _background:blue;


CSS裡定義hr，解決ie與ff會出現重覆線段問題

Example Source Code

hr{ height:1px;border:none;border-top:1px dashed #000;}

hr預設高度即為1px;
先 將border設為取消，再從新對border下樣式!
比較常用的
ie中如何讓超出寬度的文字顯示為省略號？
定義：overflow:hidden; width:xxx; white-space:nowrap; text-overflow:ellipsis;
如何讓min-height兼容ie6?
.min-height{min-height:100px; _height:100px;}
區別display:none與visibility:hidden? 
相同的是display:none與visibility:hidden都可以用來隱藏某個元素；
不同的是display:none在隱藏元素的時候，將其占位空間也去掉；而visibility:hidden只是隱藏了內容而已，其占位元空 間仍然保留。
CSS的滑鼠為手指形狀
IE，設置CSS的滑鼠為手形，通 常用：cursor：hand; 但這在Firefox下是無效的。
cursor：pointer; 這在IE和Firefox下都是通用的。
超鏈接訪問過後hover樣式就不出現
被點擊訪問過的超鏈接樣式不在具有hover和active了, 解決方法是改變CSS屬性的排列順序: L-V-H-A ps：好在自己一開始書寫時就沒有把這四種樣式寫全過，我只寫 a:link ，a:hover ，一直也沒出現什麼問題，後來發現ie6下a:visited 和 ff下的顏色不一致。
IE6的雙倍邊距BUG
例如:

Example Source Code

<style type="text/css">
body {margin:0}
div { float:left; margin-left:10px; width:200px; height:200px; border:1px solid red }
</style>
浮動後本來外邊距10px,但IE解釋為20px,解決辦法是加上display:inline
ps：剛開始接觸這一工作的時候真的是不知道怎麼回事，還以為是各個瀏覽器之間的解釋不同，製作的時候只能小心意義的以ie6的寬度來定義，可惜ff 和ie經常預覽效果不一致，好在現在解決了。
FF下文本無法撐開DIV的高度
標準瀏覽器中固定高度值的容器是不會像IE6那樣被撐開的,那我又想固定高度，去掉he ight設置min-height:200px; 這裡為了照顧不認識min-height的IE6 可以這樣定義：

Example Source Code

div { height:auto!important; height:200px; min-height:200px; }
web標準中IE設置滾動條顏色了

Example Source Code

<style type="text/css">
html { 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; }
</style>
定義1px左右高度的容器
IE6下這個問題是因為默認的行高造成的，解決的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px
讓層顯示在FLASH之上
解決的辦法是給FLASH設置透明:

Example Source Code

<param name="wmode" value="transparent" />
DIV垂直居中於瀏覽器中

Example Source Code

<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
這裡使用百分比絕對定位，margin的值就是div寬度的1/2;
firefox嵌套div標籤的居中問題的解決方法
假定有如下情況：

Example Source Code

<div id="a">
<div id="b"> </div>
</div>
如果要實現b在a中居中放置，一般只需用CSS設置a的text-align屬性為center。這樣的方法在IE裡看起來一切正常；但是在 Firefox中b卻會是居左的。
解決辦法就是設置b的橫向margin為auto。例如設置b的CSS樣式為：margin: 0 auto;。
基本的觀念
理解塊元素(block element)與內聯元素(inline element)元素
塊元素(block element)與內聯元素(inline element)元素對於web製作是很重要的。
依據元素顯示(display)時的表現，可以看出，所有可見元素中，不是塊元素的就是內聯元 素。
可以這樣想像一下，塊元素是一個大的框架，用於搭建大體結構，而內聯元素，就是用來組成細節和更具體的部分了。
開始web製作時，通 常都會用塊元素先搭出一個架子，確定大框架的結構，然後往裡面添加內聯元素，作為細節的構造。

塊元素和內聯元素的表現有什麼不同呢？ 嘗試寫一點代碼就可以看出來區別了
<div>我是塊元素div</div>
<div>我是塊元素div</div>
<p>我是塊元素p,<span>我是內聯元素span</span>,<span>我也是內聯元素 span</span>,<em>我是內聯元素em</em></p>
<ul>
<li>ul,li 都是塊元素哦</li>
<li>ul,li 都是塊元素哦</li>
</ul>
結果如下↓

我是塊元素div
我是塊元素div
我是塊元素p,我是內聯元素span,我也是內聯元素span,我是內聯元素em
  • ul,li 都是塊元素哦
  • ul,li 都是塊元素哦

區別就可以看出來了：一個塊元素占了一行，兩個塊元素不會在同一行，而內聯元素就不一樣了，它們在同一行上依次排開，遇到邊界才會換行。
 
<div>,<p>,<h1>,...<h6>,<blockquote>都是塊元 素，<q>,<a>,<em>,<img>都是內聯元素。
另外， 像<meta>,<head>...這些不可見元素不在它們的範圍之內，這些不可見元素我們稱為頂級元素(top element)。

在書寫CSS的時候，內聯元素的高度寬度都是不可以設置的，其寬度就是自身文字或者圖片的寬度。

張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)