CSS學習之CSS網頁制作的10個技巧

2024-07-11 08:44:32

字體：大中小

來源：轉載

供稿：網友

學習ccs和制作網站當中遇到的一些疑問，整理的一些筆記.
1.marquee 滾動樣式是IE獨有的,FF不支持
2.css中的filter效果是IE的私有屬性,同樣所有的非IE瀏覽器都不認識的.
3.text-transform:capitalize 強制第一個字母大寫；
text-transform:lowercase 強制所有字母小寫
text-transform:uppercase 強制所有字母大寫
4.按鈕陷下去的效果
a:hover { position:relative; top:1px; left:1px}
5.禁止內容換行與強制內容換行
在表格或層中我們可能希望內容不換行或強制換行，我們可以通過一些css屬性來達到這些要求。
禁止換行：white-space:nowrap
強制換行：word-wrap: break-word; word-break: normal;
6.css在容器內的定位 #navigation { position:absolute; left:30px; top:5px}
7 文字環繞圖片效果，只要在img標簽上加上float:left.
img { float:left}
8 當寫了一個空div時，這個div在IE是有默認高度的，FF下沒有。要取消默認高度，可以定義：
div { witdh:100%; background:#ccc; ling-height:0}
9.區別relative和absolute
Absolute，CSS中的寫法是：position:absolute; 他的意思是絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，默認依據父級的做標原始點為原始點。如果設定TRBL并且父級沒有設定position屬性，那么當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。
Relative，CSS中的寫法是：position:relative; 他的意思是絕對相對定位，他是參照父級的原始點為原始點，無父級則以BODY的原始點為原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位。
10.區別display和visibility
display:none和visibility:hidden都可以隱藏一個元素
但visibility:hidden則相當把元素從頁面中去除，其占用位置也將被刪除。
而display:none只是隱藏了元素的內容，但其使用的位置空間仍然被保留。

上一篇：CSS網頁布局學習之Font-size的妙用

下一篇：CSS學習之css代碼的簡寫的十條規則