HTML簡略版重點(diǎn)

1、One day, has not been able again to come.一天過完，不會(huì)再來。第一章 HTML第一節(jié) HTML的概念和發(fā)展1. 什么是HTML HTML指的是超文本標(biāo)記語言（Hyper Text Markup Language） HTML不是一種編程語言，而是一種標(biāo)記語言（markup language） 標(biāo)記語言是一套標(biāo)記標(biāo)簽（markup tag） HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁第二節(jié) HTML結(jié)構(gòu)1. HTML文檔基本結(jié)構(gòu)1) Head標(biāo)簽內(nèi)包含的主要元素l 該元素用于定義文檔標(biāo)題l 該元素用于包含JavaScript腳本l 該元素用于鏈接外部CSS資源文件l 該

2、元素用于定義內(nèi)部CSS樣式l 該元素用于HTML頁面的元數(shù)據(jù) 用于定義頁面源信息，也就是一些鍵值對(duì)，主要有以下三個(gè)屬性http-equiv指定元信息的名稱，該屬性指定的名稱具有特殊意義，它可以向?yàn)g覽器傳回一些有用的信息，幫助瀏覽器正確地處理網(wǎng)頁內(nèi)容name指定元信息名稱，該名稱可以隨意指定content指定元信息的值一、常用的塊級(jí)標(biāo)簽1. 塊級(jí)標(biāo)簽 顯示為“塊”狀，瀏覽器會(huì)在其前后顯示拆行。 常用的塊級(jí)標(biāo)簽有：p,h1h6,div,ul等， 一個(gè)塊級(jí)標(biāo)簽獨(dú)自占據(jù)一行標(biāo)題標(biāo)簽語法段落標(biāo)簽水平線標(biāo)簽（自結(jié)束標(biāo)簽）有序列表標(biāo)簽（列表項(xiàng)可為多個(gè)） 列表項(xiàng)1無序列表標(biāo)簽（列表項(xiàng)可為多個(gè)） 列表項(xiàng)1定義描

3、述/定義列表標(biāo)簽 標(biāo)題 描述1分區(qū)/分模塊標(biāo)簽頭部內(nèi)容 導(dǎo)航內(nèi)容底部內(nèi)容注：div標(biāo)簽一般當(dāng)做結(jié)構(gòu)化塊狀元素使用；一般最常見的用途是對(duì)網(wǎng)頁進(jìn)行整體分塊布局，即當(dāng)容器來使用。二、常用的行級(jí)標(biāo)簽1. 行級(jí)標(biāo)簽 按行逐一顯示，前后不會(huì)自動(dòng)換行2. 文本格式化元素定義粗體文本定義斜體文本定義強(qiáng)調(diào)文本，實(shí)際效果與斜體文本差不多定義粗體文本，與的作用基本相同定義小號(hào)文本定義下標(biāo)文本定義上標(biāo)文本定義文本顯示方向，內(nèi)有dir屬性，只能取值ltr或rtl 注：left to right3. 超鏈接標(biāo)簽 鏈接文本或圖片 常用屬性Href指定超鏈接所關(guān)聯(lián)的另一個(gè)資源target指定框架集中的哪個(gè)來裝載另一個(gè)資源，該

4、屬性可以是_self、_blank、_top、_parent四個(gè)值，分別代表使用自身、新窗口、頂層框架、父框架來裝載新資源4. 圖像標(biāo)簽 5. 標(biāo)簽 文本等行級(jí)內(nèi)容 （強(qiáng)調(diào)作用）6. 7. 常用的特殊符號(hào)空格 大于（）>小于（）<引號(hào)（”）"版權(quán)號(hào)©三、frameset內(nèi)嵌框架集1. 創(chuàng)建框架網(wǎng)頁的步驟1) 創(chuàng)建各個(gè)子窗口對(duì)應(yīng)的HTML文件2) 創(chuàng)建整個(gè)框架文件，分別引用子窗口文件2. 基本語法 Cols:縱向分割 rows:橫向分割 *：表剩余部分Noresize:固定框架，使其不能移動(dòng)注:標(biāo)簽不能與標(biāo)簽同時(shí)使用。除非你在中使用標(biāo)簽，即內(nèi)嵌在中。3.

5、 框架集標(biāo)簽中的常用屬性屬性值描述ColsPixels(像素)、%、*定義框架集中列的數(shù)目和尺寸rowsPixels、%、*定義框架集中行的數(shù)目和尺寸四、Iframe內(nèi)嵌框架1. 標(biāo)簽中的常用屬性屬性值描述frameborder0、1規(guī)定是否顯示框架周圍的邊框nameframe_name規(guī)定iframe的名稱scrollingYes、no、auto規(guī)定是否在iframe中顯示滾動(dòng)條srcurl規(guī)定在iframe中顯示的文檔的url2. Iframe語法 width=”400px” height=”100%” 注： 一定要寫，否則，下面的內(nèi)容不顯示！位置在標(biāo)簽內(nèi)五、HTML表格標(biāo)簽1. 表格相關(guān)

6、元素用于定義表格，以結(jié)束定義表格行，該元素只能包含、兩種元素，多個(gè)定義單元格，包含兩個(gè)主要的屬性：Rolspan指定單元格跨多少列；rowspan指定單元格跨多少行用于定義表格標(biāo)題，01個(gè)定義表格頁眉的單元格定義表格的主體定義表格頭定義表格腳2. 表格標(biāo)簽一般什么情況下使用？ 主要用于規(guī)則的數(shù)據(jù)顯示 適當(dāng)?shù)目梢栽诒韱雾撁媸褂?. 使用表格標(biāo)簽的缺點(diǎn) 代碼量比較大，頁面瀏覽速度比較慢 層次結(jié)構(gòu)比較復(fù)雜，不易于維護(hù)和改版 不利于搜索引擎搜索查找數(shù)據(jù)要對(duì)頁面進(jìn)行布局，推薦使用div+css另：中可加入屬性width/height/border/bgcolor/cellspacing（單元格的外邊距）

7、/cellpadding（內(nèi)邊距）/align六、Form標(biāo)簽（表單標(biāo)簽）1. Form標(biāo)簽的語法：文本框、按鈕等標(biāo)簽元素注：表單是看不到的，只是表單元素的容器，真正的數(shù)據(jù)放在表單元素中。2. 應(yīng)用： 百度搜索 注冊(cè)賬號(hào)3. Form標(biāo)簽的常用屬性1) Action: 指定表單提交后由服務(wù)器上的哪個(gè)處理程序進(jìn)行處理2) Methed: 指定 向服務(wù)器提交的方式一般為get和post兩種形式l Get方式的請(qǐng)求會(huì)將請(qǐng)求參數(shù)的名和值轉(zhuǎn)換成字符串，并附加在原URL之后，因此可以在地址欄中看到請(qǐng)求參數(shù)的名和值。且get請(qǐng)求傳送的數(shù)據(jù)量比較小，一般不能大于2KB,多為超鏈接。l Post方式的請(qǐng)求傳送的

8、數(shù)據(jù)量比較大，通常認(rèn)為可以不受限制，往往取決于服務(wù)器的限制。Post方式的請(qǐng)求參數(shù)是放在HTML的HEAD中傳輸，用戶在地址欄中看不到請(qǐng)求參數(shù)，安全性相對(duì)較高。 3) Enctype: 用于指定表單數(shù)據(jù)的編碼方式application/x-www-form-urlencoded默認(rèn)的編碼方式，將表單控件中的值處理成URL編碼方式mutipart/form-data以二進(jìn)制流的方式來處理表單數(shù)據(jù)，MIME編碼，上傳文件的表單必須選擇該項(xiàng)text/plain當(dāng)表單的action屬性值為mailto:URL的形式時(shí)使用4. 常見的表單元素 使用input元素單行文本框：指定元素的type屬性為tex

9、t即可密碼輸入框：指定元素的type屬性為password隱藏域指定元素的type屬性為hidden單選框指定元素的type屬性為radio復(fù)選框指定元素的type屬性為checkbox圖像域指定元素的type屬性為image即可，當(dāng)type=”image”時(shí)，可以指定width和height屬性文件上傳域指定元素的type屬性為file提交、重置、普通按鈕指定元素的type屬性為submit、result、button注：自結(jié)束；name可重復(fù)，id要唯一密碼框重置按鈕 abc :可讓abc關(guān)聯(lián)的內(nèi)容快速獲得焦點(diǎn)，增強(qiáng)用戶體驗(yàn) 密碼框 Input元素常用的幾個(gè)屬性Cheked設(shè)置單選框、復(fù)選

10、框初始狀態(tài)是否處于選中狀態(tài)，選中：checked=”checked”；不寫，默認(rèn)不選中若同時(shí)設(shè)置兩個(gè)默認(rèn)，顯示后一個(gè)！只有當(dāng)type屬性值為checkbox或radio時(shí)才可指定Disabled設(shè)置首次加載時(shí)禁用此元素。禁用：disabled=”disabled”, 默認(rèn)可用當(dāng)type=”hidden”時(shí)不能指定該屬性Maxlengh該屬性是一個(gè)數(shù)字，指定文本框中所允許輸入的最大字符數(shù)Readonly指定該文本框內(nèi)的值不允許修改（可以使用javascript腳本修改）Size該屬性是一個(gè)數(shù)字，指定該元素的長度。當(dāng)type=”hidden”時(shí)不能指定該屬性src指定圖像域所顯示的圖像URL，只有

11、當(dāng)type=”image”時(shí)才可以指定該屬性5. 使用button定義按鈕 語法：普通文本、格式化文本、圖像 Button標(biāo)簽常用屬性Disabled指定是否禁用此元素。該屬性只能是disabled或者省略Name指定該按鈕的唯一名稱Type指定該按鈕屬于哪種按鈕，只能是button、reset、submit注：必須聲明按鈕類型，否則默認(rèn)提交總結(jié)：button按鈕與input按鈕相比，提供了更強(qiáng)大的功能和更豐富的內(nèi)容6. 列表框和下拉菜單1) 語法： 2) 列表框常用屬性disabled指定是否禁用此元素，該屬性只能是disabled或者省略multiple設(shè)置該列表框是否允許多選，多選：mu

12、ltiple=”multiple”size指定該列表內(nèi)同時(shí)顯示多少個(gè)列表項(xiàng)注：下拉菜單比列表框少size屬性3) 在元素里，只能包含如下兩種子元素 ：用于定義列表框選項(xiàng)或菜單項(xiàng)，它的常用屬性如下：l Disabled:指定禁用該選項(xiàng)，該屬性值只能是disabled或者省略l Selected:指定該列表初始狀態(tài)是否處于被選中狀態(tài)，值只能是selected。若同時(shí)設(shè)置兩個(gè)默認(rèn)，顯示后一個(gè)！l Value:指定該選項(xiàng)對(duì)應(yīng)的請(qǐng)求參數(shù)值 ：用于定義列表項(xiàng)或菜單項(xiàng)組，它的常用屬性如下：l Label:指定該選項(xiàng)組的標(biāo)簽，此屬性必填l Disabled:禁用該選項(xiàng)組里的所有選項(xiàng)，該屬性值只能是disabl

13、ed或省略7. 多行文本框1) 語法： 文本內(nèi)容2) 多行文本常用的屬性Cols指定文本框的寬度，必填Rows指定文本框的高度，必填readonly制定該文本框只讀，該屬性值只能是readonly或省略七、HTML多媒體1. 音頻和視頻標(biāo)簽 Web上的多媒體指的是文字、圖片、音效、音樂、視頻和動(dòng)畫，現(xiàn)代網(wǎng)絡(luò)瀏覽器已經(jīng)支持很多 多媒體格式。 在HTML5之前，主要提供兩種元素來進(jìn)行多媒體的展示，一個(gè)是標(biāo)簽，另一個(gè)是標(biāo)簽。2. 標(biāo)簽 播放音頻： 播放flash視頻：embed src=1.MP4 width=400 height=200 autostart=true loop=true quali

14、ty=high pluginspage= 若瀏覽器無播放插件，提供的下載地址 （地址不唯一）3. 標(biāo)簽 作用：可以使用標(biāo)簽來給瀏覽器加載插件，通過加載的插件 來播放音頻和視頻。 播放音頻： 播放flash視頻：略注：只有IE效果較好，兼容性不是太好。為了能實(shí)現(xiàn)瀏覽器更好的兼容性，一般使用標(biāo)簽內(nèi)嵌標(biāo)簽4. 在HTML5中提供了和標(biāo)簽來進(jìn)行音頻和視頻的播放，使用比較簡單，功能更強(qiáng)大。第二章CSS第一節(jié) CSS的作用和發(fā)展1. 什么是CSS？ CSS（Cascading Style Sheet），層疊樣式單或級(jí)聯(lián)樣式表 它是一種專門描述結(jié)構(gòu)文檔的表現(xiàn)形式的文檔，主要用于網(wǎng)頁風(fēng)格設(shè)計(jì)，包括字體大小、顏

15、色以及元素的精確定位等。 在傳統(tǒng)的web網(wǎng)頁設(shè)計(jì)里，使用CSS能讓單調(diào)的HTML網(wǎng)頁更富表現(xiàn)力。2. CSS與傳統(tǒng)的HTML描述數(shù)據(jù)方式比較有哪些優(yōu)勢？1) 表達(dá)效果豐富2) 文檔體積較小3) 便于信息檢索4) 可讀性好第二節(jié) CSS的基本使用一、CSS的引入方式1. CSS可以控制HTML文檔的顯示，但在控制文檔顯示之前，首先應(yīng)在需要顯示的HTML文檔中引入CSS樣式單。HTML提供了以下四種引入方式：1) 使用內(nèi)聯(lián)樣式：這種方式將樣式內(nèi)聯(lián)定義到具體的HTML元素上，通常用于精確控制一個(gè)HTML元素的表現(xiàn)。2) 使用內(nèi)部樣式定義：這種方式是通過在HTML文檔頭定義樣式單部分來實(shí)現(xiàn)，在這種方式

16、下，每批CSS樣式只控制一份HTML文檔。3) 鏈接外部樣式文件：這種方式將樣式文件徹底與HTML文檔分離，樣式文件需要額外引入。在這種方式下，一份CSS樣式可以控制多份文檔。4) 導(dǎo)入外部樣式文件：這種方式與第三種方式類似，只是使用import來引入外部樣式表文件1.1 使用內(nèi)聯(lián)樣式（行內(nèi)樣式） 內(nèi)聯(lián)樣式是所有樣式中最為直接的一種，它直接對(duì)HTML標(biāo)簽（標(biāo)簽中）使用style屬性。 一般在實(shí)際開發(fā)中使用較少。1.2 使用內(nèi)部樣式（內(nèi)嵌樣式） 內(nèi)部樣式是將CSS寫在與之間，并且用和標(biāo)記進(jìn)行聲明。 把表現(xiàn)形式與文檔結(jié)構(gòu)進(jìn)行分離，冗余較少，易于維護(hù)。1.3 鏈接/引入 外部樣式文件 此種方式使用頻

17、率最高，把表現(xiàn)與結(jié)構(gòu)徹底分離 語法： 直接用于與之間1.4 導(dǎo)入外部樣式文件 這種導(dǎo)入方式和方式功能類似，就是語法不同，在和之間使用。 語法：import ”樣式文件”或import url(“樣式文件”)2. 各種方式的的優(yōu)先級(jí)問題 一個(gè)HTML文件可以同時(shí)使用以上四種樣式方式，當(dāng)四種方式中有相同屬性的時(shí)候，它們的優(yōu)先級(jí)順序如下：內(nèi)聯(lián) 內(nèi)部 import link提示：雖然各種CSS樣式加入頁面的方式有先后的優(yōu)先級(jí)，但在設(shè)計(jì)網(wǎng)站時(shí)，最好只使用其12種，這樣既有利于后期的維護(hù)和管理，也不會(huì)出現(xiàn)各種樣式的“撞車”情況，便于設(shè)計(jì)者順理成章的整理思路。二、CSS選擇器1. CSS常用選擇器介紹1)

18、定義CSS樣式的語法總遵循如下格式： Selector亦稱 樣式規(guī)則Property:value1; Property:value2;2) 上面的語法分為兩部分： Selector（選擇器）：選擇器決定該樣式定義對(duì)哪些元素起作用 Property:value1; Property:value2; （屬性定義）：屬性定義部分決定這些樣式起怎樣的作用（字體、顏色、布局等）總結(jié)：學(xué)習(xí)CSS大致需要掌握兩個(gè)部分的內(nèi)容：a) 掌握選擇器定義的用法；屬性間用”；”隔開，屬性值之間用空格。b) 掌握各種CSS屬性的定義。1.1. 標(biāo)記選擇器（元素選擇器） E /*其中E代表有效的HTML元素*/1.2. 類

19、選擇器 E.classValue /*其中E代表有效的HTML元素*/:可省略 .: 表示類 classValue:類名 :樣式規(guī)則同時(shí)使用多種類選擇器，效果一般會(huì)疊加。1.3. ID選擇器 E#idValue /*其中E代表有效的HTML元素*/ 與類選擇器最大的區(qū)別：不能同時(shí)使用多個(gè)ID選擇器1.4. 選擇器組合 Selector1，Selector2，Selector3 /*其中 Selector1等都是有效的選擇器，以” , ”隔開*/1.5. 選擇器嵌套 Selector1 Selector2 /* 其中Selector1等都是有效的選擇器，以空格隔開*/第三節(jié)、 CSS常用樣式屬性

20、設(shè)置一、CSS字體和文本的相關(guān)屬性1. CSS為控制文本的字體提供了大量的屬性，這些屬性主要用于設(shè)置字體大小、樣式、粗細(xì)、類型等。 常用屬性如下：Font-family規(guī)定文本的字體系列。比如：”serif”、”sans-serif”等。Font-size規(guī)定文本的字體尺寸Font-style規(guī)定文本的字體樣式。主要有normal、italic（斜體）、Oblique（傾斜）。Font-weight規(guī)定字體的粗細(xì)。主要有normal、bold（粗體）、自定義粗細(xì)2. CSS為控制文本提供了大量的屬性，這些屬性主要用于控制文本的顏色、修飾、字符間距等外觀。 常用屬性如下：Color設(shè)置文本顏色L

21、etter-spacing設(shè)置字符間距Line-height設(shè)置文本行高Text-align設(shè)置文本的對(duì)齊方式，主要有l(wèi)eft、right、centerText-decoration設(shè)置文本的裝飾效果，主要有overline、underline、line-through （上劃線）（下劃線） （中劃線）Text-indent設(shè)置文本框首行縮進(jìn)Text-transform控制文本的大小寫，主要有Capitalize（單詞首字母大寫）、uppercase（大寫）、lowercase（小寫）Word-spacing設(shè)置單詞間距注：a) .onefont-size:20px; font-family:

22、sans-serif; font-style:oblique .one bfont-weight:normal;font-size:2em觀自在菩薩，般若波羅蜜多心經(jīng)。font-size:20px：絕對(duì)大??；font-size:2em：相對(duì)大小，也可用200%b) 屬性間用” ; ”隔開二、CSS邊框和背景相關(guān)屬性1. 在HTML中有很多元素都有邊框的屬性，比如img元素、塊級(jí)標(biāo)簽元素等。CSS常用的邊框?qū)傩匀缦拢篵order在一個(gè)聲明中設(shè)置所有邊框?qū)傩訠order-width設(shè)置四條邊框的寬度Border-style設(shè)置四條邊框的樣式，主要有dotted（點(diǎn)畫線）、solid（單實(shí)線）、do

23、uble（雙實(shí)線）、dashed（虛線）Border-color設(shè)置四條邊框的顏色Border-left在一個(gè)聲明中設(shè)置所有左邊框?qū)傩?，?duì)應(yīng)還有border-rightBorder-top、border-bottomBorder-left-color設(shè)置左邊框顏色，對(duì)應(yīng)還有border-right-color等三邊顏色Border-left-style設(shè)置左邊框樣式，。Border-left-width控制左邊框?qū)挾?，。注：一個(gè)屬性的不同值用空格分開，如：Border:5px double #ff00ff提示：除了border屬性可以將各個(gè)屬性值寫到一起，CSS的很多其他屬性也可以進(jìn)行類似的操

24、作，例如：font以及后面章節(jié)要提到的padding和margin等屬性都可以統(tǒng)一寫在一起。2. 網(wǎng)頁背景除了使用顏色，同樣可以使用圖片,CSS提供了相關(guān)屬性來對(duì)背景圖片進(jìn)行精確的控制。常用屬性如下：Background在一個(gè)聲明中設(shè)置所有的背景屬性Background-attachment設(shè)置背景圖片是否固定或者隨著頁面的其余部分滾動(dòng),主要有fixed（固定）和scroll（滾動(dòng)，默認(rèn)）兩個(gè)值Background-color設(shè)置元素的背景顏色Background-image設(shè)置元素的背景圖像，主要有url和none兩個(gè)屬性Background-position設(shè)置背景圖像的開始位置，可以指定

25、top left等，也可以指定具體的像素位置Background-repeat設(shè)置是否及如何重復(fù)背景圖像，主要有repeat、repeat-x、repeat-y、no-repeat提示：同樣我們可以把這些背景樣式屬性組合起來寫，更簡潔。 Background: url (1.jpg) no-repeat 200px 25px; ”1.jpg”亦可 (距離左邊框200px,上邊框25px) 屬性值之間用空格隔開三、CSS列表和表格相關(guān)屬性1. CSS為列表元素提供了相關(guān)的屬性來進(jìn)行操作，常用屬性如下：List-style在一個(gè)聲明中設(shè)置所有的列表屬性List-style-image將圖像設(shè)置為列

26、表項(xiàng)標(biāo)記，主要有url值List-style-position設(shè)置列表項(xiàng)標(biāo)記的位置，主要有outside和inside兩個(gè)值List-style-type設(shè)置列表項(xiàng)的類型，主要有disc、circle、square、decimal、decimal-leading-zero、lower-roman、upper-roman、lower-greek、lower-latin、upper-latin、armenian、georgian、none注： List-style-image和List-style-type不能同時(shí)出現(xiàn)2. CSS為表格元素提供了相關(guān)的屬性來進(jìn)行操作，常用屬性如下：Border-c

27、ollapse設(shè)置是否把表格邊框合并為單一的邊框Border-spacing設(shè)置分隔單元格邊框的距離Caption-side設(shè)置表格標(biāo)題的位置Empty-cells設(shè)置是否顯示表格中的空單元格注：border-collapse和border-spacing不要同時(shí)使用四、CSS常用偽類別屬性1. 對(duì)標(biāo)簽提供了相關(guān)可制動(dòng)態(tài)效果的CSS偽類別屬性，常用屬性如下：a:link超鏈接的普通樣式，默認(rèn)a:visited被點(diǎn)擊過的超鏈接樣式a:hover鼠標(biāo)指針經(jīng)過超鏈接上時(shí)的樣式a:active在超鏈接上單擊時(shí)（不要放開），即“當(dāng)前激活”時(shí)超鏈接的樣式注： ：#代表空的超鏈接，默認(rèn)回到本頁面頂部2. 寬

28、度和高度是針對(duì)塊級(jí)標(biāo)簽設(shè)定的，對(duì)行級(jí)標(biāo)簽無效；若要對(duì)行級(jí)標(biāo)簽設(shè)置，則需用在行級(jí)標(biāo)簽的CSS屬性設(shè)置中加入”display:block;”即可將行級(jí)標(biāo)簽轉(zhuǎn)換為塊級(jí)標(biāo)簽。如，#as adisplay:block; width:5oopx; height:; 同樣，塊級(jí)轉(zhuǎn)行級(jí)：”inline”；當(dāng)設(shè)display:none，即將該元素設(shè)為隱藏。第四節(jié) CSS定位和DIV布局一、 盒子模型1. 我們可以把頁面中的元素都看成一個(gè)盒子，占據(jù)著一定的頁面空間，這些占據(jù)的空間往往比單純的內(nèi)容要大。換句話說，我們可以調(diào)整盒子的邊框和距離的參數(shù)來調(diào)節(jié)盒子的位置。邊界（margin）邊框（border）盒子模型填充

29、（padding）內(nèi)容（content） 總結(jié)：從圖中可以分析得出：一個(gè)盒子的寬度（或高度）是由content+padding+border+margin，并且對(duì)于任何一個(gè)盒子，都可以分別設(shè)定4條邊各自的padding、border、margin。因此我們利用好盒子的這些屬性，就能很好地實(shí)現(xiàn)各種各樣的排版效果。2. Border的屬性主要有3個(gè)，分別是color、width、style，通常在設(shè)置border時(shí)常常將三個(gè)屬性進(jìn)行很好的配合，才能達(dá)到良好的效果。3. Padding 用于控制content與border之間的距離，有padding-top、padding-right 、paddi

30、ng-bottom、padding-left。（上右下左）可同時(shí)設(shè)置，如：padding:10px 10px 20px 40px（順時(shí)針設(shè)置，同上） 若padding:10px 是指上右下左都是10px4. Margin 指的是元素與元素之間的距離。注意： 兩個(gè)塊級(jí)元素之間的距離不是margin-bottom與margin-top的距離和，而是而這種的較大者。 但兩個(gè)行級(jí)元素之間的距離是margin-left與margin-right的距離和。例margin:0px 2px; /*相當(dāng)于0px 2px 0px 2px （上右下左）*/margin:0px auto; /*上下：0px;左右：a

31、uto*/background:#789; /*等同于#778899*/其實(shí)margin除了設(shè)置正數(shù)以外，也可以設(shè)置負(fù)數(shù)。當(dāng)設(shè)置為負(fù)數(shù)時(shí)，會(huì)使得塊向反方向移動(dòng)，甚至覆蓋在另外的塊上。l 提示：當(dāng)塊之間是父子關(guān)系，通過設(shè)置子塊的margin為負(fù)數(shù)，可以使得子塊從父塊中“分離”出來。二、 元素定位網(wǎng)頁中各種元素都必須有自己的位置，從而搭建出整個(gè)網(wǎng)頁的結(jié)構(gòu)。在這里我們介紹使用CSS的float、position和z-index屬性來進(jìn)行塊元素的定位。1. Float定位是CSS排版中重要的手段。屬性float的值很簡單，可以設(shè)置為left、right或者默認(rèn)值none，當(dāng)設(shè)置了元素向左或向右浮動(dòng)時(shí)，元素會(huì)向其父元素的左側(cè)或右側(cè)靠近。強(qiáng)調(diào)：float屬性在文字排版和布局排版中經(jīng)常使用到，要想學(xué)好頁面的布局，float屬性必須用的很熟練。 當(dāng)一個(gè)塊級(jí)元素son1設(shè)置了float，就變成了行級(jí)元素，它的寬度縮短，僅僅是它的內(nèi)容本身長度加上自己的padding.對(duì)于父容器而言，它已經(jīng)不屬于父塊了，所以在其下面的元素son2會(huì)上來，它內(nèi)部的內(nèi)容圍繞在son1周圍，并且保持著son1所設(shè)置的margin距離。 若將子塊son1和son