csshtml基礎(chǔ)培訓(xùn)盒子模型定位模型.ppt

HTML基礎(chǔ)介紹,HTML 與 CSS,CSS樣式應(yīng)用,盒子模型,定位模型,表格解析,附加,HTML簡介,HTML（Hyper Text Markup Language）是建立發(fā)表聯(lián)機(jī)文檔采用的語言， 稱為超文本標(biāo)識語言。 HTML被用來結(jié)構(gòu)化信息例如標(biāo)題、段落和列表等等，也可用來在一定程度上描述文檔的外觀和語義。 （側(cè)重于描述“結(jié)構(gòu)、語義”而非樣式）。 當(dāng)前版本為html4、html5目前還是個(gè)草案，也將是未來的標(biāo)準(zhǔn)。 xhtml規(guī)范編寫，卻用html解析： text/html，application/xhtml+xml，但是ie對application/xhtml+xml不支持。 而xhtml嚴(yán)格的文檔規(guī)范，更加容易閱讀，而且清晰的文檔結(jié)構(gòu)對于運(yùn)用css也很重要。,Xhtml 簡介,XHTML ： (eXtensible HyperText Markup Language）可擴(kuò)展超文本置標(biāo)語，是一種置標(biāo)語言，表現(xiàn)方式與超文本置標(biāo)語言（HTML）類似，不過語法上更加嚴(yán)格。 比如現(xiàn)在運(yùn)用的Xhtml1.1、 Xhtml1.0是對html4的改進(jìn)版，采用了更嚴(yán)格的xml規(guī)則。他們都是w3c推薦的規(guī)范。,Html、xhtml的區(qū)別：,元素、屬性必須小寫， 必須有結(jié)束標(biāo)簽； 屬性值必須加冒號“ ”、 不能使用沒有值的屬性（圖像映射的 ismap 樣式） Xhtml名稱空間必須在中聲明（如：） 不能省略body head Title必須放在在head第一個(gè)元素位置 唯一標(biāo)示元素用id不要用name。 元素不能交叉here is an emphasized paragraph.。 特殊字符用實(shí)體引用（如 :[等）,Xhtml的DTD文檔定義,XHTML 1.0：三種文檔定義 嚴(yán)格（不能使用html格式元素（font、table、center等），必須使用樣式表來格式化文檔） 過渡（可以使用格式化文檔）： 框架（可以使用格式化、還允許在網(wǎng)頁中定義框架元素frameset 、frame iframe 過渡型也支持） XHTML 1.1：只有一種（極其嚴(yán)格的方法來創(chuàng)建高度結(jié)構(gòu)化的網(wǎng)頁）： ,HTML的結(jié)構(gòu),HTML把元素劃分為3個(gè)主要類：結(jié)構(gòu)化元素、塊狀元素和內(nèi)聯(lián)元素。 核心的結(jié)構(gòu)化元素有：、和。中放的是關(guān)于文檔的信息，文檔內(nèi)容放在中。在頭部元素設(shè)計(jì)模式中我們會討論頭部元素。 塊狀元素還分為3種：結(jié)構(gòu)化的、多目標(biāo)的和終端的。 內(nèi)聯(lián)元素也有3種主要的類型：語義化、排列順序、內(nèi)聯(lián)塊狀。,塊狀元素,包括以下3類塊狀元素： 結(jié)構(gòu)化塊狀元素 ： （只表明結(jié)構(gòu)、不表示內(nèi)容） 多目標(biāo)塊狀元素 ： 定義 （用于擴(kuò)展或終止結(jié)構(gòu)，可包含塊狀元素或內(nèi)容不建議有混合內(nèi)容（只有文本和內(nèi)聯(lián)元素才能構(gòu)為內(nèi)容） 終端塊狀元素 ： 定義詞匯 表格標(biāo)題 （不能再包含塊狀元素、只能包含文本和內(nèi)聯(lián)元素、它表達(dá)的主要是語義）,內(nèi)聯(lián)元素,包括以下3種主要的內(nèi)聯(lián)元素類型和6種次要類型 內(nèi)聯(lián)語義 包括以下幾種元素和文本的組合，如果只是為了達(dá)到某種視覺效果而使用這些標(biāo)簽的話，建議使用樣式表，那么做會達(dá)到更加豐富的效果。 重要 ： 詞組 ： 單詞 ： 字符 ： 內(nèi)聯(lián)排列順序 ： 內(nèi)聯(lián)塊狀 ： 包括可替代元素和表單控制元素： 替代 ： （可用外部內(nèi)容替代） 控制 ： ,HTML基礎(chǔ)介紹,HTML 與 CSS,CSS樣式應(yīng)用,盒子模型,定位模型,表格解析,附加,CSS簡介,CSS : Cascading Style Sheets . 層疊（級聯(lián)）樣式表. 是控制網(wǎng)頁布局樣式的基礎(chǔ)，真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語言。精確到像素級控制。,CSS選擇符,1.通配選擇符 語法： * sRules *lang=fr font-size:14px; width:120px; *.div text-decoration:none; 2.類型選擇符 語法： E sRules 說明： 類型選擇符。以文檔語言對象(Element)類型作為選擇符。 示例： td font-size:14px; width:120px; a text-decoration:none; ,CSS選擇符,3.屬性選擇符 語法： E attr sRules E attr = value sRules E attr = value sRules 說明： 屬性選擇符。 選擇具有 attr 屬性的 E 選擇具有 attr 屬性且屬性值等于 value 的 E 選擇具有 attr 屬性且屬性值為包含value的E,CSS選擇符,4.包含選擇符（子孫） 語法： E1 E2 sRules 說明： 包含選擇符。選擇所有被 E1 包含的 E2 。即 E1.contains(E2)=true 。 示例： table td font-size:14px; 5.子對象選擇符 語法： E1 E2 sRules 說明： 子對象選擇符。選擇所有作為 E1 子對象的 E2 。 示例： body p font-size:14px; ,CSS選擇符,6.ID選擇符 語法： #ID sRules #note font-size:14px; width:120px; 7.類選擇符 語法： E.className sRules div.note font-size:14px; ,CSS選擇符,8.選擇符群組 語法： E1 , E2 , E3 sRules 說明： 選擇符分組。將同樣的定義應(yīng)用于多個(gè)選擇符，可以將選擇符以逗號分隔的方式并為組。 示例： .td1,div a,body font-size:14px; td,div,a font-size:14px; ,CSS選擇符,9.偽類及偽對象選擇符(稱之為偽，因?yàn)樗x中的不知整個(gè)元素，是元素中的一部分內(nèi)容、或某一狀態(tài)) 語法： E : Pseudo-Classes sRules E : Pseudo-Elements sRules 說明： 偽類及偽對象選擇符。 偽類選擇符。:link :hover :active :visited :focus :first-child :first :left :right :lang。 偽對象(偽元素)選擇符。:first-letter :first-line。 示例： div:first-letter font-size:14px; a.fly :hover font-size:14px; color:red; ,CSS選擇符,附加： （ie6中：只支持 群組逗號表示、后代選擇符 空格表示 ），ie6對偽類的支持也只能在a上。 A標(biāo)簽的偽類選擇符定義順序，有一定先后為： a:link a:visited a:hover a:active a:focus Las Vegas Hells Angels Fight 拉斯 維加斯 魔鬼 天使 之戰(zhàn) LoVeHAte link:連接平常的狀態(tài) active:連接被按下的時(shí)候 a:active（ie中獲得焦點(diǎn)） a:focus（非ie獲得焦點(diǎn)）,6個(gè)級別： 1：！important 2：style屬性 3：id選擇符 4：類、屬性或偽類選擇符 5：元素選擇符 6：只有一個(gè)通配選擇符* 原則： 1：越具體到某一個(gè)元素的樣式，優(yōu)先級別越高。 2：同一個(gè)級別的，以其高級別的選擇符個(gè)數(shù)多少來判斷 如：#00 *.c100 *.c10 高于 #00 *.c100 div p span 以為前者的類選擇符多。 3：按照樣式所處的位置判斷（用于當(dāng)前兩條無法判斷時(shí)）： 中 中的import 的文件中的import 4：后面的覆蓋前面的。 附加：css 的樣式會覆蓋html中屬性的樣式，如 會被 style=”width:200xp;” 覆蓋,樣式優(yōu)先級,HTML基礎(chǔ)介紹,HTML 與 CSS,CSS樣式應(yīng)用,盒子模型,定位模型,表格解析,附加,盒子模型,盒子模型： 包括width/height, padding, border, margin。 有標(biāo)準(zhǔn)盒子模型 和 ie盒子模型之分。,盒子模型,ie盒子模型 它的width、height是包括padding、border的，標(biāo)準(zhǔn)盒子的高寬是不包括padding和border,六種盒子呈現(xiàn)方式,內(nèi)聯(lián)盒子 內(nèi)聯(lián)塊狀盒子 塊狀盒子 表格盒子 絕對定位盒子 浮動(dòng)盒子 研究 width/height, padding, border, margin在不同狀況下的不同特性。,內(nèi)聯(lián)盒子,內(nèi)聯(lián)元素特點(diǎn): 其盒子模型是自適應(yīng)其內(nèi)容的，不會獨(dú)占行。 height、width和margin-top、margin-bottom是無效的。 （ border、padding并不能增加它的行高，只會讓它和其它行交叉 或則溢出父元素， 但可以通過line-height來間接控制其高度，line-height的默認(rèn)值由內(nèi)聯(lián)元素的文字或圖片高而定，） file:/F:/html%20css%20demo/Chapter%2004%20-%20BOX%20MODELS/Inline%20Box/example.html 符：從實(shí)例可以看出橫向上屬性margi-left、margi-right是有效的。 但height、width和margin-top、margin-bottom是無效的 magin-top實(shí)際上是沒有效果，并不會控制自己的偏移。,塊狀盒子,塊狀盒子：block 獨(dú)占行，width：auto會自動(dòng)擴(kuò)展填充滿容器，填充滿容器 Margin：auto width：固定值 可居中， 上下兩行間的margin-top和margin-bottom會相互抵消，如果都是正的，則他們的間距以較大的一個(gè)為準(zhǔn)，不會是兩個(gè)之和。 附加：margin可以有負(fù)值。Border、padding是不行的。 file:/F:/html%20css%20demo/Chapter%2004%20-%20BOX%20MODELS/Block%20Box/example.html,內(nèi)聯(lián)塊狀盒子,內(nèi)聯(lián)塊狀元素：inlne-block 雷同于塊狀元素，只是它不會獨(dú)占一行。 height、width和margin-top、margin-bottom都是有效的。,表格盒模型,表格：display：table 在標(biāo)準(zhǔn)里table沒有padding有margin 、單元格有padding但沒有margin。 table的width、height是包括border的。 Table-layout：fixed / auto 居中：margin：0 auto（表格盒模型width：auto雖然沒有自動(dòng)拉伸的特性，但margin：auto是和塊元素一樣是自動(dòng)拉伸的） 獨(dú)占行，但width不充滿整行； file:/F:/html%20css%20demo/Chapter%2004%20-%20BOX%20MODELS/Table%20Box/example.html table的width、height是包括border的： file:/F:/html%20css%20demo/Chapter%2004%20-%20BOX%20MODELS/Table%20Box/example2.html,絕對定位盒子模型,Position：absolute 它不會對其它的元素構(gòu)成影響，分屬不同的排列層文檔流。 相對于最近已經(jīng)定位的祖先元素的padding開始進(jìn)行定位（并不是從它的內(nèi)寬開始） Z-index，left、right、top、bottom （符加說明： absolute偏移是相對于最近的已經(jīng)定位的祖先元素，同樣其width、height等百分比的尺寸也是相對于最近的已經(jīng)定位的祖先元素，而不是父元素。 z-index也一樣相對于其最近的已經(jīng)定位的祖先元素 進(jìn)行堆疊設(shè)置，同時(shí)只能用于已定位元素。） 什么是“已經(jīng)定位的元素”？ 把position設(shè)置為relative或absolute或fixed， position : static | absolute | fixed | relative 其中static不算因?yàn)樗皇琼樞蚪馕觥?絕對定位盒子模型,原始位置絕對定位（即absolute但沒有設(shè)置left right top bottom值）， 不代表它的left right top bottom會是0，而是在原來順序位置上， 同時(shí)作為絕對定位盒子模型進(jìn)行解析。 絕對定位的子元素不會撐大絕對定位的父元素。 file:/F:/html%20css%20demo/Chapter%2004%20-%20BOX%20MODELS/Absolute%20Box/example.html,浮動(dòng)盒模型,Float ： 按標(biāo)準(zhǔn)它將使元素脫離原來的排序、文檔流，獨(dú)立在浮動(dòng)層上，所以它不會撐大非float的父元素 （ie6會；火狐不會可以在浮動(dòng)元素下加clear的元素，讓其撐大。） 鄰近兩個(gè)float元素的margin是不會相抵消。 它不會影響塊元素的布局，塊元素會當(dāng)它不存在一樣的占用它的空間，但它會令內(nèi)聯(lián)元素和表格盒模型元素繞開它。 file:/F:/html%20css%20demo/Chapter%2004%20-%20BOX%20MODELS/Floated%20Box/example.html 浮動(dòng)的子元素會撐大浮動(dòng)的父元素,HTML基礎(chǔ)介紹,HTML 與 CSS,CSS樣式應(yīng)用,盒子模型,定位模型,表格解析,附加,定位模型 Position,position : static | absolute | fixed | relative 它和float結(jié)合使用出現(xiàn)6中定位模型： 靜態(tài)：專門用于覆蓋其它值，恢復(fù)元素原始排列 絕對 固定 相對：相對于該元素的順序解析時(shí)的位置，而且保留原有位置 不會被其它元素再利用 浮動(dòng) 相對浮動(dòng)（ relative float ）：基于原浮動(dòng)后位置的相對偏移。 某一元素獲得定位可以解決很多ie瀏覽器中莫名奇妙的問題 比如：file:/F:/SourceCode/Chapter%2007%20-%20POSITIONING1/Atomic/example.html,HTML基礎(chǔ)介紹,HTML 與 CSS,CSS樣式應(yīng)用,盒子模型,定位模型,表格解析,附加,表格的解析方式,Table-layout： Auto：自動(dòng)布局，根據(jù)單元格內(nèi)容的最大最小寬度，及設(shè)定的單元格width對列布局。 fixed：只根據(jù)第一行的單元格設(shè)定的width進(jìn)行列布局。內(nèi)容超出只能被hidden（設(shè)置overflow:scroll也只在某些瀏覽器中有效），不會去考慮最小內(nèi)容寬度，因而有些列甚至完全不渲染。,Fixed表格布局,一切以第一行的width設(shè)值為最高準(zhǔn)則，如果各列固定width之和大于table的width會撐大width。 在fixed中，固定width列會被先分配空間，百分比width列只在完全滿足固定width列之后再分配空間（設(shè)置被隱藏）。,Auto表格布局,在Table-layout ：auto中： 各種width設(shè)置方式的優(yōu)先級：從低到高：自動(dòng)固定百分比 file:/F:/html%20css%20demo/Chapter%2016%20-%20COLUMN%20LAYOUTS/Column%20Width/example.html 1：沒有設(shè)置width時(shí)，列寬度包裹內(nèi)容。 2：當(dāng)各列的width之和 與 table的width有沖突時(shí)，各列的width會自動(dòng)按比例縮放，當(dāng)然fixed布局除外。 2：百分比比例列：當(dāng)百分比小于100%時(shí)，會按百分比列自動(dòng)擴(kuò)展到100%；如果大于100%，則會截去使其超過100%的后幾個(gè)列位auto，將剩余空間給前面幾列未超過100%列 按其設(shè)定的百分比分配。 比如： 其解析方式為：90%+20%100%, 則td3 按內(nèi)容最小寬度分配 10px， 甚于470px，90%,100%, 則290*90%分配給td1，余下的全部給td2. file:/F:/html%20css%20demo/Mixed%20Column%20Layouts/example.html,HTML基礎(chǔ)介紹,HTML 與 CSS,CSS樣式應(yīng)用,盒子模型,定位模型,表格解析,附加,附加,1：有些可繼承： 修飾內(nèi)容（特別是文本內(nèi)容）一般都是可繼承的（如：font、text-transform、line-height、letterpacing），修飾布局的一般都不可繼承（比如:margin,padding width,height,float clear等） 2：都有其默認(rèn)值、不同瀏覽器默認(rèn)值會有所不同。（引入基準(zhǔn)樣式，屏蔽這些默認(rèn)值） 3：簡寫屬性會把所有值賦給其所以詳細(xì)屬性。 Background：blue-則等同于background-color：blue，background-imge：none，background-positi