返回首頁
當前位置: 主頁 > 網絡編程 > Asp實例教程 >

CSS技巧匯總

時間:2018-12-28 13:26來源:知行網www.wtckvq.live 編輯:麥田守望者

一直在學習著關于網頁標準化的一些知識和概念,實踐的雖然不是很多,在日常的工作中也總結出了不少需要注意的技巧和細節。今天抽空把 CSS 經常用到的一些技巧匯總一下與大家一起分享,希望可以起到拋磚引玉的作用。本篇文章會隨時保持更新,如果大家有什么好的CSS技巧歡迎留言給我。
 

1.css布局的居中問題

主要的樣式定義如下:

body {TEXT-ALIGN: center;}
#center { MARGIN: 0 auto; }

說明:首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容居中;對于IE這樣設定就已經可以了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需要說明的是,如果你想用這個方法使整個頁面要居中,個人建議不要套在一個DIV里,可以依次拆出多個div,只要在每個拆出的div里定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

2.兼容多種瀏覽器

現在我大部分都是用!important來hack,對于ie6和firefox測試可以正常顯示,但是ie7對!important可以正確解釋,會導致頁面沒按要求顯示!搜索了一下,找到一個針對IE7不錯的hack方式就是使用“*+html”,現在用IE7瀏覽一下,應該沒有問題了。

現在寫一個CSS可以這樣:

#example { color: #333; }
* html #example { color: #666; }
*+html #example { color: #999; }

那么顯示效果在firefox下字體顏色顯示為#333,IE6下字體顏色顯示為#666,IE7下字體顏色顯示為#999,他們都互不干擾。

3. 盒模型不同解釋

#main {width: 768px !important;width : 770px;}

IE不支持聲明(!important),

FIREFOX等瀏覽器識別出聲明(!important),接受WIDTH:768PX;

IE5.X不認識聲明(!important),則接受第二次定義的WIDTH:770PX ;

IE6首先接受第一次定義的WIDTH:768PX,而接下來無法解釋這個空的注釋語句,因此忽略其后的定義,最終接受WIDTH:768PX。

4. CSS邊界壓縮問題

塊級元素,未浮動的垂直相鄰元素上下邊界會被壓縮,取其中較大的值。

浮動元素的垂直邊界不壓縮,且浮動元素不聲明寬度,則其寬度趨向于0。

5. 清除浮動

方法一:

.hackbox{display:table;//將對象作為塊元素級的表格顯示}

方法2:

.hackbox{clear:both;}

方法三:

.f_clear:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.f_clear {display: inline-table;}
* html .f_clear {
height: 1%;
}
.f_clear {
display: block;
}

ps:最后一種是CSS2.0中的偽元素:after,和content屬性一起使用,設置在元素后發生的內容,在此用作清除浮動。

6. 浮動在IE中產生的雙倍距離

#box{ float:left; width:100px; margin:0 0 0 100px; }

在上面這種情況之下IE5.x和IE6會產生200px的距離。

解決辦法:用display:inline; 可使浮動忽略。

這里細說一下block和inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上, 高度,寬度,行高,邊距不可控制(內嵌元素);

#box{ display:block; //可以為內嵌元素模擬為塊元素 display:inline; //實現同一行排列的的效果。

7. 高度不適應

高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節,特別是當內層對象使用margin 或padding時。例:

HTML代碼:

p對象中的內容

CSS代碼:

#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解決方法:在P對象上下各加2個空的div對象CSS代碼:

#box {height:0px;overflow:hidden;}

或者為DIV加上border屬性。

8.浮動時邊界的雙倍問題

IE中在CSS中將元素的FLOAT和TEXT-ALIGN的方向設為一致,則在IE中邊界會被顯示為聲明值的2倍,解決方法:在聲明里加上display:inline;

CSS代碼:

#box {text-align: left; float: left; margin-left: 100px;}

HTML代碼:

p對象中的內容

9. 常用文檔字體集定義

我一般是這樣定義的:

body {font:12px/18px Arial, "宋體",Tahoma, Geneva,Verdana, sans-serif;}

請注意定義中文字體要加上引號。

英文操作系統常用字體:Verdana, Arial, Helvetica, sans-serif

10.圖片不換行

可定義如下:

.img{white-space: nowrap;}

空格:不換行,可以保持圖片不換行。

11.使表格邊框重疊

table{caption-side:bottom;border-collapse:collapse;}

12.不同瀏覽器的盒模型寬度解釋問題

IE和Mozilla瀏覽器對盒模型的解釋不一致,造成我們定位上的困難,主要差別是:

IE計算2個div之間的距離時候,會把1px的border計算在內,而mozilla沒有;

設定div的寬度后,如果給padding加一個值,IE會在寬度內減去這個值,而Mozilla會在寬度基礎上加上這個值。

13. 表單實現較好的親和力

fieldset標簽會在包含的文本和input等表單元素外面形成一個方框,legend元素作為標題。

label標簽用于表單元素(input,textarea or select)配于for將值傳遞給相應的表單元素。

tabindex屬性用于input,textarea等標簽,給其一個編號,使用鍵盤上的TAB鍵就很容易地進入文本框中。

14.釋義列表的使用

釋義列表的開始標簽是<dl>,每個被解釋的內容開始標簽為<dt>,每個解釋的內容開始標簽是<dd>。在<dd>標簽中的內容可以是段落,回車符,圖像,連接或者是其他的列表等。

15.透明FLASH的插入


16.span標簽的用法

SPAN標簽沒有特殊的意義,可以用作排版的輔助,例如:

  • (4.23)園子的博客在上海安新家啦!

然后在css中定義span為右浮動,就實現了日期和標題分兩側顯示的效果。

17.解決在XHTML 1.1中language屬性非法的方法

可將language改為type或者在<head>區內加入如下代碼:


18.符合標準的外部鏈接寫法

javascript代碼:


HTML代碼:

園子的博客

19.一般小型企業網站樣式表結構

base.css(基本共用樣式)module.css(模塊樣式)forms.css (表單樣式)mend.css(補丁樣式)print.css(打印樣式)

20. 首字下沉樣式代碼

#article:first-letter {font-size:2.5em; font-family:"楷體_GB2312"; font-weight:bold; line-height:1.2em;float:left;padding:5px 2px 0 0; color:#c00;}21. 一些少用的文本標簽

 

表示已經刪除的文檔或段落:

這是已刪除的文檔

刪除的部分作出一些添加與修改。那么時候這個標簽就非常有作用了那就是插入標簽<ins></ins>。例:

這是插入的修改部分

千萬別忘記了給這兩個標簽加上兩個重要的屬性:cite與datetime。解釋與時間。解釋不用說了,只要用文字注明為什么要刪除或是為什么要插入就可以了。但是這個時間需要明確一下格式。嚴格的格式是:YYYY-MM-DDThh:mm:ssTZD。與我們平時用的差不多但是有區別,其中T是表示時間段開始的必需字符,而TZD則是表示時區,Z是表是格林威治標準時間。一般的寫法是:2008-03-25T14:26:22Z。

上下標的寫法,例:

我是上標,你是下標

22. 改變有序列表的開始值

有時候我們不想讓有序列表值從1開始,這個時候就會用到:

 

23. display:inline-block的用法

語義:將對象呈遞為內聯對象,但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內,允許空格。支持的瀏覽器有:Firefox3 beta、IE8 beta、Opera、Safari。

24. min-width最小寬度的設置

min-width概述:min-width是設置對象最小寬度的樣式(Style)。IE并不支持此屬性。例:

 

25.圖文混排的垂直居中

很多人在圖片與文本混排的時候想讓圖片相對于文本垂直居中除了用IE的私有特性 valign="absmiddle"別無他法。記住,默認下圖片就是屬于inline-block,你只需簡單的

img {vertical-align:middle;}

即可。

26.左右列高度自適應代碼

#main_l,#main_r{margin-bottom:-32767px;padding-bottom:32767px;}

上面代碼是應用負邊界法來解決左右列高度自適應的方法。謝謝sypxue的提醒,已經修正。

27. 萬能清除浮動

萬能 float 閉合(非常實用!) 可以用這個解決多個div對齊時的間距不對,將以下代碼加入CSS 中,給需要閉合的div加上 class=”clearfix” 即可。代碼如下:

/* Clear Fix */
.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */

28.樣式居中的寫法

垂直居中:將 line-height 設置為 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內容不要換行.)

水平居中: margin: 0 auto;(當然不是萬能)

29.一些小總結

  • 若需給 a 標簽內內容加上 樣式, 需要設置 display: block;(常見于導航標簽)。
  • ul 標簽在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導航標簽和內容列表)。
  • 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應。
  • 關于手形光標. cursor: pointer. 而hand 只適用于 IE。

30. 兼容代碼:hack推薦樣式

/* FF */
.submitbutton { float:left; width: 40px; height: 57px; margin-top: 24px; margin-right: 12px;}

/* IE6 */
*html .submitbutton {
margin-top: 21px;
}

/* IE7 */
*+html .submitbutton {
margin-top: 21px;
}
------分隔線----------------------------
標簽(Tag):css技巧
------分隔線----------------------------
推薦內容
猜你感興趣
深蓝海域APP