CSS樣式表代碼布局基礎(chǔ)教程

CSS樣式表代碼布局基礎(chǔ)教程

10余年的墨玉網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營銷型網(wǎng)站的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整墨玉建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“墨玉網(wǎng)站設(shè)計(jì)”,“墨玉網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

CSS樣式表代碼布局基礎(chǔ)教程—課程10：外部樣式表(一)

十、外部樣式表

外部樣式表是把各種樣式單獨(dú)存在一個(gè)文件里，供其他多個(gè)網(wǎng)頁調(diào)用，下面我們來看一個(gè)練習(xí)；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點(diǎn)菜單“文件－保存”命令，以“l(fā)x10.html”為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；

3）按照基礎(chǔ)02課的方法，輸入、和的內(nèi)容；

2、外部樣式表

1）點(diǎn)菜單“文件－新建”，新建一個(gè)空白文檔，保存文件名為 style.css ，位置跟 lx10 放一起，這是一個(gè)單獨(dú)的文件；

2）在里面輸入下面的內(nèi)容；

/* by TeliuTe */

body {

background-color: #ccffff;

font-size:1.2em;

span {

color:#800000;

.myblue {

color:blue;

3）第一行 /* ... */ 是注釋，注明作者版權(quán)用途等，根據(jù)自己的需要，

下面的內(nèi)容跟內(nèi)部樣式表相同，各個(gè)標(biāo)簽和它的樣式，保存一下文件；

4）回到 lx10.html 文檔中，在 head 區(qū)內(nèi)加上下面一行外部引用標(biāo)識；

5）然后在 body 區(qū)內(nèi)，輸入下面的內(nèi)容；

1）點(diǎn)菜單“文件－新建”，新建一個(gè)空白文檔，保存文件名為 style.css ，位置跟 lx10 放一起，這是一個(gè)單獨(dú)的文件；

6）保存一下文件，回到自己文件夾中，打開 lx10 網(wǎng)頁，看一下效果；

7）在多個(gè)網(wǎng)頁具有相同樣式時(shí)，使用外部樣式表可以節(jié)省空間和減小網(wǎng)頁大小；

本節(jié)學(xué)習(xí)了外部樣式表的使用方法，你成功地完成了本教程，歡迎繼續(xù)學(xué)習(xí)本站的其他課程！

本教程由86團(tuán)學(xué)校TeliuTe制作

（計(jì)算機(jī)基礎(chǔ)知識，電腦知識入門學(xué)習(xí)，請到http://電腦知識網(wǎng)）

CSS標(biāo)簽大全(一)

字體屬性：(font)

大小 font-size: x-large;(特大) xx-small;(極小) 一般中文用不到，只要用數(shù)值就可以，單位：PX、PD

樣式 font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)

行高 line-height: normal;(正常) 單位：PX、PD、EM

粗細(xì) font-weight: bold;(粗體) lighter;(細(xì)體) normal;(正常)

變體 font-variant: small-caps;(小型大寫字母) normal;(正常)

大小寫 text-transform: capitalize;(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)

修飾 text-decoration: underline;(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)

常用字體：(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景屬性：(background)

色彩background-color: #FFFFFF;

圖片background-image: url();

重復(fù)background-repeat: no-repeat;

滾動background-attachment: fixed;(固定) scroll;(滾動)

位置background-position: left(水平) top(垂直);

簡寫方法 background:#000 url(..) repeat fixe輔助圖片一律用背景處理d left top;

區(qū)塊屬性： (Block)

字間距l(xiāng)etter-spacing: normal; 數(shù)值

對劉text-align: justify;(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)

縮進(jìn)text-indent: 數(shù)值px;

垂直對齊vertical-align: baseline;(基線) sub;(下標(biāo)) super;(下標(biāo)) top; text-top; middle; bottom; text-bottom;

詞間距word-spacing: normal; 數(shù)值

空格white-space: pre;(保留) nowrap;(不換行)

顯示display:block;(塊) inline;(內(nèi)嵌) list-item;(列表項(xiàng)) run-in;(追加部分) compact;(緊湊) marker;(標(biāo)記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標(biāo)題)

方框?qū)傩裕?Box)

width:; height:; float:; clear:both; margin:; padding:; 順序：上右下左

邊框?qū)傩裕?(Border)

border-style: dotted(點(diǎn)線); dashed(虛線); solid(實(shí)線); double(雙線); groove(槽線); ridge;(脊?fàn)? inset;(凹陷) outset;

border-wid

th:; 邊框?qū)挾?/p>

border-color:#;

簡寫方法border：width style color;

列表屬性： (List-style)

類型list-style-type: disc;(圓點(diǎn)) circle;(圓圈) square;(方塊) decimal;(數(shù)字) lower-roman;(小羅碼數(shù)字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;(外) inside;

圖像list-style-image: url(..);

定位屬性： (Position)

Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切) css屬性代碼大全

一 CSS文字屬性：

color : #999999; /*文字顏色*/

font-family : 宋體,sans-serif; /*文字字體*/

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜體*/

font-variant:small-caps; /*小字體*/

letter-spacing : 1pt; /*字間距離*/

line-height : 200%; /*設(shè)置行高*/

font-weight:bold; /*文字粗體*/

vertical-align:sub; /*下標(biāo)字*/

vertical-align:super; /*上標(biāo)字*/

text-decoration:line-through; /*加刪除線*/

text-decoration: overline; /*加頂線*/

text-decoration:underline; /*加下劃線*/

text-decoration:none; /*刪除鏈接下劃線*/

text-transform : capitalize; /*首字大寫*/

text-transform : uppercase; /*英文大寫*/

text-transform : lowercase; /*英文小寫*/

text-align:right; /*文字右對齊*/

text-align:left; /*文字左對齊*/

text-align:center; /*文字居中對齊*/

text-align:justify; /*文字分散對齊*/

vertical-align屬性

vertical-align:top; /*垂直向上對齊*/

vertical-align:bottom; /*垂直向下對齊*/

vertical-align:middle; /*垂直居中對齊*/

vertical-align:text-top; /*文字垂直向上對齊*/

vertical-align:text-bottom; /*文字垂直向下對齊*/

二、CSS邊框空白

padding-top:10px; /*上邊框留空白*/

padding-right:10px; /*右邊框留空白*/

padding-bottom:10px; /*下邊框留空白*/

padding-left:10px; /*左邊框留空白*/

三、CSS符號屬性：

list-style-type:none; /*不編號*/

list-st

yle-type:decimal; /*阿拉伯?dāng)?shù)字*/

list-style-type:lower-roman; /*小寫羅馬數(shù)字*/

list-style-type:upper-roman; /*大寫羅馬數(shù)字*/

list-style-type:lower-alpha; /*小寫英文字母*/

list-style-type:upper-alpha; /*大寫英文字母*/

list-style-type:disc; /*實(shí)心圓形符號*/

list-style-type:circle; /*空心圓形符號*/

list-style-type:square; /*實(shí)心方形符號*/

list-style-image:url(/dot.gif); /*圖片式符號*/

list-style-position: outside; /*凸排*/

list-style-position:inside; /*縮進(jìn)*/

四、CSS背景樣式：

background-color:#F5E2EC; /*背景顏色*/

background:transparent; /*透視背景*/

background-image : url(/image/bg.gif); /*背景圖片*/

background-attachment : fixed; /*浮水印固定背景*/

background-repeat : repeat; /*重復(fù)排列-網(wǎng)頁默認(rèn)*/

background-repeat : no-repeat; /*不重復(fù)排列*/

background-repeat : repeat-x; /*在x軸重復(fù)排列*/

background-repeat : repeat-y; /*在y軸重復(fù)排列*/

指定背景位置

background-position : 90% 90%; /*背景圖片x與y軸的位置*/

background-position : top; /*向上對齊*/

background-position : buttom; /*向下對齊*/

background-position : left; /*向左對齊*/

background-position : right; /*向右對齊*/

background-position : center; /*居中對齊*/

五、CSS連接屬性：

a /*所有超鏈接*/

a:link /*超鏈接文字格式*/

a:visited /*瀏覽過的鏈接文字格式*/

a:active /*按下鏈接的格式*/

a:hover /*鼠標(biāo)轉(zhuǎn)到鏈接*/

鼠標(biāo)光標(biāo)樣式：

鏈接手指 CURSOR: hand

十字體 cursor:crosshair

箭頭朝下 cursor:s-resize

十字箭頭 cursor:move

箭頭朝右 cursor:move

加一問號 cursor:help

箭頭朝左 cursor:w-resize

箭頭朝上 cursor:n-resize

箭頭朝右上 cursor:ne-resize

箭頭朝左上 cursor:nw-resize

文字I型 cursor:text

箭頭斜右下 cursor:se-resize

箭頭斜左下 cursor:sw-resize

漏斗 cursor:wait

光標(biāo)圖案(IE6) p {cursor:url("光標(biāo)文件名.cur"),text;}

六、CSS框線一覽表：

border-top : 1px solid #6699cc; /*上框線*/

border-bottom : 1px solid #6699cc;

/*下框線*/

border-left : 1px solid #6699cc; /*左框線*/

border-right : 1px solid #6699cc; /*右框線*/

以上是建議書寫方式,但也可以使用常規(guī)的方式 如下:

border-top-color : #369 /*設(shè)置上框線top顏色*/

border-top-width :1px /*設(shè)置上框線top寬度*/

border-top-style : solid/*設(shè)置上框線top樣式*/

其他框線樣式

solid /*實(shí)線框*/

dotted /*虛線框*/

double /*雙線框*/

groove /*立體內(nèi)凸框*/

ridge /*立體浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、CSS表單運(yùn)用：

文字方塊

按鈕

復(fù)選框

選擇鈕

多行文字方塊

下拉式菜單 選項(xiàng)1選項(xiàng)2

八、CSS邊界樣式：

margin-top:10px; /*上邊界*/

margin-right:10px; /*右邊界值*/

margin-bottom:10px; /*下邊界值*/

margin-left:10px; /*左邊界值*/

CSS 屬性： 字體樣式(Font Style)

序號 中文說明 標(biāo)記語法

1 字體樣式 {font:font-style font-variant font-weight font-size font-family}

2 字體類型 {font-family:"字體1","字體2","字體3",...}

3 字體大小 {font-size:數(shù)值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

4 字體風(fēng)格 {font-style:inherit|italic|normal|oblique}

5 字體粗細(xì) {font-weight:100-900|bold|bolder|lighter|normal;}

6 字體顏色 {color:數(shù)值;}

7 陰影顏色 {text-shadow:16位色值}

8 字體行高 {line-height:數(shù)值|inherit|normal;}

9 字 間 距 {letter-spacing:數(shù)值|inherit|normal}

10 單詞間距 {word-spacing:數(shù)值|inherit|normal}

11 字體變形 {font-variant:inherit|normal|small-cps }

12 英文轉(zhuǎn)換 {text-transform:inherit|none|capitalize|uppercase|lowercase}

13 字體變形 {font-size-adjust:inherit|none}

14 字體 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

文本樣式(Text Style)

序號 中文說明 標(biāo)記語法

1

行 間 距 {line-height:數(shù)值|inherit|normal;}

2 文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink}

3 段首空格 {text-indent:數(shù)值|inherit}

4 水平對齊 {text-align:left|right|center|justify}

5 垂直對齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

6 書寫方式 {writing-mode:lr-tb|tb-rl}

背景樣式

序號 中文說明 標(biāo)記語法

1 背景顏色 {background-color:數(shù)值}

2 背景圖片 {background-image: url(URL)|none}

3 背景重復(fù) {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

4 背景固定 {background-attachment:fixed|scroll}

5 背景定位 {background-position:數(shù)值|top|bottom|left|right|center}

6 背影樣式 {background:背景顏色|背景圖象|背景重復(fù)|背景附件|背景位置}

框架樣式(Box Style)

序號 中文說明 標(biāo)記語法

1 邊界留白 {margin:margin-top margin-right margin-bottom margin-left}

2 補(bǔ) 白 {padding:padding-top padding-right padding-bottom padding-left}

3 邊框?qū)挾?{border-width:border-top-width border-right-width border-bottom-width border-left-width}

寬度值： thin|medium|thick|數(shù)值

4 邊框顏色 {border-color:數(shù)值 數(shù)值 數(shù)值 數(shù)值} 數(shù)值：分別代表top、right、bottom、left顏色值

5 邊框風(fēng)格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

6 邊 框 {border:border-width border-style color}

上 邊 框 {border-top:border-top-width border-style color}

右 邊 框 {border-right:border-right-width border-style color}

下 邊 框 {border-bottom:border-bottom-width border-style color}

左 邊 框 {border-left:border-left-width border-style color}

7 寬 度 {width:長度|百分比| auto}

8 高 度 {height:數(shù)值|auto}

9 漂 浮 {float:left|right|none}

10 清 除 {clear:none|left|right|both}

分類列表

序號 中文說明 標(biāo)記語法

1 控制顯示 {display:none

|block|inline|list-item}

2 控制空白 {white-space:normal|pre|nowarp}

3 符號列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}

4 圖形列表 {list-style-image:URL}

5 位置列表 {list-style-position:inside|outside}

6 目錄列表 {list-style:目錄樣式類型|目錄樣式位置|url}

7 鼠標(biāo)形狀 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

word-wrap是控制換行的。使用break-word時(shí)，是將強(qiáng)制換行。中文沒有任何問題，英文語句也沒問題。但是對于長串的英文，就不起作用。break-word是控制是否斷詞的。normal是默認(rèn)情況，英文單詞不被拆開。break-all，是斷開單詞。在單詞到邊界時(shí)，下個(gè)字母自動到下一行。主要解決了長串英文的問題。keep-all，是指Chinese, Japanese, and Korean不斷詞。即只用此時(shí)，不用word-wrap，中文就不會換行了。（英文語句正常。）ie下：使用word-wrap:break- word;所有的都正常。ff下：如這2個(gè)都不用的話，中文不會出任何問題。英文語句也不會出問題。但是，長串英文會出問題。為了解決長串英文，一般用 word-wrap:break-word;word-break:break-all;。但是，此方式會導(dǎo)致，普通的英文語句中的單詞會被斷開（ie下也是）。目前主要的問題存在于 長串英文 和 英文單詞被斷開。其實(shí)長串英文就是一個(gè)比較長的單詞而已。即英文單詞應(yīng)不應(yīng)該被斷開那？那問題很明顯了，顯然不應(yīng)該被斷開了。對于長串英文，就是惡意的東西，自然不用去管了。但是，也要想些辦法，不讓它把容器撐大。用：overflow:auto; ie下，長串會自動折行。ff下，長串會被遮蓋。所以，綜上，最好的方式是word-wrap:break-word; overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。

CSS樣式表代碼布局基礎(chǔ)教程—課程9：鏈接樣式

九、鏈接樣式

使用偽類可以設(shè)置鏈接的樣式，比如改變顏色、去掉下劃線等，下面我們來看一個(gè)練習(xí)；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點(diǎn)菜單“文件－打開”命令，打開自己文件夾里的lx7.html

3）再點(diǎn)菜單“文件－另存為”命令，保存文件名為 “l(fā)x9.html”

2、設(shè)置偽類

1）在 head 區(qū)內(nèi)，輸入內(nèi)部樣式表，設(shè)定各個(gè) 的錨標(biāo)記樣式，如下；

2）第一個(gè) a 設(shè)定全局錨點(diǎn)的樣式，用塊顯示、寬度是50像素、背景色是淺綠色，接下來是錨點(diǎn) a 的成員：

link 是鏈接，設(shè)定頁面中的鏈接樣式，顏色藍(lán)色，不帶下劃線，

visted 是訪問過的鏈接，設(shè)定樣式為栗色、不帶下劃線，

active 是按下鼠標(biāo)時(shí)的鏈接，設(shè)定顏色為綠色、無下劃線，

hover 是鼠標(biāo)移過來懸停，設(shè)定顏色為紅色、有下劃線，背景色改成黃色，hover 放在其他幾個(gè)成員的后面；

3）保存一下文件，回到自己的文件夾中，打開 lx9 網(wǎng)頁，試著用鼠標(biāo)點(diǎn)擊、拖動鏈接，看一下效果；

本節(jié)學(xué)習(xí)了設(shè)置鏈接樣式的基本方法，如果你成功地完成了練習(xí)，請繼續(xù)學(xué)習(xí)下一課內(nèi)容；

CSS樣式表代碼布局基礎(chǔ)教程—課程8：內(nèi)部樣式表(一)

八、內(nèi)部樣式表

內(nèi)部樣式表放在網(wǎng)頁的...區(qū)內(nèi)，集中在一起方便管理，下面我們來看一個(gè)練習(xí)；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點(diǎn)菜單“文件－保存”命令，以“l(fā)x8.html”為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；

3）按照基礎(chǔ)02課的方法，輸入、和的內(nèi)容；

2、內(nèi)部樣式表

1）對系統(tǒng)標(biāo)簽使用樣式，這會影響所有的這種標(biāo)簽，在 head 區(qū)輸入下面的代碼；

2）第一行是樣式表開始，最后是樣式表結(jié)束， 是注釋標(biāo)簽，

首先是對 body 標(biāo)簽設(shè)置樣式，這樣凡是在 body 區(qū)里的內(nèi)容，都會使用這個(gè)樣式，設(shè)置背景色和文字大小

然后對 span 標(biāo)簽設(shè)置樣式，設(shè)置內(nèi)容的顏色，以后凡是用到 span 的地方，都使用這個(gè)顏色；

3）接著在 body 區(qū)里輸入下面的內(nèi)容；

1）對系統(tǒng)標(biāo)簽使用樣式，這會影響所有的這種標(biāo)簽，在 head 區(qū)輸入下面的代碼；

4）保存一下文件，回到自己的文件夾里，打開 lx8 網(wǎng)頁，看一下效果；

5）自定義樣式選擇符，除了系統(tǒng)的標(biāo)簽外，也可以自己定義需要的樣式標(biāo)記，在 head 的.樣式表里加入下面的代碼；

.myblue {

color:blue;

前面的點(diǎn)，表示這是一個(gè)通用的樣式，可以重復(fù)使用，如果是 #號，表示是一個(gè)標(biāo)識符，是專用唯一的 id，myblue 是自定義的樣式名稱；

6）在 body 區(qū)里加入下面的代碼，加在上一行的前面，再加上

標(biāo)簽分成兩段；

7）這兒使用的是 span，里面的 class 套用的是 myblue 樣式，替換了前面設(shè)的樣式，

保存一下文件，到瀏覽器中看看效果；

本節(jié)學(xué)習(xí)了使用內(nèi)部樣式表的基本方法，如果你成功地完成了練習(xí)，請繼續(xù)學(xué)習(xí)下一課內(nèi)容；

CSS樣式表代碼布局基礎(chǔ)教程—課程7：ul列表(一)

七、ul 列表

對于排列有序的條目，可以使用列表來實(shí)現(xiàn)，下面我們來看一個(gè)練習(xí)；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點(diǎn)菜單“文件－保存”命令，以“l(fā)x8.html”為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；

3）按照基礎(chǔ)02課的方法，輸入、和的內(nèi)容；

2、使用列表（計(jì)算機(jī)基礎(chǔ)知識，電腦知識入門學(xué)習(xí)，請到http://電腦知識網(wǎng)）

1）在后面接著輸入下面的代碼；

第一課

第二課

第三課

2）前面的

建立一個(gè)列表，里面的各個(gè)

是列表項(xiàng)，各個(gè)列表項(xiàng)排列對齊縮進(jìn)，前面有一個(gè)圓點(diǎn)列表符號，

保存一下文件，到自己文件夾里，打開 lx7 網(wǎng)頁，看看列表的效果，這兒加了 超級鏈接；

3）如果要去掉前面的圓點(diǎn)，可以在 ul 的樣式里設(shè)定，前面的縮進(jìn)也可以設(shè)定內(nèi)邊距為 0，輸入下面的代碼；

第一課

第二課

第三課

4）保存一下，再到瀏覽器里看一下，三個(gè)列表都排到了左邊對齊；

5）如果要排列成橫向水平的菜單樣式，可以在每個(gè)列表項(xiàng)里加上 float 屬性，防止重疊再設(shè)定一個(gè)寬度，代碼如下；

6）保存一下，再到瀏覽器里看一下，三個(gè)列表項(xiàng)都水平排列了；

本節(jié)學(xué)習(xí)了列表的基本使用方法，如果你成功地完成了練習(xí)，請繼續(xù)學(xué)習(xí)下一課內(nèi)容；

CSS樣式表代碼布局基礎(chǔ)教程—課程6：div布局(一)

六、div 布局

默認(rèn) div 占據(jù)一行，第二個(gè) div 到下一行去，怎樣用 div 進(jìn)行分欄布局，我們來看一個(gè)練習(xí)；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點(diǎn)菜單“文件－打開”命令，打開上次的 lx5 網(wǎng)頁，再點(diǎn)“文件－另存為”，以“l(fā)x6.html”為文件名，保存到自己的文件夾；

3）按照兩列并排來進(jìn)行布局；

2、定位布局

1）在下面加一個(gè)

標(biāo)簽，作為主框架，在標(biāo)簽里加入下面的樣式；

2）前面的 id 是這個(gè) div 的標(biāo)識符，用來標(biāo)記這個(gè) div 容器，

在里面的樣式里設(shè)置了顏色、邊框、內(nèi)邊距，

設(shè)定了固定寬度 604，高度 202，這個(gè)可以計(jì)算出來，根據(jù)下面兩列的寬度再加上內(nèi)邊距；

3）修改里面的古詩的 div 樣式，加上背景色、去掉內(nèi)外邊距，最后加上一個(gè)左浮動 float:left

4）在這個(gè)后面，再加上另一個(gè) div，樣式相同，里面輸入另一首古詩 ；

5）這兒的 float:left; 讓這個(gè) div 框，跟上一個(gè)框并排左對齊，而不是到下一行去，

最后再加一個(gè)標(biāo)簽，結(jié)束最外面的大框架；

6）保存一下文件，回到自己文件夾里，打開 lx6 網(wǎng)頁看看效果；

本節(jié)學(xué)習(xí)了使用 div 布局的基本方法，如果你成功地完成了練習(xí)，請繼續(xù)學(xué)習(xí)下一課內(nèi)容；

;

CSS基礎(chǔ)知識點(diǎn)全面解析（轉(zhuǎn)載）

基本

常識與實(shí)踐

鏈接方式

基本

最基本的方式就是直接在html文件中指定元素樣式，這種方式不推薦，因?yàn)閷⒈憩F(xiàn)層和結(jié)構(gòu)層混起來了

"style="background-image:url({{user.avatar}})"

內(nèi)部鏈接

要為html直接增加css樣式，需要在元素中增加開始和結(jié)束style標(biāo)記，css規(guī)則放在里面

style

p {

color: gray;

}

/style

css文件外置

另一種方式將css文件外置，如style.css,作為樣式表(stylesheets),然后從html眾創(chuàng)建一個(gè)到這個(gè)文件的外部鏈接,用元素,用外部樣式表的好處是要修改整個(gè)網(wǎng)站的樣式，只要進(jìn)入這個(gè)樣式表，對css進(jìn)行幾處修改即可。如:

link type="text/css" rel="stylesheet" href="lounge.css"

多樣式表

使用多個(gè)樣式表,順序很重要，一個(gè)樣式表會覆蓋在它上面鏈接的樣式表中的樣式,有時(shí)會有一個(gè)樣式表作為頁面的基礎(chǔ)樣式，要修改樣式，鏈接這個(gè)樣式表，然后在下面提供自己的樣式表，指定要修改的樣式,如下所示:

link rel="stylesheet" href="corperate.css"http://總公司樣式

link rel="stylesheet" href="beverage-division.css"http://部門對總公司的樣式做了一些補(bǔ)充，甚至可以覆蓋公司的樣式

link rel="stylesheet" href="lounge-seattle.css"http://西雅圖休閑室對樣式表做了自己的調(diào)整

簡寫

css屬性太多，能不能不費(fèi)吹灰之力就指定這些屬性呢？可以把同一屬性的值結(jié)合起來寫成一句,即簡寫。

簡寫格式

padding

padding: 0px 40px 30px 20px;,順序是上右下左,順時(shí)針有木有,如果都相同可以用padding: 20px;

padding-top: 0px;

padding-right: 40px;

padding-bottom:30px;

padding-left: 20px;

margin

上面的padding格式同樣對margin也適用,還有另一種方法,如果上下一樣，左右一致,可以這樣寫:margin: 0px 20px,前面指定上下，后面指定左右。

border

邊框?qū)傩院唽?border: thin solid #007e73;,可以用你喜歡的任何順序。

background

背景簡寫 background: white url(images/cocktail.gif) repeat-x;，同樣順序隨便

字體

字體簡寫的格式稍微復(fù)雜一些:

font : font-style font-variant font-weight font-size/line-height font-family

選擇

子孫選擇器

父元素和子孫元素名之間有一個(gè)空格,子孫選擇器會選擇所有子孫，包括這個(gè)元素中嵌套的所有,不管嵌套多深,例如

color: black;

}

直接孩子

如果要選擇直接的孩子,用

color: black;

}

復(fù)雜選擇

更復(fù)雜的選擇,方法還是一樣

color: blue;

}

規(guī)則添加

類

當(dāng)我們用選擇器選擇元素使用一個(gè)規(guī)則時(shí),會對所有該元素應(yīng)用這個(gè)樣式，所以如何單獨(dú)地選擇這些元素呢?這里就需要類class,class可以定義一類元素，對屬于該類的所有元素應(yīng)用樣式.要將一個(gè)元素加入一個(gè)類，只需要增加屬性”class”,并提供類名,如”greentea”:

p class="greentea"

...

/p

類元素選擇器

先選擇這個(gè)類中的元素,再用”.”指定一個(gè)類,最后是類名,如:

p.greentea {

color: green;

}

添加類元素

如果想對所有blockquote也做同樣的處理，可以:

blockquote.greentea,p.greentea {

color: green;

}

blockquote class = "greentea"

類選擇器

如果想把h1,h2,h3,p和blockquote都增加到greentea呢？要對類中的所有元素都用同一樣式可以用:

.greentea{

color: green;

}

/ 省略所有元素名,只有一個(gè)點(diǎn),則會應(yīng)用到所有成員 /

多類元素

元素可以有多個(gè)類,例如:

p class="greentea raspberry blueberry"

特定元素選擇器

如果多個(gè)選擇器都選擇了一個(gè)元素呢？例如上面的3個(gè)類都與p元素匹配，并且都定義了color屬性，那么那個(gè)會勝出?

id

id的作用

id屬性用來唯一地命名元素,通常你想對多個(gè)元素重用某些樣式，才能真正發(fā)揮類的作用。但是如果只有一個(gè)元素需要樣式，或者頁面上只有一個(gè)元素，那就應(yīng)該使用id,每個(gè)元素只能有一個(gè)id，頁面中只能有一個(gè)元素?fù)碛刑囟╥d,一個(gè)元素有一個(gè)id，同時(shí)可以屬于一個(gè)或多個(gè)類,id中不允許出現(xiàn)空格或其他特殊字符,如

p id="footer".../p

選擇元素

用id選擇一個(gè)元素,需要在id前面使用一個(gè)#字符(類是[.]),id選擇器只與頁面中的一個(gè)元素匹配

color: red;

}//選擇id為footer的任意元素

p#footer{

color: red;

}//選擇id為footer的p元素

實(shí)踐建議

繼承

樣式繼承

層疊

媒體查詢

link媒體查詢

你可能想針對將要顯示頁面的設(shè)備調(diào)整頁面的樣式，可以用media屬性,在link元素中增加這個(gè)屬性.如

link rel="stylesheet" href="lounge-mobile.css" mdeia="screen and (max-device-width: 480px)"

link rel="stylesheet" href="lounge-print.css" media="print"

css媒體查詢

可以直接在css中增加媒體查詢,使用@media規(guī)則,把對所有媒體類型都通用的規(guī)則放在@media規(guī)則下面,例如

@media screen and (min-device-width: 481px){//當(dāng)設(shè)備屏幕寬度大于480px時(shí)使用

margin-right: 250px;

}

}

@media screen and (max-device-width: 480px){//當(dāng)設(shè)備屏幕小于等于480px時(shí)使用

margin-right: 30px;

}

}

@media print { // 如果要打印頁面，使用該規(guī)則

body {

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

}

}

實(shí)踐建議

屬性

盒模型

盒模型是css看待元素的一種方式，css將每個(gè)元素看作由一個(gè)盒子表示,每個(gè)盒子由一個(gè)內(nèi)容區(qū)以及可選的內(nèi)邊距，邊框和外邊距組成。由內(nèi)而外分別是:

border 邊框

color 顏色

文本元素的字體顏色

body{

background-color: rgb(80%, 40% , 0%)//橙色

}

還可以指定0-255之間的一個(gè)數(shù)值,例如:

body{

background-color: rgb(204, 102, 0)//和上面顏色一致,255*80% = 204...

}

font-family 字體

大多數(shù)計(jì)算機(jī)上通常只安裝了部分字體,所以選擇字體時(shí)要當(dāng)心,通常指定的font-family包含一個(gè)候選字體列表,他們都來自同一個(gè)字體系列,候選字體用逗號分隔,大小寫字母必須一致,最后總是放一個(gè)通用的字體系列名,如果一個(gè)字體名中包含多個(gè)單詞,比如Courier New，如何指定？用引號,”Courier New”,如:

body{

font-family: Verdana, Geneva, Arial, sans-serif; 一一首選字體呈降序

}

字體系列

每個(gè)font-family包含一組有共同特征的字體。共有5個(gè)字體系列:

body { font-size : small; }

h1 { font-size : 150%; }

h2 { font-size : 120%; }

注意老版IE不支持用像素指定的文本縮放

瀏覽器默認(rèn)字體大小

其他屬性

left 指定一個(gè)元素的左邊所在位置

top 控制一個(gè)元素頂部的位置

background-image 在元素后面放置一個(gè)圖像,如

background-image: url(images/background.gif);

//用url括起來,注意沒有引號

background-repeat 背景圖像是否重復(fù)

line-height: 1;//代表elixirs中的所有元素的行間距為其自己字體大小的1倍

}

width: 200px;

float: right;

}

background-color: #675c47;

color: #efe5d0;

text-align: center;

padding: 15px;

margin: 10px;

font-size: 90%;

clear: right;

}

width: 800px;

padding-top: 5px;

padding-bottom: 5px;

background-color: #675c47;

}

那么頁面的寬度將被限制為800px，無論瀏覽器寬度如何變化都不會移動,但這會導(dǎo)致瀏覽器很寬時(shí)，右邊有很多空白空間

凝膠布局 Jello

width: 800px;

padding-top: 5px;

padding-bottom: 5px;

background-color: #675c47;

margin-left: auto;

margin-right: auto;

}

絕對定位

position: absolute;

top: 100px;

right: 200px;

width: 280px;

}

display: table;

border-spacing: 10px;//于是不再需要div中的外邊距

}

display: table-row;

}

display: table-cell;

background: #efe5d0 url(images/background.gif) top left;

font-size: 105%;

padding: 15px;

/ margin: 0px 10px 10px 10px; /

vertical-align: top;//確保表格兩個(gè)單元格中的所有內(nèi)容相對于單元格上邊對齊，默認(rèn)為中間對齊,可以設(shè)置為top,middle,bottom

}

display: table-cell;

background: #efe5d0 url(images/background.gif) bottom right;

font-size: 105%;

padding: 15px;

/ margin: 0px 10px 10px 10px; /

vertical-align: top;

}

CSS常用樣式二

實(shí)際應(yīng)用，更多的使用italic屬性值

實(shí)際應(yīng)用中， 行高的數(shù)值通過設(shè)計(jì)圖獲取， 量取數(shù)值時(shí)需要使用一些輔助軟件工具

選中文字工具，屬性選中：不消除鋸齒

字體、 字號、 行高、 加粗、 斜體 都是font綜合屬性的單一屬性。

font屬性五個(gè)單一屬性的值可以進(jìn)行合寫， 屬性值可以有2到多個(gè)， 值之間用空格進(jìn)行分隔。

font進(jìn)行綜合書寫時(shí)， 必須有字號和字體參與， 而且必須字號在前， 字體在后， 不能顛倒順序。

font屬性經(jīng)常對字體、 字號、 行高進(jìn)行合寫， 書寫順序必須是字號、 行高、 字體， 字號和行高之間必須用/進(jìn)行分隔

如果font屬性需要設(shè)置加粗和斜體， 兩個(gè)屬性值只能寫在最前面， 兩個(gè)值之間可以互換位置。 后面的字號、 行高、 字體不能更改位置

作用：設(shè)置文本整體是否有線條的裝飾效果

作用：設(shè)置段落首行是否進(jìn)行縮進(jìn)

實(shí)際應(yīng)用中，常用em

屬性值區(qū)分正負(fù)， 正數(shù)表示向右縮進(jìn)， 負(fù)數(shù)表示向左縮進(jìn)

瀏覽器控制臺中的盒模型圖

作用： 設(shè)置可以添加元素內(nèi)容的區(qū)域的寬度。

作用： 設(shè)置可以添加元素內(nèi)容的區(qū)域的高度。

如果一個(gè)元素不添加 height 屬性， 默認(rèn)屬性值為auto， 瀏覽器會自動計(jì)算出實(shí)際高度， 也就是是內(nèi)部元素內(nèi)容自動撐開的高度。 元素的高度自適應(yīng)內(nèi)部內(nèi)容的高度。

書寫四個(gè)方向單一屬性時(shí)， 一般是按照順時(shí)針規(guī)律書寫： 上、 右、 下、 左

設(shè)置四個(gè)屬性值， 分配方向上、 右、 下、 左。

設(shè)置三個(gè)值分配給上、 左右、 下。

設(shè)置兩個(gè)值， 分配給上下、 左右 。

設(shè)置屬性值只有一個(gè)， 四邊的值相同。

作用： 設(shè)置邊框的顏色。

屬性值： 顏色名或顏色值， 整體類似 padding 綜合屬性寫法。

每個(gè)單一屬性都必須與復(fù)合屬性 border 一致， 設(shè)置三個(gè)屬性值。

書寫四個(gè)方向單一屬性時(shí)， 一般是按照順時(shí)針規(guī)律書寫： 上、 右、 下、 左

設(shè)置四個(gè)屬性值， 分配方向上、 右、 下、 左。

設(shè)置三個(gè)值分配給上、 左右、 下。

設(shè)置兩個(gè)值， 分配給上下、 左右 。

設(shè)置屬性值只有一個(gè)， 四邊的值相同。

給 body 標(biāo)簽設(shè)置整體文字樣式， 讓大部分后代標(biāo)簽全部去繼承

設(shè)計(jì)圖中盒子高度占位是固定的， 后面同級元素在高度下面加載。多余內(nèi)容會溢出盒子。

設(shè)置了高度的盒子， 如果內(nèi)部元素的加載高度超過父級， 會溢出。可以通過一個(gè)溢出的屬性 overflow， 進(jìn)行溢出部分內(nèi)容的顯示效果設(shè)置。

要求盒子高度必須自適應(yīng)內(nèi)部內(nèi)容的高度。

或者設(shè)置height的屬性值是自動的。

一個(gè)元素內(nèi)部嵌套的子元素， 在父元素中居中。

針對類似 div 樣式上必須獨(dú)占一行的盒子， 如果子盒子寬度低于父盒子寬度， 可以設(shè)置子盒子的 margin 值， 水平方向的值都設(shè)置為 auto。

原因： auto 只在水平方向有作用， 水平方向的 margin 如果設(shè)置為 auto， 邊距會自動無限增大， 直到撐滿整個(gè)父元素除了子元素寬度之外剩余的區(qū)域， 如果兩個(gè)水平方向都是 auto， 兩邊都要無限大， 只能達(dá)到一個(gè)平衡， 兩邊距離相同， 導(dǎo)致盒子居中。

一般情況下， 一個(gè)父元素內(nèi)部可以放一個(gè)或多個(gè)子元素， 而且多個(gè)子元素要排成一行顯示， 必須保證父元素的寬度一定要足夠（不考慮溢出情況） ， 需要遵循一個(gè)設(shè)置尺寸的規(guī)律： 所有子元素的寬度加在一起不能大于父元素的寬度 width。父元素的width ≥ 所有子元素width + padding + border + margin

如果不滿足條件： 要么多余的子元素掉下來不能在一排， 要么溢出父元素

父子盒模型中， 只有一個(gè)子元素， 且子元素是類似 div 標(biāo)簽必須占一行的。不設(shè)置子元素的 width 屬性， 子元素的 width 屬性值會自動加載父級元素的 width。如果同時(shí)設(shè)置了子元素水平方向的 padding 和 border 、 margin， 不需要手動去進(jìn)行內(nèi)減， 子元素的 width 會自動收縮尺寸。

子元素所有的水平方向的位置所有屬性的加和等于父元素的 width 。

在垂直方向如果有兩個(gè)元素的外邊距有相遇的， 瀏覽器中加載的真正的外邊距不是兩個(gè)間距的加和， 而是兩個(gè)邊距中值較大的， 邊距值小的塌陷到了邊距值大的值內(nèi)部。

上面的元素有下邊距， 下面的元素有上邊距， 兩個(gè)邊距相遇， 真正的盒子間距離是較大的那個(gè)值

父子元素之間也會出現(xiàn) margin 塌陷， 父元素和子元素都設(shè)置了同方向的margin-top 值， 兩個(gè)屬性之間沒有其他的內(nèi)容進(jìn)行隔離， 導(dǎo)致兩個(gè)屬性相遇， 發(fā)生margin 塌陷。

本身父元素與上一個(gè)元素的距離是0， 子元素如果設(shè)置了垂直方向的上邊距， 會帶著父級一起掉下來。

水平方向的 margin 沒有塌陷現(xiàn)象。

在標(biāo)準(zhǔn)流中， 大部分元素是區(qū)分等級的， 習(xí)慣將元素劃分為幾種常見的加載級別：塊級元素、 行內(nèi)元素、 行內(nèi)塊元素等。

大部分容器級標(biāo)簽包括p標(biāo)簽都是塊級元素， 比如 div 、 h1 等。

大部分的文本級標(biāo)簽， 比如 span、 a、 b 等。

比如 img、 input 等。

可以通過 display 屬性更改一個(gè)標(biāo)簽的顯示模式。

屬性值： 元素根據(jù)屬性值不同， 可以加載對應(yīng)元素等級的顯示模式的特點(diǎn)。

display 屬性更改的顯示模式并沒有改變標(biāo)準(zhǔn)流本質(zhì)性質(zhì)， 頁面還是只能從上往下加載， 存在空白折疊現(xiàn)象等微觀性質(zhì)。 要想實(shí)現(xiàn)更多的界面布局效果需要脫離標(biāo)準(zhǔn)流的限制。

標(biāo)簽元素脫離標(biāo)準(zhǔn)流的方法包括： 浮動、 絕對定位、 固定定位。

margin 塌陷現(xiàn)象出現(xiàn)在標(biāo)準(zhǔn)流中的， 浮動元素已經(jīng)脫離標(biāo)準(zhǔn)流， 不再具有 margin塌陷現(xiàn)象。

與前面壓蓋效果結(jié)構(gòu)類似， 同級元素中前面的元素浮動， 后面的元素不浮動， 不浮動的元素內(nèi)部還有一些文字， 浮動的藍(lán)盒子會壓蓋住粉盒子的一部分， 但是文字內(nèi)容不會被蓋住， 粉盒子中的文字會讓開藍(lán)盒子位置， 圍繞它進(jìn)行加載。這種效果稱為字圍現(xiàn)象。

可以利用字圍現(xiàn)象制作一些特殊的圖文混排布局效果

給標(biāo)準(zhǔn)流的父元素強(qiáng)制給一個(gè)合適的高度

作用： 清除標(biāo)簽元素自身受到的前面的浮動元素的影響。

給標(biāo)準(zhǔn)流父元素添加 clear 屬性， 父元素不受前面浮動影響， 不會再占有浮動讓出的位置。

給內(nèi)部有浮動子元素的父元素添加溢出隱藏 overflow: hidden; 屬性， 可以解決浮動的所有問題。

父元素有了高度后， 可以管理住內(nèi)部所有的浮動元素， 不會延伸到后面標(biāo)簽中影響貼邊。

a 標(biāo)簽可以根據(jù)用戶行為不同， 劃分為四種狀態(tài)， 通過a 標(biāo)簽的偽類可以將四種狀態(tài)選中設(shè)置為不同的樣式效果， 用戶觸發(fā)對應(yīng)行為， 就可以加載對應(yīng)的樣式。

一般會將訪問前和訪問后狀態(tài)設(shè)置為一樣的效果， 保證了頁面的統(tǒng)一性， 可以選擇性的設(shè)置鼠標(biāo)移上和鼠標(biāo)點(diǎn)擊狀態(tài)。

更加常用的一種設(shè)置方式如下：

a 標(biāo)簽任何普通的選擇器， 可以同時(shí)選中四種狀態(tài)， 可以將四種狀態(tài)設(shè)置為相同的樣式， 屬性可以設(shè)置所有的 a 默認(rèn)顯示樣式的屬性， 包括盒模型、 文字等。

a:hover 偽類選擇器： 設(shè)置鼠標(biāo)移上時(shí)不一樣的樣式屬性。

屬性值都是使用代表方向的單詞進(jìn)行書寫。

使用像素值作為背景定位的屬性值。

百分比表示法使用百分比數(shù)字作為屬性值。

100%代表的數(shù)值：

background 屬性可以將五個(gè)單一屬性的值進(jìn)行合寫。

屬性值： 可以有 1-5 個(gè)屬性值， 值之間用空格進(jìn)行分隔， 背景定位的兩個(gè)屬性值算作一個(gè)屬性值， 不能被分開也不能顛倒順序。 五個(gè)屬性值之間可以互換位置。

在h1 標(biāo)簽是權(quán)重最高的標(biāo)簽， 一般會在內(nèi)部書寫最重要的內(nèi)容， 比如 logo 圖片、 最大的標(biāo)題等。

另外 h1 內(nèi)部的文字， 可以幫助提高 SEO 搜索排名。

在設(shè)置的是 logo 圖片時(shí)， 如果使用插入圖， 就不能書寫搜索關(guān)鍵字。

如果想解決 SEO 問題， 可以將 HTML 結(jié)構(gòu)中， 插入圖換成搜索關(guān)鍵字， 然后使用 css 添加背景圖給 a 標(biāo)簽或 h1 標(biāo)簽。

在一個(gè)盒子中有背景圖部分， 而且有文字內(nèi)容， 文字會讓開背景圖區(qū)域進(jìn)行加載，

背景區(qū)域應(yīng)該使用 padding 擠出位置。

四個(gè)方向的 padding 都可能用于添加背景圖。

當(dāng)用戶訪問一個(gè)網(wǎng)站時(shí)， 需要向服務(wù)器發(fā)送請求， 網(wǎng)頁上的每張圖像都要經(jīng)過一次求才能展現(xiàn)給用戶。

然而， 一個(gè)網(wǎng)頁中往往會應(yīng)用很多小的背景圖像作為修飾， 當(dāng)網(wǎng)頁中的圖像過多時(shí)，服務(wù)器就會頻繁地接受和發(fā)送請求， 這將大大降低頁面的加載速度。為了有效地減少服務(wù)器接受和發(fā)送請求的次數(shù)， 提高頁面的加載速度， 出現(xiàn)了 CSS精靈技術(shù)（也稱 CSS Sprites、 CSS 雪碧） 。

CSS 精靈是一種處理網(wǎng)頁背景圖像的方式。

它將一個(gè)頁面涉及到的所有零星背景圖像都集中到一張大圖中去， 然后將大圖應(yīng)用于網(wǎng)頁， 這樣， 當(dāng)用戶訪問該頁面時(shí)， 只需向服務(wù)發(fā)送一次請求， 網(wǎng)頁中的背景圖像即可全部展示出來。

通常情況下， 這個(gè)由很多小的背景圖像合成的大圖被稱為精靈圖。

CSS3 支持背景半透明的寫法， 顏色值增加了一種 rgba 模式。

rgba 模式 ： 在 rgb 基礎(chǔ)上增加了一個(gè)不透明度的設(shè)置， 不透明度 alpha 取值范圍在0-1 之間， 0 表示完全透明， 1 表示完全不透明， 0.5 表示半透明。

書寫方式： rgba(紅色， 綠色， 藍(lán)色， 不透明度)

注意： 背景半透明是指盒子背景半透明， 盒子里面的內(nèi)容不受影響。

通過 background-size 設(shè)置背景圖片的尺寸， 就像我們設(shè)置 img 的尺寸一樣， 在移動 Web 開發(fā)中做屏幕適配應(yīng)用非常廣泛。

CSS3 中規(guī)定， 一個(gè)盒子上， 可以添加多個(gè)背景圖片。

background-image 的屬性值書寫時(shí)， 以逗號分隔多背景的 URL路徑地址。

注意： 背景加載時(shí)， 先寫的背景壓蓋后寫的背景圖片。

屬性名： position。

作用： 設(shè)置定位的元素， 它需要根據(jù)某個(gè)參考元素發(fā)生位置的偏移。

定位的元素要想發(fā)生位置的移動， 必須搭配偏移量屬性進(jìn)行設(shè)置。

水平方向： left、 right。

垂直方向： top、 bottom。

屬性值： 常用 px 為單位的數(shù)值， 或者百分比。

子絕父相、 子絕父絕、 子絕父固

屬性值： absolute， 絕對的意思。

參考元素： 參考的是距離最近的有定位的祖先元素， 如果祖先都沒有定位， 參考body。必須搭配偏移量屬性才會發(fā)生位置移動。

性質(zhì)： 絕對定位的元素脫離標(biāo)準(zhǔn)流， 會讓出標(biāo)準(zhǔn)流位置， 可以設(shè)置寬高， 也可以隨時(shí)定義位置， 絕對定位的元素不設(shè)置寬高只能被內(nèi)容撐開。

注意1： 絕對定位的參考元素是不固定的， 不同的參考元素以及不同的偏移量組合，會導(dǎo)致絕對定位元素的參考點(diǎn)不同， 具體位移效果不同。

注意2： 在絕對定位中， 由于參考點(diǎn)不同， left 正值不再等價(jià)于 right 的負(fù)值。

以 body 為參考元素時(shí)， 參考點(diǎn)的確定與偏移量方向有關(guān)

第一， 如果有 top 參與的定位， 參考點(diǎn)就是 body 頁面的左上頂點(diǎn)和右上頂點(diǎn)。 自身的對比點(diǎn)是盒子的所有盒模型屬性最外面的左上角或右上角。

第二， 如果有 bottom 參與的絕對定位， 參考點(diǎn)是 body 頁面首屏的左下頂點(diǎn)或右下頂點(diǎn)。 對比點(diǎn)是盒子的所有盒模型屬性最外面的左下角或右下角。

實(shí)際應(yīng)用中， 如果以 body 為參考元素， 不同分辨率的瀏覽器中， 絕對定位的元素位置是不同的， 所以較少使用 body 作為參考元素。

祖先級為參考元素

如果祖先級中有定位的元素， 就不會去參考 body 。

參考元素： 參考的是祖先元素中有任意定位的， 在 HTML 結(jié)構(gòu)中距離目標(biāo)最近的祖先。

如果絕對定位的參考元素是某個(gè)祖先級， 參考點(diǎn)是盒子 border 以內(nèi)的四個(gè)頂點(diǎn)， 組合方向決定了參考點(diǎn)。 絕對定位的元素只關(guān)心對比點(diǎn)和參考點(diǎn)之間的距離， 會忽視參考元素的 padding 區(qū)域。

所有的定位類型都可以實(shí)現(xiàn)壓蓋效果。

由于絕對定位的元素脫標(biāo)， 不占標(biāo)準(zhǔn)流位置， 壓蓋效果更徹底， 實(shí)際工作中， 常見的是 絕對定位制作壓蓋。

定位的元素不區(qū)分定位類型， 都會去壓蓋標(biāo)準(zhǔn)流或浮動的元素。

如果都是定位的元素， 在 HTML 中 后寫定位壓蓋先寫的定位 。

更改定位的元素的壓蓋順序， 設(shè)置一個(gè) z-index 屬性。

屬性值： 數(shù)字。

分享文章：css基礎(chǔ)樣式,CSS樣式類型
文章URL：http://chinadenli.net/article32/dseihsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站改版、品牌網(wǎng)站設(shè)計(jì)、商城網(wǎng)站、網(wǎng)站營銷、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)