31條css的語法規則

小編給大家分享一下31條css的語法規則，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

css規則是什么?

在這里整理了31條css的語法規則：

一、 善用css縮寫規則

/*注意上、右、下、左的書寫順序*/

1. 關于邊距（4邊）：

1px 2px 3px 4px (上、右、下、左)

1px 2px 3px （省略的左等于右）

1px 2px (省略的上等于下)

1px （四邊都相同）

2. 簡化所有：

*/ body{margin:0}------------表示網頁內所有元素的margin為0

#menu{ margin:0}------------表示menu盒子下的所有元素的margin為0

3. 縮寫（border）特定樣式：

Border:1px solid #ffffff;

Border-width:0 1px 2px 3px;

4. 關于文字的縮寫規則：

Font-style:italic; 斜體形式

Font-variant:small-caps/normal; 變體樣式：小型大寫字母/正常

Font-weight:bold;

Font-size:12px;

Line-height:1.2em(120%)/1.5em(150%);

Font-family:arrial,sans-serif,verdana;

縮寫成：

Font:italic small-caps bold 12px/1.5em arrial,sans-serif;

注意：Font-size和Line-height用斜杠組合在一起不能分開寫。

5. 關于背景圖片的：

Background:#FFF url(log.gif) no-repeat fixed top left;

6. 關于列表：

List-style-type:square/none;

List-style-position:inside;

List-style-image:url(filename.gif);

縮寫成：

List-style:none inside url(filename.gif)

二、 運用4種方法來引入CSS樣式

1.link

<link rel=”stylesheet” type=”text/css” href=”a.css”>

rel 關系

type 數據類型,有多種

href 路徑

部分瀏覽器支持候選樣式,關鍵字:alternate:

<link rel=”stylesheet” type=”text/css” href=”a.css”>

<link rel=”alternate stylesheet” type=”text/css” href=”b.css”>

<link rel=”alternate stylesheet” type=”text/css” href=”c.css”>

2.內部樣式塊

<style>

<!–

h2{color:red;}

–>

</style>

3.@import

@import url{a.css}

注意:此指令必須放在<style>容器中,并且在所有樣式之前

建議放在一個html注釋中,<!– –>瀏覽器會不顯示注釋內的內容,而import等css代碼能正常工作

4.內聯樣式

<p style=”color:red;”>

選擇器是css的一個基本概念，基本規則如下：

1.規則結構：

h2 {color:red;}

選擇器 {屬性:值;}

這類是元素選擇器，基本可以包括所有html的元素

屬性值可以包括多個元素，如：border：1px solid red;

常用語法

1)分組：

選擇器和聲明都可以分組:

h2,h3,h4{color:red;background:#fff;} ,選擇器用“,”分割開,屬性用”;”分割

2)類選擇器,即通過class=”stylename”應用的聲明

定義:

.stylename{color:red;}

注意:

在html中可以使用多類選擇:如class=”cn1 cn2 cn3″

3)ID選擇器,即與id屬性對應的樣式

定義:

#a{color:red;} ->這個定義對用id=”a”的元素

2.這部分都是我們常見的css語法，下面談一下我們不常見的選擇器語法

1)父子結構,跟文檔結構圖對應

如p span{border:1px solid red;}對應的是<p>下面的<li>標簽,這個很用用途,可以準確定位.

一些特殊應用(IE7支持):

(1) p > span{},匹配所有p下所有的span

(2) p + span{} ,匹配緊接著p元素后出現的第一個span標簽,2者要有相同的父標簽

2)屬性選擇器:(注意:屬性選擇器ie7才開始支持,以下版本并不支持,其他的瀏覽器基本可以)

語法:img[alt]{border:1px solid;}

表示對應有alt屬性的img標簽,當然可以支持多個屬性對應,如img[alt][title]{};表示這個2個屬性都有的img標簽,也可以與具體值對應:如:img[alt=”攝影”]{};

屬性選擇器中的高級應用,特殊匹配:

(1)img[class~=”b”], ~= : 與屬性中的一個值對應的,即與<img class=”a b c”>對應

(2)[class^=”a”],以a開頭的

(3)[class$=”a”],以a結束的

(4)[class*=”a”],包含a的

(5)[class|=”a”],等于a或以a開頭的

3)偽類和偽元素

日常使用中主要是<a>標簽的幾個偽類:link:hover:active:visited

以及:first-child:first:before:left:right:lang:focus:fist-line等等

注意:動態偽類可以應用到任何元素,如,input:focus{background:red;}當input標簽獲得焦點時背景變紅

以上語法組合使用,就能實現定位準確、簡單間接的樣式了。

三、 選擇器分類整合

優先級別遵循：行內樣式 >ID > Class >標記

基本選擇器 標記選擇器（eg:<p></p>）

類別選擇器(eg:class)

ID選擇器

復合選擇器 “交集”復合選擇器(eg:p.menu{color:red}) 必須是標記+類別/ID組合

“并集”復合選擇器(eg:h2,h3,h4{color:red})

“后代”復合選擇器(eg: #menu .menulist{ ... })

“子” 復合選擇器(eg: #menu .menulist .selectit { ... })

四、 使用子選擇器減少id和class的定義

示例結構：

<div id="menu">

<div class="menulist">

<div class="selectit">content</div>

</div>

</div>

示例CSS：

#menu { ... }

#menu .menulist { ... }

#menu .menulist .selectit { ... }

五、 使用組選擇器為不同元素應用相同的樣式

如h2,h3,h4,div{font-size:16px;font-weight:bold}

則h2,h3,h4,div元素的樣式都為字體16像素，字體粗體

六、 偽類和選擇符的配合使用

將偽類和類組合起來用，就可以在同一個頁面中做幾組不同的鏈接效果了，例如，我們定義一組鏈接為紅色，訪問后為藍色；另一組為綠色，訪問后為黃色：

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a.blue:link {color: #00FF00}

a.blue:visited {color: #FF00FF}

現在應用在不同的鏈接上：

<a class="red" href="...">這是第一組鏈接</a>

<a class="blue" href="...">這是第二組鏈接</a>

七、 CSS的最近優先原則

/*如果對一個元素定義了多次樣式，則以最近的一級優先，最近一級的樣式將覆蓋其他 行內樣式 >ID > Class >標記 */

以下是引用片段：

CSS:

p{color:red}

.blue{color:blue}

.yellow{color:yellow}

HTML:

<p>此處顯示為紅色</p>

<p class="blue">此處顯示為藍色</p>

<p class="blue" style="color:green">此處顯示為綠色</p>

<p class="blue yellow">此處顯示為黃色</p>

注意：

（1）注意樣式的幾個優先順序(優先級由上至下遞減，下面的樣式覆蓋上面的樣式)：

--元素style設定

--head區<style></style>中的設定

--外部引用css文件

（2）優先級不是按訪問順序來設定的，而是又css中的聲明順序來設的。

如上例中<p class="yellow blue">此處顯示為黃色</p>也顯示為黃色，因為在css定義中.yellow在.blue的后面。

八、 書寫正確的鏈接樣式

當用css定義鏈接的各種狀態時，要注意書寫的順序即：:link :visited :hover :active利用首字母：L V H A，你可以通過記憶LoVe,Hate,兩個單詞來記住其順序。

:link --------鏈接的顏色

:visited -----鼠標點擊后的顏色

:hover -------鼠標放上去未點的顏色（懸停）

:active-------鼠標點擊瞬間的顏色

九、 :hover的靈活運用

IE6不支持除a標簽以外的:hover屬性，我們了解:hover屬性是鼠標懸停效果。在IE7和FF中，對幾乎任意元素都可以設置:hover屬性效果。這對我們做不同的訪問效果很好。

如：

p {

width : 360px;

height : 80px;

padding : 20px;

margin : 50px auto 0 auto;

border : 1px solid #ccc;

line-height : 25px;

background : #fff;

}

p:hover {

border : 1px solid #000;

background : #ddd;

}

----------------此效果針對IE7和FF

p a {

color : #00f;

text-decoration : none;

font-size : 13px;

}

p a:hover {

color : #036;

text-decoration : underline;

}

-----------------此效果針對IE6

十、 定義A標簽要注意的小問題

當我們定義a{color:red;}時，它代表了A的四種狀態的樣式，如果此時要定義一個鼠標放上的狀態只要定義a:hover就可以了，其它三種狀態就是A中所定義的樣式。

只定義了一個a:link時，一定要記得把其它三種狀態定義出來！

十一、 禁止內容換行與強制內容換行

在表格或層中我們可能希望內容不換行或強制換行，我們可以通過一些css屬性來達到這些要求。

禁止換行：white-space:nowrap

強制換行：word-break: break-all; white-space: normal;

十二、 區別relative和absolute

Absolute---CSS中的寫法是：position:absolute; 他的意思是絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，默認依據父級的做標原始點為原始點。如果設定TRBL并且父級沒有設定position屬性，那么當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。

Relative---CSS中的寫法是：position:relative; 他的意思是絕對相對定位，他是參照父級的原始點為原始點，無父級則以BODY的原始點為原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位。

十三、 區別塊級元素block和內聯元素inline

塊級---可定義寬高，另起獨占一行 （如：div ul）

內聯---不可定義寬高，如文本元素 （如a span）

十四、 區別display和visibility

display:none和visibility:hidden都可以隱藏一個元素,但visibility:hidden只是隱藏了元素的內容，但其使用的位置空間仍然被保留。而display:none則相當把元素從頁面中去除，其占用位置也將被刪除。

十五、 背景background的一些語法

background-image:url(背景圖案.jpg,gif,bmp);

background-color:#FFFFFF; （背景顏色）

background-color : transparent; <--設定背景為透明色 –>

background-repeat 改變背景圖片的重復并排的設定

說明

repeat 背景圖片并排

repeat-x 背景圖片以X方向 并排

repeat-y 背景圖片以Y方向 并排

no-repeat 背景圖片不 以并排的方式處理

background-attachment是否固定圖片位置

說明

scroll 拉動卷軸時，背景圖片會跟著移動（缺省值）

fixed 拉動卷軸時，背景圖片不會跟著移動

以長度定位background-position: x y

使用百分比定位 background-position: x% y%

說明

x% 往右移

y% 往下移

backgroud-position: 0% 0%; 左邊上方

backgroud-position: 0% 50%; 左邊中間

backgroud-position: 50% 0%; 中間上方

backgroud-position: 50% 50%; 正中間

backgroud-position:100% 0%; 右邊上方

backgroud-position: 0% 100%; 左邊下方

backgroud-position: 100% 50%; 右邊中間

backgroud-position: 50% 100%; 中間下方

backgroud-position: 100% 100%; 右邊下方

以關鍵字定位

關鍵字 說明

top 上 ( y = 0 )

center 中 ( x = 50, y = 50 )

bottom 下 ( y = 100 )

left 左 ( x= 0 )

Exp:

background-position:center;

圖片在指定背景中央X=50% Y=50%位置

background-position: 200px 30px

十六、 注釋的寫法

在Html中：

<-- footer -->

content

<-- end footer -->

在CSS中：

/* ---------- header ----------------- */

style

十七、 CSS的命名規范

1. id的命名

(1)頁面結構

容器: container

頁頭：header

內容：content/container

頁面主體：main

頁尾：footer

導航：nav

側欄：sidebar

欄目：column

頁面外圍控制整體布局寬度：wrapper

左右中：left right center

(2)導航

導航：nav

主導航：mainnav

子導航：subnav

頂導航：topnav

邊導航：sidebar

左導航：leftsidebar

右導航：rightsidebar

菜單：menu

子菜單：submenu

標題: title

摘要: summary

(3)功能

標志：logo

廣告：banner

登陸：login

登錄條：loginbar

注冊：regsiter

搜索：search

功能區：shop

標題：title

加入：joinus

狀態：status

按鈕：btn

滾動：scroll

標簽頁：tab

文章列表：list

提示信息：msg

當前的: current

小技巧：tips

圖標: icon

注釋：note

指南：guild

服務：service

熱點：hot

新聞：news

下載：download

投票：vote

合作伙伴：partner

友情鏈接：link

版權：copyright

2. class的命名

(1)顏色:使用顏色的名稱或者16進制代碼,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字體大小,直接使用"font+字體大小"作為名稱,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)對齊樣式,使用對齊目標的英文名稱,如

.left { float:left; }

.bottom { float:bottom; }

(4)標題欄樣式,使用"類別+功能"的方式命名,如

.barnews { }

.barproduct { }

注意事項::

u 一律小寫;

u 盡量用英文;

u 不加中杠和下劃線;

u 2個組合的單詞不用中杠和下劃線可以將第二個單詞的首字母大寫（eg:mainContent）；

u 盡量不縮寫，除非一看就明白的單詞.

3. 主要的站點css文件

主要的 master.css

模塊 module.css

基本共用 base.css（root.css）

布局，版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補丁 mend.css

打印 print.css

十八、 Padding影響寬度問題

如果一組要嵌套的標簽之間需要些間距的話，那就留給位于里面的標簽的margin屬性吧，而不要去定義位于外面的標簽的padding

十九、 完美的單象素外框線表格

table{border-collapse:collapse;}

td{border:1px solid #000;}

二十、 如果文字過長,則將過長的部分變成省略號顯示

<style=”width:120px;height:50px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap”>

二十一、 并不是所有樣式都要簡寫

當樣式表前定義了如p{padding:1px 2px 3px 4px}時，在后續工程中又增加了一個樣式上補白5px，下補白6px。我們并不一定要寫成p.style1{padding:5px 6px 3px 4px}。可以寫成p.style1{padding-top:5px;padding-right:6px;},你可能會感覺這樣寫還不如原來那樣好，但你想沒想過，你的那種寫法重復定義了樣式，另外你可以不必去找原來的下補白與左補白的值是多少！如果以后前一個樣式P變了話，你定義的p.style1的樣式也要變。(此種方法對后期修改樣式很重要)

二十二、 幾個常用到的CSS細節處理上的樣式

1）中文字兩端對齊：text-align:justify;text-justify:inter-ideograph;

2）固定寬度漢字截斷：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不讓其換行，不過只能處理文字在一行上的截斷，不能處理多行。)（IE5以上）FF不能，它只隱藏。

***萬能強制換行：white-space:normal;word-break:break-all

禁止換行：white-space:nowrap

強制換行：word-wrap: break-word; word-break: normal;

.AutoNewline

{

/*word-break: break-all; 方法一 必須*/

/*word-wrap:break-word;overflow:hidden; 方法二 */

/*word-wrap:break-word; word-break: normal; 方法三 */

word-wrap:break-word; word-break:break-all;

}

.NoNewline

{

/*word-break: keep-all; 方法一 必須*/

white-space:nowrap;

}

3）固定寬度漢字（詞）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。

4）<acronym title=”輸入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠標放在前面的文字上看效果。這個效果在國外的很多網站都可以看到，而國內的少又少。

5）圖片設為半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5測試通過，FF未通過，這是因為這個樣式是IE私有的東西；

6）FLASH透明：選中swf,打開原代碼窗口，在</object>前輸入<param name=”wmode” value=”transparent”> 以上是針對IE的代碼。

針對FIREFOX 給<embed> 標簽也增加類似參數wmode=”transparent”

7）在做網頁時常用到把鼠標放在圖片上會出現圖片變亮的效果，可以用圖片替換的技巧，也可以用如下的濾鏡：

.pictures img {

filter: alpha(opacity=45); }

.pictures a:hover img {

filter: alpha(opacity=90); }

8）層在瀏覽器中居中對齊問題

body { text-align: center }

#content { text-align: left; width: 700px; margin: 0 auto }

9)單行內容在層中垂直對齊問題

# content{height:19px; line-height:19px; }缺點是要內容不要換行。

10）層在瀏覽器中垂直居中對齊問題

缺點是：水平、垂直方向上不能出現滾動條，只能是在一屏的情況下

其實解決的思路是這樣的：首們需要position:absolute;絕對定位。而層的定位，使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以2。

如：一個層寬度是400，高度是300。使用絕對定位距離上部與左部都設置成50%。而margin-top的值為－150。margin-left的值為－200。這樣我們就實現了層垂直居中于瀏覽器的樣式編寫。

請看實例代碼：

div {

position:absolute;

top:50%;

left:50%;

margin:-150px 0 0 -200px;

width:400px;

height:300px;

border:1px solid red;

}

11）CSS控制圖片自適應大小

div img {

max-width:600px;

width:600px;

width:expression(document.body.clientWidth>600?"600px":"auto");

overflow:hidden;

}

二十三、 使用float屬性的元素要注意的問題

1. 利用border屬性確定出錯元素的布局特性

使用float屬性布局一不小心就會出錯。這時為元素添加border屬性確定元素邊界，錯誤原因即水落石出。

2. float元素的父元素不能指定clear屬性

MacIE下如果對float的元素的父元素使用clear屬性，周圍的float元素布局就會混亂。這是MacIE的著名的bug，倘若不知道就會走彎路。

3. float元素務必指定width屬性

很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何，一定要為其指定width屬性。

另外指定元素時盡量使用em而不是px做單位。

4. float元素不能指定margin和padding等屬性

IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性(可以在float元素內部嵌套一個div來設置margin和padding)。也可以使用hack方法為IE指定特別的值。

5. float元素的寬度之和要小于100%

如果float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小于99%。

二十四、 瀏覽器的兼容性問題（針對FF/IE6/IE7）

1.CSS hack:區分IE6，IE7，firefox

區別FF，IE7，IE6：

background:green !important; background:orange; *background:blue;

IE6能識別*，但不能識別 !important,

IE7能識別*，也能識別!important;

FF不能識別*，但能識別!important;

另外再補充一個，下劃線”_“,

IE6支持下劃線，IE7和firefox均不支持下劃線。

于是大家還可以這樣來區分firefox，IE7，IE6

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

注：不管是什么方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最后面。

2.在firefox和IE中的BOX模型解釋不一致導致相差2px解決方法

div{margin:30px!important;margin:28px;}

注意這兩個margin的順序一定不能寫反，!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：div{maring:30px;margin:28px}重復定義的話按照最后一個來執行，所以不可以只寫margin:XXpx!important;

3.條件性注釋來選擇不同的瀏覽器（比CSS hack簡潔）

<!–[if IE 6]>

<link rel=”stylesheet” type=”text/css” href=”ie6.css” mce_href=”ie6.css”>

<![endif]–>

4.區分IE8

.color{

background-color: #CC00FF; /*所有瀏覽器都會顯示為紫色*/

background-color: #FF0000\9; /*IE6、IE7、IE8會顯示紅色*/

*background-color: #0066FF; /*IE6、IE7會變為藍色*/

_background-color: #009933; /*IE6會變為綠色*/

二十五、 W3C遵循的標準原則

1. 在排布表格之前，請大家一定要好好思考一個最佳的方案，表格的嵌套盡量控制在三層以內，并且應該盡量避免 <colspan> <rowspan> 兩個標記，經驗表明，這兩個標記會帶來許多麻煩。

2. 一個網頁要盡量避免用整個一張大表格，所有的內容都嵌套在這個大表格之內，因為瀏覽器在解釋頁面的元素時，是以表格為單位逐一顯示，如果一張網頁是嵌套在一個大表格之內，那么很可能造成的后果就是，當瀏覽者敲入網址，他要先面對一片空白很長時間，然后所有的網頁內容同時出現。如果必須這樣做，請使用 <tbody>標記，以便能夠使這個大表格分塊顯示。

3. 排版中我們經常會遇到需要進行首行縮進的處理，不要使用 或者全角空格來達到效果，規范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上 <p> 標記，注意，一般情況下，請不要省略 </p> 結束標記 。

4. 原則上，我們禁止用 <img width=? height=?> 來人為干預圖片顯示的尺寸，而且建議 <img> 標簽中不要帶上width 和height 兩個屬性，這是因為制作過程中，圖片往往需要反復的修改，這樣可以避免人為干預圖片顯示的尺寸，盡可能的發揮瀏覽器自身的功能；但是這樣的一個副作用是當網頁還未加載圖片時，不會留出圖片的站位大小，可能會造成網頁在加載過程中抖動（如果圖片是插在一個固定大小的表格里的，不會有這個現象），尤其是當圖片的尺寸較大時，這種現象會很明顯，所以當預料到這種會明顯導致網頁抖動的情況會發生時，請大家務必在最后給 <img>附上 width 和 height 屬性。

5. 為了最大程度的發揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用<br> 來人工干預分段。

6. 不同語種的文字之間應該有一個半角空格，但避頭的符號之前和避尾的符號之后除外漢字之間的標點要用全角標點，英文字母和數字周圍的括號應該使用半角括號。

7. 所有的字號都應該用樣式表來實現，禁止在頁面中出現 <font size=?> 標記。

8. 請不要在網頁中連續出現多于一個的也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現。

9. 中英文混排時，我們盡可能的將英文和數字定義為verdana 和arial 兩種字體。

10. 行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%.

11. 網站中的路徑全部采用相對路徑，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如我們不必這樣：<a href=”aboutus/index.htm”> 而應該這樣：<a href=”aboutus/”>

12. 嵌入圖形文本的使用較大的字體，建議不要在圖形中包括文本。

13.“網頁大小”定義為網頁的所有文件大小的總和，包括HTML文件和所有的嵌入的對象。用戶喜歡快的而不是新奇的站點。對于解調器用戶，網頁大小保持在34K以下為合適。

14. float元素務必指定width屬性

很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何，一定要為其指定width屬性。

另外指定元素時盡量使用em而不是px做單位。

15. float元素不能指定margin和padding等屬性

IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性（可以在float元素內部嵌套一個div來設置margin和padding）。也可以使用hack方法為IE指定特別的值。

16. float元素的寬度之和要小于100%

如果float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小于99%。

二十六、 列表元素ul ol li dl dt dd釋義

　<ul>

<li>內容1</li>

<li>內容2</li>

</ul>

<dl>

<dt>標題<dt>

<dd>內容描述1</dd>

<dd>內容描述2</dd>

</dl>

l dt 和dd中可以再加入 ol ul li和p

二十七、 清除浮動

clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}

在Firefox中，當子級都為浮動時，那么父級的高度就無法完全的包住整個子級，那么這時用這個清除浮動的HACK來對父級做一次定義，那么就可以解決這個問題 。

.clearfix {

display:inline-block;

}

/* Hides from IE-mac \*/

* html .clearfix {

height:1%;

}

.clearfix {

display:block;

}

/* End hide from IE-mac */

**這種用法在進行圖文混排時比較多，但是不太好控制，用margin配合clear{clear:both}直接來控制。

二十八、 文字的處理

1. 一般的字體：

font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, "宋體",sans-serif;

標題字體（h2/h3）：font-family: Cambria, Georgia, "Times New Roman", Times, serif;

2. 首字下沉：

P:first-letter{padding:10px,fontsize:32pt;float:left}

3. 拼音漢字：

<ruby>布魯斯狼<rt style="font-size: 11px;">bu lu si lang</rt></ruby>

二十九、 Min-height多瀏覽器兼容問題

Div{

min-height:450px;

height:auto!important;

height:450px;

overflow:visible;????

}

三十、 CSS布局口訣 - CSS BUG順口溜

· IE邊框若顯若無，須注意，定是高度設置已忘記；

· 浮動產生有緣故，若要父層包含住，緊跟浮動要清除，容器自然顯其中；

· 三像素文本慢移不必慌，高度設置幫你忙；

· 兼容各個瀏覽須注意，默認設置行高可能是殺手；

· 獨立清除浮動須銘記，行高設無，高設零，設計效果兼瀏覽；

· 學布局須思路，路隨布局原理自然直，輕松駕馭html，流水布局少hack，代碼清爽，兼容好，友好引擎喜歡迎。

· 所有標簽皆有源，只是默認各不同，span是無極，無極生兩儀—內聯和塊級，img較特殊，但也遵法理，其他只是改造各不同，一個*號全歸原，層疊樣式理須多練習，萬物皆規律。

· 圖片鏈接排版須小心，圖片鏈接文字鏈接若對齊，padding和vertical-align:middle要設定，雖差微細倒無妨。

· IE浮動雙邊距，請用display：inline拘。

· 列表橫向排版，列表代碼須緊靠，空隙自消須銘記。

三十一、 Web中的字體應用

總結幾套實用而簡單的font-family

font-family: Tahoma, Helvetica, Arial, sans-serif;

Tahoma 系的中性字體。推薦使用在13px以上的環境。

font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;

Verdana 系的寬扁字體。推薦在11px以下環境使用。

font-family: Geogia, Times New Roman, Times, serif;

襯線字體的不二之選。 多用于大號的標題字體16px以上。

font-family: Lucida Console, Monaco, Courier New, mono, monospace;

一系列等寬字體。寫代碼很好用。另外，如果覺得Lucida Console太寬的話，可以換成比較窄的Lucida Sans Typewriter。話說老趙blog上的代碼塊使用的就是Lucida Sans Typewriter 喲~

如果在div的style中把visibility設為hidden則div隱藏，但是它會占據空白空間，而如果設置成display：none則不占據空白空間；

而visible="false"則div不返回在html中；

以上是“31條css的語法規則”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！