CSS

標籤：onclick   asc   type   .property   script   元素   pre   使用   property   HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。改變

CSS Position 定位屬性　　本篇文章主要介紹元素的Position屬性，此屬性可以設定元素在頁面的定位方式。目錄1. 介紹 position：介紹position的值以及輔助屬性。2. position 定位方式：介紹position的四種定位方式：絕對、相對、固定、預設。3. 總結 position：以樣本的方式展示position。1. 介紹1.1 說明Position 屬性：規定元素的定位類型。即元素脫離文檔流的布局，在頁面的任意位置顯示。1.2 主要的值①absolute

常常使用position用於層的絕對位置，比如我們讓一個層位於一個層內具體什麼位置，為即可使用position:absolute和position:relative實現。一、position文法與結構 position文法： position : static absolute relative position參數：static : 　無特殊定位，對象遵循HTML定位規則absolute :

我們先來看看CSS3 中對position屬性的相關定義：static：無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不會被應用。 relative：對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中位移位置。而其層疊通過z-index屬性定義。 absolute：對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對位置。而其層疊通過z-index屬性定義。

目前幾乎所有主流的瀏覽器都支援position屬性（"inherit"除外，"inherit"不支援所有包括IE8和之前版本IE瀏覽器，IE9、IE10還沒測試過），以下是對position五個值的解釋：其中absolute和relative是最常用的，fixed用得也比較多（其中IE6並不支援fixed）。1、absolute（絕對位置）absolute是產生覺對定位的元素，脫離了文字資料流（即在文檔中已經不佔據位置），參照瀏覽器的左上方通過top,ri

position是CSS中非常重要的一個屬性，通過position屬性，我們可以讓元素相對於其正常位置，父元素或者瀏覽器視窗進行位移。postion也是初學者容易搞不清楚狀況的一個屬性，本文將從最基礎的知識講起，談談關於positon屬性的一些理論與應用。基礎知識postion屬性我們成為定位，它有4個不同類型的定位，這些類型會影響元素的產生方式，下面我們詳細說明position屬性。position四種類型（1）staticstatic是position屬性的預設值，預設情況下，區塊層級元素和

CSS中position屬性是設定元素的定位類型，它有absolute（絕對位置）、relative（相對定位）、static（靜態定位，預設值）、fixed（固定定位）四種參數。static：預設。位置設定為 static 的元素，它始終會處於頁面流給予的位置（static 元素會忽略任何 top、bottom、left 或 right 聲明）。relative：位置被設定為 relative 的元素，可將其移至相對於其正常位置的地方，因此 "left:20"

以前做網頁布局的時候，一個div只能設定一張背景圖片，設定多個背景的話，要用多個div嵌套才能實現，這樣相容性比較好。若您的網站要求相容瀏覽器低版本，建議用這種方法。css3的出現，解決了一個div只能設定一個背景的問題，使一個div可以設定多個背景圖片。background-image還可以設定線性漸層，等效果。關於css3的background，功能很強大，有很多屬性，像background-size等等，這些屬性都可以寫一篇部落格來講述。關於css3background的其他屬性，後面會出

layer-background-image文法： layer-background-image : none | url (url)參數： none : 　無背景圖url : 　使用絕對或相對位址指定背景映像 說明： 設定或檢索對象整個地區的背景映像。 樣本： code { position: absolute; top: 100px; left: 300px; width: 200px; border: thin solid black; background-image:

請教下background-position: left -29px; 這是啥意思呢？？一看我感覺是往左移-29個像素，但我測試了下又不是。請教高手是用來定位元影像片的位置的。最主要使用在 一張png 上有多個logo 或者 ico 這個時候就用到background-position了background-position：x y x等於平行軸 y等於豎行軸。x

background-image是背景圖片，是css的一個樣式 < img / >是一個區塊層級元素，它是一個圖片，是html的一個標籤 background-image是只能看的 < img / >是可以操作的。比如更換img src的路徑可以達到更換圖片的目的，也可以移動它的位置，從document中移除等等操作 background是CSS3的樣式 img 是HTML的標籤，兩者之間存在本質的區別

對於圖片，首先我們先想到是背景圖片。因為我們許許多的裝飾都是用背景圖片來實現的。既然這樣，那麼就從CSS控制背景圖片講起吧。定義和用法background-image 屬性為元素設定背景映像。元素的背景佔據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距。預設地，背景映像位於元素的左上方，並在水平和垂直方向上重複。1.CSS控制背景圖片：

background-attachment -- 定義背景圖片隨捲軸的移動方式取值: scroll | fixed | inheritscroll: 隨著頁面的捲軸背景圖片將移動fixed: 隨著頁面的捲軸背景圖片不會移動inherit: 繼承初始值: scroll繼承性: 否適用於: 所有元素background:背景.attachment:附著.樣本body

背景(background)是css中重要的的部分，也是需要知道的css的基礎知識之一。這篇文章將會涉及css背景(background)的基本用法，包括諸如 background-attachment 等的屬性，也會介紹有關背景(background)的常用技巧，以及 css3 中的 背景(background)(包含4個新的背景(background)屬性)。背景色可以使用 background-color 屬性為元素設定背景色。這個屬性接受任何合法的顏色值。這條規則把元素的背景設定為灰色：

文法： layout-grid : layout-grid-mode || layout-grid-type || layout-grid-line || layout-grid-char || layout-grid-char-spacing參數： 該屬性是複合屬性。請參閱各參數對應的屬性。 說明： 設定或檢索複合文檔中指定文本字元版式的網格特性。以東亞語言（如中文，日文）編寫的文檔通常根據一維或二維網格使用字元的頁面版式。

文法： ime-mode : auto | active | inactive | disabled參數： auto : 不影響IME的狀態。與不指定ime-mode屬性時相同 active : 指定所有使用IME輸入的字元。即啟用本地語言IME。使用者仍可以撤銷啟用IME inactive : 指定所有不使用IME輸入的字元。即啟用非本地語言。使用者仍可以撤銷啟用IME disabled : 完全禁用IME。對於有焦點的控制項（如輸入框），使用者不可以啟用IME 說明：

文法： ruby-position : above | inline參數： above : 　在基本文本上方定位ruby文本 inline : 　ruby文本與基本文本內聯 說明： 設定或檢索通過rt對象指定的注釋文本或發音指南（參考ruby對象）的位置。ruby對象及rt對象請參閱我的其他著作。 對應的指令碼特性為rubyPosition。請參閱我編寫的其他書目。 樣本： ruby { ruby-position: above; }ruby-position

文法： ruby-align : auto | left | center | right | distribute-letter | distribute-space | line-edge參數： auto : 　由瀏覽器確定對齊。對於ideographic（東亞文本）以distribute-space值對齊。對於Latin文本以center值對齊 left : 　根據基本寬度靠左對齊 center :

文法： text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph參數： auto : 　允許瀏覽器使用者代理程式確定使用的左右對齊法則 inter-word : 　通過增加字之間的空格對齊文本。該行為是對齊所有文本行最快的方法。它的左右對齊行為對段落的最後一行無效 newspaper :

這是一個簡單的代碼就是讓長單詞在外框不夠大的時候可以換行顯示。它在很多英文的網頁編輯中還是非常管用的。文法： word-wrap : normal | break-word參數： normal : 　允許內容頂開指定的容器邊界 break-word : 　內容將在邊界內換行。如果需要，詞內換行（word-break）也行發生 說明： 設定或檢索噹噹前行超過指定容器的邊界時是否斷開轉行。 對應的指令碼特性為wordWrap。請參閱我編寫的其他書目。 樣本： div { word-wrap: