CSS實用技巧01

01.div水平居中

div 水平居中很簡單，只需要設定div的寬頻以及讓左右margins設定成auto：

div#container

02.文字垂直居中

單行文字居中，只需要將行高和容器高度設定成一樣即可。比如下面的html**：

我是一行字

然後通過下面的樣式就可以居中：

div#container

如何你有很多行字，只要將行高設定成容器的高度的1/n就好。

03.div垂直居中【推】

比如有以下兩個div，如何讓包在中間的div垂直居中。

some things!

首先，將外層容器的定位為relative。

div#f

然後，將裡面的容器定位設定成absolute，再將它的左上角沿y軸下移50%，最後將它margin-top上移本身高度的50%即可。

div#s

使用同樣的思路，也可以做出水平居中的效果。

04.自適應寬頻的[推]

可以通過以下樣式實現只適用外層容器大小的:

img

/*ie 6 hack

05.3d按鈕

要想讓按鈕具有3d效果，可以將它的左上部邊框設為淺色，右下部邊框設為深色即可。

div#button

06.link 狀態的設定順序

a:link

a:visited

a:hover

a:active

簡單記憶法：love hate (lvha)

07.css的優先順序

基本規則是：行內樣式 > id樣式 > class樣式 > 標籤名樣式。

08.ie中min-height修正

由於ie6不支援min-height，我們可以通過以下這些方式修正：

方法一

*/.element

/*方法二

*/.element

09.突顯焦點元素

input:focus

10.!important

多條css語句衝突時，具有!important的語句將覆蓋其他語句。由於ie不支援!important，所以也可以利用它區分不同的瀏覽器。

ie 顯示藍色標題，其他瀏覽器顯示紅色標題

*/h1

11.css實現提示框

當滑鼠移動到鏈結上方，會自動出現乙個提示框:

linktooltips

a.tooltip

a.tooltip span

a:hover /*background-color is a must for ie6*/

a.tooltip:hover span

12. block和inline元素對比

所有的html元素都屬於block和inline之一。

block元素的特點是：

1. 總是在新行上開始；

2. 高度，行高以及頂和底邊距都可控制;

3. 寬度預設是它的容器的100%，除非設定乙個寬度;

, , , , 和是塊元素的例子。

inline元素的特點是：

1. 和其他元素都在一行上；

2. 高，行高及頂和底邊距不可改變；

3. 寬度就是它的文字或的寬度，不可改變。

, , , ,

,和是inline元素的例子。

用display: inline 或display: block命令就可以改變乙個元素的這一特性。什麼時候需要改變這一屬性呢？

1. 讓乙個inline元素從新行開始；

2.讓塊元素和其他元素保持在一行上；

3.控制inline元素的寬度（對導航條特別有用）；

4.控制inline元素的高度；

5.無須設定寬度即可為乙個塊元素設定與文字同寬的背景色。

CSS實用技巧

做豆瓣的時候模仿豆瓣的正在熱映的列表做的乙個樣式，效果及如下最主要的就是要在在父元素設定white space nowrap 來保證子元素強制不換行之前我們寫這樣的了能就是為子元素設定width 100 height 100 其實也可以使用如下的寫法 parent 也就是說子元素不設定高度和寬...

CSS實用技巧01

CSS實用技巧

CSS實用技巧

CSS實用技巧

相關推薦