css(層疊樣式表)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。

使用css縮寫好處

使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀。

明確定義單位，除非值為0，以及px和em區別。

忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以只寫width="100"，但是在CSS中，你必須給一 個準確的單位，比如：width:100px width:100em。只有兩個例外情況可以不定義單位：行高和0值。除此以 外，其他值都必須緊跟單位，注意，不要在數值和單位之間加空格。px單位適合固定布局如960Grid。 em適合流體布局。

使用 line-height 垂直居中，以及line-height和height區別 實驗展示

line-height:24px;使用固定寬度的容器并且需要一行垂直居中時，使用 line-height 即可(高度與父層容器一致。

語法：line-height : normal | length

參數：

normal : 默認行高

length : 百分比數字 | 由浮點數字和單位標識符組成的長度值，允許為負值。其百分比取值是基于字體的高度尺寸。請參閱長度單位

說明：

檢索或設置對象的行高。即字體最底端與字體內部頂端之間的距離。 如行內包含多個對象，則應用最大行高。此時行高不可為負值。

使用 line-height 垂直居中

使用 line-height 垂直居中

使用 line-height 垂直居中

使用 line-height 垂直居中

清除容器浮動，以及overflow:hidden; clear:both的關聯

#main {overflow:hidden; },clear:both;clear:left;clear:right; overflow對于清除如Body。類似整體容器可以選擇使用它。而clear清除div以及它更靈活。可以根據實際選擇使用。也是非常常用的兩個屬性。

語法： clear : none | left |right | both

參數：

none : 允許兩邊都可以有浮動對象

both : 不允許有浮動對象

left : 不允許左邊有浮動對象

right : 不允許右邊有浮動對象 說明： 該屬性的值指出了不允許有浮動對象的邊。

div { clear : left } img { float: right }

語法： overflow : visible | auto | hidden | scroll

參數：

visible : 不剪切內容也不添加滾動條。假如顯式聲明此默認值，對象將被剪切為包含對象的window或frame的大小。并且">clip屬性設置將失效

auto : 此為body對象和textarea的默認值。在需要時剪切內容并添加滾動條

hidden : 不顯示超過對象尺寸的內容

scroll : 總是顯示滾動條

說明：

檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。 設置textarea對象為hidden值將隱藏其滾動條。 對于table來說，假如table-layout屬性設置為fixed，則td對象支持帶有默認值為hidden的overflow屬性。如果設為hidden，scroll或者auto，那么超出td尺寸的內容將被剪切。如果設為visible，將導致額外的文本溢出到右邊或左邊(視direction屬性設置而定)的單元格。 自IE5開始，此屬性在MAC平臺上可用。

不讓鏈接折行

a { white-space:nowrap; } p { white-space: nowrap; } 上面的設定就能避免鏈接折行。

語法： white-space : normal | pre | nowrap

參數：

normal : 默認處理方式

pre : 用等寬字體顯示預先格式化的文本。不合并字間的空白距離和進行兩端對齊。參閱pre對象

nowrap : 強制在同一行內顯示所有文本，直到文本結束或者遭遇br對象。參閱td，div等對象的nowrap屬性(特性)

說明： 設置或檢索對象內空格的處理方式。

始終讓 Firefox 顯示滾動條

1 html {overflow:-moz-scrollbars-vertical; }

2 body, html {min-height:101%; } 大于100%必然會出現滾動條。

使塊元素水平居中

margin:0 auto;其實就是 margin-left: auto; margin-right: auto;(上右下左)，記住一個規則。順時針轉。

body{text-align: center; }

然后定義內層容器 text-align: left;

隱藏 Exploer textarea 的滾動條

textarea { overflow:auto; }

Exploer 默認情況下 textarea 會有垂直滾動條(不要問我為什么)。

設置打印分頁(實驗未成功未看到效果可以交流下)

h2 {page-break-before:always; } page-break-before 屬性能設置打印網頁時的分頁。

語法：page-break-before : auto | always | avoid | left | right | null

參數：

auto : 假如需要在對象之前插入頁分割符

always : 始終在對象之前插入頁分割符

avoid : 避免在對象前面插入頁分割符

left : 在對象前面插入頁分割符直到它到達一個空白的左頁邊

right : 在對象前面插入頁分割符直到它到達一個空白的右頁邊 null : 空值。IE5用來取消頁分割符設置

說明：

檢索或設置對象前出現的頁分割符。 IE5僅支持always值和空白值(null)。 在IE4中此屬性不作用于br對象，但是IE5作用。

刪除鏈接上的虛線框

a:active, a:focus {outline:none; }

Firefox 默認會在鏈接獲得焦點(或者點擊時)加上條虛線框，使用上面的屬性可以刪除。

最簡單的 CSS 重置

* {margin: 0; padding: 0 } 如果想“復雜詳細”，參考YUI 的做法(還有這里)。

http://developer.yahoo.com/yui/2/

/*CSS reset 示例*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0;}

table{border-collapse:collapse; border-spacing:0;}

fieldset,img{border:0}

address,caption,cite,code,dfn,em,strong,th,var{ font-style:normal;font-weight:normal;}

ol,ul{list-style:none}

caption,th{text-align:left}

h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal}

q:before,q:after{ content:''}

abbr,acronym{border:0}

CSS盒模型以及IE和Firefox盒模型的區別

CSS盒子模型-什么是CSS盒子模型。

認識日常生活中盒子：

常常我們遇到盒子是用于可裝東西長方形、正方形的盒子。如裝皮鞋盒子、裝電視機盒子，這個是比較具體的盒子。

CSS盒子：

根據字面我們可以理解，CSS盒子也是裝東西的，比如我們要將文字內容、圖片布局網頁中，那就需要像盒子一樣裝著。這個時候我們對其對象設置高度(height)、寬度(width)、邊框(border)、邊距(margin)、填充(padding),即可實現像盒子一樣的長方形、正方形平面盒子。

通常我們這樣：

一組

等類似這種語法標簽組叫1個盒子。因為我們對其設置了高度(height)、寬度(width)、邊框(border)、邊距(margin)、填充(padding)等屬性后即可呈現出盒子一樣的長方形或正方形。所以我們CSS盒子模型因此而得來。

日常使用CSS盒子：

我們說將什么內容放入一個盒子里，我們就要想到是放入

假如我們說設置一個寬度為100px盒子，我們就要知道如下一個概念：

Css樣式代碼：.yangshi{width:100px;}

對應html代碼：

內容

這個時候我們可以將

內容看作為一個盒子。

CSS簡化了網頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數量(因為重復設置的格式將被只保存一次)。只要修改保存著網站格式的CSs樣式表文件就町以改變整個站點的風格特色，在修改頁面數量龐大的站點時，顯得格外有用。這就避免了一個個網頁的修改，大大減少了工作量。以上就是CSS開發常用的技巧總結，希望在開發上能幫助到大家。

相關推薦：

總結

以上是生活随笔為你收集整理的php css布局技巧,最全的CSS开发常用技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。