day01-_起源和結(jié)構(gòu)
結(jié)構(gòu)：Xhtml xml
表現(xiàn)：CSS
行為：DOM ECMAScript
以上都屬于WEB標(biāo)準(zhǔn)
HTML 指的是超文本標(biāo)記語言（Hyper Text Markup Language）
XHTML 指可擴(kuò)展超文本標(biāo)記語言（標(biāo)識語言）
（EXtensible Hyper Text Markup
Language）
HTML5指的是HTML的第五次重大修改（第5個版本）是W3C與WHATWG合作的結(jié)果
WHATWG網(wǎng)頁超文本應(yīng)用技術(shù)工作小組是一個以推動網(wǎng)絡(luò)HTML5標(biāo)準(zhǔn)為目的而成立的組織
在2004年由Opera渴杆、Mozilla基金會和蘋果這些瀏覽器廠商組成召川。
塊元素：獨(dú)占一行，可設(shè)寬高
行元素：不獨(dú)占一行萄窜，大小由內(nèi)容決定，不可設(shè)寬高
單標(biāo)簽：換行<br /> 水平線
注釋：Ctrl + / Ctrl + Shift + /
空格： 小于號：<大于號：>版權(quán)：©商標(biāo)®引號"元￥
加粗：???
傾斜：????? ?
1）常規(guī)標(biāo)記
<標(biāo)記? 屬性=“屬性值”?? 屬性=“屬性值”></標(biāo)記>
2）空標(biāo)記
<標(biāo)記 屬性=“屬性值”? />
說明
1）寫在<>中的第一個單詞叫做標(biāo)記爽雄，標(biāo)簽隙咸，元素
2）標(biāo)記和屬性用空格隔開，屬性和屬性值用等號連接侥蒙，屬性值必須放在“”號內(nèi)
3）一個標(biāo)記可以沒有屬性也可以有多個屬性，屬性和屬性之間不分先后順序
4）空標(biāo)記沒有結(jié)束標(biāo)簽匀奏，用“/”代替
ul 無序列表
屬性type：
disc：默認(rèn)值實(shí)心圓square：實(shí)心正方塊circle：空心圓none：無
ol 有序列表
屬性type：
1：默認(rèn)值A(chǔ)：大寫排序a：小寫排序I：大羅馬排序i：小羅馬排序
start：值為幾就是從第幾項(xiàng)開始的
dl 自定義列表 dt 列表名 dd 列表項(xiàng)
target：頁面打開方式鞭衩，默認(rèn)值：_self? 屬性值：_blank 新窗口打開
img src：文件路徑
alt：文件提示
title：鼠標(biāo)滑過時(shí)提示的信息
圖片路徑的四種方式
1）當(dāng)當(dāng)前文件XX.html與目標(biāo)文件X.jpg在同一目錄下，直接書寫目標(biāo)文件全稱及其后綴名。
2）當(dāng)當(dāng)前文件XX.html與目標(biāo)文件X.jpg所處的文件夾XX在用同一目錄下论衍，寫目標(biāo)文件所處的文件夾名字/書寫目標(biāo)文件全稱及其后綴名瑞佩。
3）當(dāng)當(dāng)前文件所處的文件夾與目標(biāo)文件在同一目錄時(shí)，寫../書寫目標(biāo)文件全稱及其后綴名坯台。
4）當(dāng)當(dāng)前文件所處的文件夾與目標(biāo)文件所處的文件夾在同一目錄下時(shí)寫../文件夾名/圖片名及其后綴
表格的組成
caption（表格標(biāo)題）
thead（表頭）→→→tr（行）→→→th（表頭單元格）
tbody（表主體）→→→tr（行）→→→td（單元格）
tfoot（表腳注）→→→tr（行）→→→td（單元格）
數(shù)據(jù)表格的相關(guān)屬性
1）width="表格的寬度"
2）height="表格的高度"
3）border="表格的邊框"
4）bgcolor="表格的背景色"
bordercolor="表格邊框的顏色"
5）cellspacing="單元格與單元格之間的間距"
6）cellpadding="單元格與內(nèi)容之間的空隙"
7）水平對齊方式：align="left(默認(rèn)值)/center/right"
垂直對齊方式：valign="bottom/middle(默認(rèn)值)/top"（放td炬丸、tr不可以放table）
8）合并單元格屬性：colspan="所要合并的單元格的列數(shù)" 合并列、rospan="所要合并單元格的行數(shù)"合并行捂人。
表單的應(yīng)用
post與get的區(qū)別
1）get是從服務(wù)器上獲取數(shù)據(jù)的御雕，post是向服務(wù)器傳送數(shù)據(jù)
2）get是把參數(shù)數(shù)據(jù)隊(duì)列加到提交表單的ACTION屬性所指的url中，在url中可以看到滥搭。post是通過HTTP? post機(jī)制酸纲，用戶看不到這個過程
3）get傳送的數(shù)據(jù)量較小，不能大于2kb瑟匆。post傳送的數(shù)據(jù)量較大闽坡，一般被默認(rèn)為不受限制
4）get安全性非常低，post安全性較高愁溜。但是執(zhí)行率卻比post方法好
表單框
<form
name="表單名稱"method="post/get" action="">
????? name表單名稱
????? action把數(shù)據(jù)提交到哪里的路徑
????? method提交到action所指向的url中的方式
1）文本框
<input
type="text" value="默認(rèn)值"/>
<input
type="text" placeholder="里面默認(rèn)顯示的字"/>（失焦）
2）密碼框
3）提交按鈕
<input
type="submit" value="按鈕內(nèi)容"/>
4）重置按鈕
<input
type="reset" value="按鈕內(nèi)容"/>
5）普通按鈕
<input
type="button" value="按鈕內(nèi)容"name=""/>
6）普通按鈕2
<button>名字
7）單選框/單選按鈕
單選按鈕里的name屬性必須寫
同一組單選按鈕的name屬性值必須一樣
checked="checked"(默認(rèn)選中)????????? disabled="disabled"禁用
8）復(fù)選框
復(fù)選框里的name屬性必須寫
同一組復(fù)選框的name屬性值必須一樣
checked="checked"(默認(rèn)選中)????????? disabled="disabled"禁用
9）下拉菜單
??? 菜單內(nèi)容
10）多行文本框（文本域）
<textarea
name="textareal" cols="字符寬度" rows="行數(shù)">
★改變input里面的placeholder的顏色：
????? Input::-webkit-input-placeholder{
????????????????? Color:顏色;
}
Outline:0;
Outline:2px solid #f99;
CSS（cascading style sheets）層疊樣式表
內(nèi)部樣式
/*css語句*/?????
注：使用style標(biāo)記創(chuàng)建樣式時(shí)疾嗅，最好將該標(biāo)記寫在<head></head>
內(nèi)聯(lián)樣式表(行間樣式，行內(nèi)樣式冕象，嵌入式樣式)
語法：
<標(biāo)簽style="屬性：屬性值代承；屬性：屬性值；"></標(biāo)簽>
外部樣式
方法一：
<link
rel="stylesheet" type="text/css" href="目標(biāo)文件的路徑及文件名全稱"/>
方法二：
@import url(目標(biāo)文件的路徑及文件名全稱);
注：@和import之間沒有空格 url和小括號之間也沒用空格渐扮，必須結(jié)尾以分號結(jié)束
link和@import導(dǎo)入外部樣式的區(qū)別
差別1：本質(zhì)的區(qū)別：link屬于XHMTL標(biāo)簽论悴。而@import完全是CSS提供的一種方式。link標(biāo)簽除了可以加載CSS外墓律，還可以做很多其他的事情膀估，比如定義RSS，定義rel鏈接屬性等耻讽，@import就只能加載CSS察纯。
差別2：加載順序的區(qū)別：當(dāng)一個頁面被加載的時(shí)候（就是被瀏覽的時(shí)候），link引用的CSS會同時(shí)被加載针肥，而@import引用的CSS會等到頁面全部被下載完再被加載饼记。所以有時(shí)候?yàn)g覽@import加載CSS頁面時(shí)會開始沒有樣式
差別3：兼容性的差別：@import是CSS2.1提出的，所以老的瀏覽器不支持慰枕，@import只在IE5以上的才能識別握恳，而link標(biāo)簽無此問題。
差別4：使用dom控制樣式時(shí)的差別：當(dāng)使用javascript控制dom去改變樣式的時(shí)候捺僻，只能使用link標(biāo)簽，因?yàn)锧import不是dom可以控制的
內(nèi)聯(lián)的優(yōu)先級最大，內(nèi)部和外部是看書寫順序的匕坯，后來居上束昵，就近原則。
!important 優(yōu)先級是最大的葛峻，等于外掛锹雏！
1）元素選擇符/類型選擇符（element選擇器）
語法：元素名稱{屬性：屬性值;}
說明
a）元素選擇符就是以文檔語言對象類型作為選擇符，即使用結(jié)構(gòu)中元素名稱作為選擇符
例如body术奖、div礁遵、p、img采记、em佣耐、strong、span......等
b）所有的頁面元素都可以作為選擇符
用法
a）如果想改變某個元素得默認(rèn)樣式時(shí)唧龄，可以使用類型選擇符;
b）當(dāng)統(tǒng)一文檔某個元素的顯示效果時(shí)兼砖，可以使用類型選擇符;
2）id選擇器
語法：#id名{屬性：屬性值;}
說明：
a）當(dāng)我們使用id選擇符時(shí)，應(yīng)該為每個元素定義一個id屬性既棺，id具有唯一性
b）id選擇符的語法格式是"#"加上自定義的id名
c）起名時(shí)要取英文名讽挟，不能用關(guān)鍵字：（所有的標(biāo)記和屬性都是關(guān)鍵字）
d）一個id名稱只能對應(yīng)文檔中的一個具體的元素對象，因?yàn)閕d只能定義頁面中某一個的唯一元素對象
e）最大的用處：創(chuàng)建網(wǎng)頁的外圍結(jié)構(gòu)
3）class選擇器
語法：.class名{屬性：屬性值;}
說明：
a）當(dāng)我們使用類選擇符時(shí)丸冕，應(yīng)先為每個元素定義一個類名稱
b）類選擇符的語法格式是：
用法：class選擇符更適合定義一類樣式
4）*通配符
語法：*{屬性：屬性值;}
說明：通配選擇符的寫法是"*"耽梅，其含義就是所有元素
用法：常用來重置樣式一般情況下不使用，原因負(fù)載過大胖烛，如果必須使用前面一定要加一個范圍
5）群組選擇器
語法：選擇符1眼姐，選擇符2，選擇符3{屬性：屬性值;}
說明：當(dāng)有多個選擇符應(yīng)用相同的樣式時(shí)洪己，可以將選擇符用","分隔的方式妥凳，合為一組
6）包含選擇器
語法：選擇符1 選擇符2{屬性：屬性值;}
說明：選擇符1和選擇符2用空格隔開，含義就是選擇符1中包含的所有選擇符2
div p 后代選擇器匹配所有div下的p元素答捕，div和p之間用空格分隔
div>p 子元素選擇器逝钥，匹配所有div下的子元素p
div+p 毗鄰元素選擇器，匹配所緊隨div元素之后的同級元素p
div[title] 匹配所有具有title屬性的div元素拱镐，不考慮它的值
div[title=val] 匹配所有title屬性等于"val"的div元素
7）偽類選擇器
語法：
a：link{屬性：屬性值;}超鏈接的初始狀態(tài)
a：visited{屬性：屬性值;}超鏈接被訪問后的狀態(tài)
a：hover{屬性：屬性值;}鼠標(biāo)劃過超鏈接的狀態(tài)
a：active{屬性：屬性值;}鼠標(biāo)按下時(shí)超鏈接的狀態(tài)
說明：
a）當(dāng)這四個超鏈接偽類選擇符聯(lián)合使用時(shí)艘款，應(yīng)注意他們的順序正常順序?yàn)椋篴：link，a：visited沃琅，a：hover哗咆，a：active
錯誤的順序有時(shí)會使超鏈接的樣式失效
b）為了簡化代碼，可以使用偽類選擇符中國相同的聲明提出來放在a選擇符中
text-decoration：none 去除下劃線
2）:nth-child(value){
????? //選擇一個或多個特定的子元素益眉，第一個為1;
}
選擇符的權(quán)重
css中用四位數(shù)字表示權(quán)重晌柬，權(quán)重的表達(dá)方式如：0,0,0,0
類型選擇符的權(quán)重為0001
class選擇符的權(quán)重為0010
id選擇符的權(quán)重為0100
!important的權(quán)重為1000
偽類選擇符的權(quán)重為0010
偽元素選擇符的權(quán)重為0010
包含選擇符的權(quán)重：為包含選擇符的權(quán)重之和
內(nèi)聯(lián)樣式的權(quán)重為1000
繼承樣式的權(quán)重為0000
CSS的三大特性
1）繼承性
作用：子元素可以繼承父元素的樣式
text-辙谜，font-，line-這些元素開頭的都可以繼承疾呻，以及color屬性
2）特殊性
a）a標(biāo)簽的顏色不能繼承工腋，必須對a標(biāo)簽本身進(jìn)行設(shè)置
b）h標(biāo)簽的字體大小不能修改，必須對h標(biāo)簽本身進(jìn)行修改
3）層疊性
是瀏覽器處理沖突的一個能力屿衅，如果一個屬性通過兩個選擇器設(shè)置到用一個元素上埃难，那么這個時(shí)候一個屬性就會將另一個屬性層疊掉
4）優(yōu)先級
!important
> 行內(nèi)樣式 >
id選擇器>class類選擇器 > 標(biāo)簽選擇器 > 通配符 > 繼承
5）權(quán)重
作用：多個選擇器組合以后的優(yōu)先級
算法：（0,0,0,0）==》第一個0是important的個數(shù)，第二個0是id選擇器的個數(shù)涤久，第三個0對應(yīng)的類選擇器的個數(shù)涡尘，第四個0對應(yīng)的是標(biāo)簽選擇器的個數(shù)，就是當(dāng)前選擇器的權(quán)重响迂。
權(quán)重是優(yōu)先級的算法考抄，層疊是優(yōu)先級的表現(xiàn)
選擇器的工作原理：選擇器是從右往左查找
CSS核心屬性
文本大小：{font-size：12px/14px/16px}
說明：
1）屬性值為數(shù)值型時(shí)栓拜，必須給屬性值加單位座泳，屬性值為0時(shí)除外
2）單位還可以是pt，9pt=12px;
3）為了減小系統(tǒng)間的字體顯示差異幕与，IE
Netscape Mozilla的瀏覽器制作商與1999年召開會議挑势，共同確定16px/ppi為標(biāo)準(zhǔn)字體大小默認(rèn)值，即1em
默認(rèn)情況下啦鸣，1em=16px潮饱，0.71em=12px
4）使用絕對大小關(guān)鍵字
xx-small=9px
x-small? =11px
small??? =13px
medium?? =16px
large??? =19px
x-large? =23px
xx-large=27px
文本顏色：{color：顏色值;}
說明：
用十六進(jìn)制表示顏色值：
01 2 3 4 5 6 7 8 9 A B C D E F
顏色模式：光色模式
R? G? B
ff00 00
顏色值的縮寫：
當(dāng)表示三原色的三組數(shù)字同時(shí)相同時(shí)，可以縮寫為三位
當(dāng)用十六進(jìn)制表示顏色值時(shí)诫给，需要在顏色值前加"#"
文本字體：{font-family："字體1","字體2";}
說明：
當(dāng)字體是中文字體時(shí)需加引號
當(dāng)英文字體中有空格時(shí)需加引號如"TimesNew Roman"
windows中文版操作系統(tǒng)下香拉，中文默認(rèn)字體為宋體或者新宋體，英文字體默認(rèn)為Arial
line-height 行高(與高度相等)
文字屬性簡寫：font：12px/1.5em
"宋體";
font屬性的簡寫：字號中狂，行高凫碌，字體
說明：font的屬性值應(yīng)按以下次序書寫(各個屬性之間用空格隔開)
順序：font-style? font-weight?font-size/line-height? font-family
1）簡寫時(shí)，font-size和line-height只能通過斜杠/組成一個值胃榕，不能分開寫
2）順序不能改變 ,這種簡寫法只有在同時(shí)指定font-size和font-family屬性時(shí)才一起作用,如果你沒有設(shè)定font-weight
, font-style 他們會使用缺省值
加粗：{font-weight：bolder/bold/normal/100-900;}
說明：
在css規(guī)范中把字體的粗細(xì)分為9個等級盛险，分別從100-900，其中100對應(yīng)最輕的字體變形勋又，而900對應(yīng)最重的字體變形苦掘。100-500常規(guī)字體600-900加粗字體
傾斜：{font-style：normal常規(guī)字體/italic/oblique傾斜;}
說明：
italic和oblique都表示傾斜，不過oblique的幅度要大一點(diǎn)楔壤。但一般瀏覽器對它們的區(qū)分不是很明顯
檢索或設(shè)置對象中的文本的大小寫
{text-transform：none/capitalize首字母大小寫/uppercase全大寫/lowercase全小寫;}
水平對齊方式{text-align：left/right/center/justify(了解);}
垂直對齊方式{vertical-align：top/bottom/middle;}
行高{line-height：normal/數(shù)值;}
說明：
1）當(dāng)單行文本的行高等于容器高時(shí)鹤啡，可實(shí)現(xiàn)單行文本在容器中垂直居中對齊
2）當(dāng)單行文本的行高小于/大于容器高時(shí)，可實(shí)現(xiàn)單行文本在容器中垂直對齊以上任意位置的定位
文本修飾
text-decoration：none/underline/overline/line-through/blink
underline 下劃線? overline上劃線line-through 刪除線
blink高版本瀏覽器中不支持
段落操作
1）首行縮進(jìn){text-indent：value;}value可以取負(fù)值只對第一行起作用
2）字間距{letter-spacing：value;}控制英文字母或漢字的字距
3）詞間距{word -
spacing：value;}控制英文單詞詞距
列表的樣式
定義列表符號樣式
1）list-style-type：disc/circle/square/none
2）使用圖片作為列表符號：list-style-image：url（路徑）
3）定義列表符號位置：list-style-position：outside/inside
list-style：none（簡寫）
邊框border：1px solid red;
邊框border：粗細(xì)? 線型solid/dashed/dotted/double/none?? 顏色
實(shí)線solid/虛線dashed/點(diǎn)狀線dotted/雙實(shí)線double/無none
border-width
border-style
border-color
border-top/bottom/left/right
border-radius：圓角 寫數(shù)值（20px）或百分比
關(guān)于背景的屬性
1）背景顏色
語法：選擇符{background-color：顏色值;}
2）背景圖片的設(shè)置
語法：background-image：url(背景圖片的路徑及全稱);
插入圖片：屬于網(wǎng)頁內(nèi)容蹲嚣，也就是結(jié)構(gòu)递瑰。
背景圖：屬于網(wǎng)頁的表現(xiàn)背景圖上可以顯示文字祟牲、插入圖片、表格
3）背景圖片的顯示原則
a）容器尺寸等于圖片尺寸泣矛，背景圖片正好顯示在容器中??
b）容器尺寸大于圖片尺寸疲眷，背景圖片將默認(rèn)平鋪，直至鋪滿元素?????
c）容器尺寸小于圖片尺寸您朽，只顯示容器/元素/范圍以內(nèi)的背景圖
背景圖片平鋪屬性
語法：
選擇符{background-repeat：no-repeat/repeat/repeat-x/repeat-y}
no-repeat：不平鋪
repeat：平鋪
repeat-x：橫向平鋪
repeat-y ：縱向平鋪
4）背景圖片的位置
語法：
{background-position：left/center/right/數(shù)值?? top/center/bottom/數(shù)值;}
background-position：值1??? 值2;
水平方向上的對齊方式（left/center/right）或值???
垂直方向上的對齊方式（top/center/bottom）或值
兩個值 ：第一個值表示水平位置的值，第二個值：表示垂直的位置
注：當(dāng)元素小圖片大换淆，寫圖片的某個位置時(shí)：說明：向右方向哗总，向下方向是負(fù)值
5）背景圖的固定
語法：選擇符{background-attachment：scroll(滾動)/fixed(固定);}
6）各屬性的縮寫
語法：選擇符{background：屬性值1?? 屬性值2?? 屬性值3;}
day05_盒子模型
盒模型的概念和組成
盒模型是css布局的基石，它規(guī)定了網(wǎng)頁元素如何顯示以及元素間相互關(guān)系倍试。css定義所有的元素都以擁有可像盒子一樣的外形和平面空間讯屈，即都包含邊框、邊界县习、補(bǔ)白涮母、內(nèi)容區(qū)。這就是盒模型躁愿。
[if !vml]
[endif]
1） padding的使用方法
填充：padding,在設(shè)定頁面中一個元素內(nèi)容到元素的邊緣(邊框) 之間的距離 也稱補(bǔ)白
用法：
a）用來調(diào)整內(nèi)容在容器中的位置關(guān)系
b）用來調(diào)整子元素在父元素中的位置關(guān)系
注：padding屬性需要添加在父元素上
c）padding值是額外加在元素原有大小之上的叛本，如想保證元素大小不變，需從元素寬或高上減掉后添加的padding屬性值
屬性值的4種方式：
??四個值：上??? 右?? 下?? 左 {padding：10px20px 30px? 40px;}
??三個值：上??? 左右??? 下 {padding：10px20px 30px;}
? 二個值：上下??? 左右 {padding：10px20px ;}
??一個值：四個方向padding：2px; /*定義元素四周填充為2px*/
?說明：可單獨(dú)設(shè)置一方向填充??? 如：
上方向padding-top：10px;??? 右方向pahdding-right：10px;???
下方向padding-bottom：10px;?? 左方向padding-left：10px;
?注意：塊元素上下左右都可設(shè)padding彤钟；
但是行元素只能設(shè)左右（input/img除外）
2）margin的使用方法
邊界：margin来候，在元素外邊的空白區(qū)域，被稱為邊距
margin-left：左邊界逸雹，margin-right：右邊界
margin-top：上邊界营搅，margin-bottom：下邊界
屬性值的4種方式：
? 四個值：上?? 右?? 下?? 左 {margin：2px 4px6px 8px;}
? 三個值：上??? 左右??? 下 {margin：2px 4px6px;}
? 二個值：上下??? 左右 {margin：2px4px;}
? 一個值：四個方向 margin：2px;
margin：0 auto;/*在瀏覽器中橫向居中
說明：可單獨(dú)設(shè)置一方向邊界，如：margin-top：10px;
margin值的解析：左右邊界累加梆砸，上下邊界重合
?注意：子元素里面的margin-top转质，會使父元素和他一起下移
第一種解決方式：給父元素加上邊框
第二種解決方式：給父元素加上補(bǔ)白（padding-top：1px）
第三種解決方式：給父元素加overflow：hidden;
3）盒子的實(shí)際大小（公式 w3c中）
寬=左右border+左右padding+width（內(nèi)容寬）
高=上下border+上下padding+height（內(nèi)容高）
day06_盒子模型續(xù)講和浮動
怪異模型
由于各個瀏覽器的設(shè)計(jì)的不同帖世，盒模型在不同的瀏覽器中的表現(xiàn)也不同休蟹，怪異模型是指在E6及更早的IE版本下盒模型的計(jì)算方法，所占空間總寬度等于內(nèi)容+外邊距
標(biāo)準(zhǔn)模型與怪異模型的異同點(diǎn)
相同點(diǎn)：都是由margin狮暑，border鸡挠，padding，content組成
不同點(diǎn)：計(jì)算寬/高度的方法不同搬男，標(biāo)準(zhǔn)模式下盒子的總共寬度是由margin拣展，border，padding缔逛，content想加得來备埃，怪異模型下 總寬度是由content+外邊距得來
box-sizing（現(xiàn)代瀏覽器支持姓惑，IE8以上支持）
1）content-box：此值為其默認(rèn)值，其讓元素維持W3C的標(biāo)準(zhǔn)Box
Model按脚，也就是說元素的寬度/高度（width/height）等于元素邊框高度（border）加上元素內(nèi)邊距（padding）加上元素內(nèi)容寬度/高度（content
width/height）
即：
Element width/height = border+padding+content width/height
2）border-box：此值讓元素維持IE傳統(tǒng)的Box
Model（IE6以下版本）于毙，也就是說元素的寬度/高度等于元素內(nèi)容的寬度/高度。（從上面Box
Model介紹可知辅搬，我們這里的content
width/height包含了元素的border唯沮，padding，內(nèi)容的width/height【此處內(nèi)容寬度/高度=width/height-border-padding】）
浮動屬性
[if !vml]
[endif]
語法：float：none/left/right
浮動的框可以向左向右移動堪遂，直到它的外邊緣碰到包含框或另一個浮動框的邊框?yàn)橹?/p>
浮動框是脫離了普通的文檔流
?浮動的問題的解決方案
浮動元素父元素高度自適應(yīng)（父元素不寫高度時(shí)介蛉，子元素寫了浮動后，父元素會發(fā)生高度塌陷）
1）給父元素添加聲明overflow：hidden溶褪；
2）在浮動元素下方添加空div币旧，并給該元素添加聲明：
clear：both；height：0猿妈；overflow：hidden吹菱；
3）萬能清除浮動法 選擇符：
：after{
content："."
clear：both;
dispaly：block;
height：0;
overflow：hidden;?????? visibility：hidden;}
day07_元素類型和定位
XHTML元素分類
根據(jù)CSS顯示分類，XHTML元素被分為三種類型：
塊狀元素彭则，內(nèi)聯(lián)元素鳍刷，可變元素
塊狀元素（block element）
1）塊狀元素在網(wǎng)頁中就是以塊的形式顯示，所謂塊狀就是元素顯示為矩形區(qū)域贰剥，常用的塊狀元素包括：
div倾剿，dl，dt蚌成，dd前痘，ol，fieldset担忧，（h1-h6）芹缔，p，form瓶盛，hr最欠，colgroup，col惩猫，table芝硬，tr...
2）默認(rèn)情況下，塊狀元素都會占據(jù)一行轧房，通俗的說拌阴，兩個相鄰塊狀元素不會出現(xiàn)并列顯示的現(xiàn)象；默認(rèn)情況下奶镶，塊狀元素會按順序自上而下排列
3）塊狀元素都可以定義自己的寬度和高度
4）塊狀元素一般都作為其他元素的容器迟赃，它可以容納其他內(nèi)聯(lián)元素和其他塊狀元素陪拘，我們可以把這種容器比喻為一個盒子
內(nèi)聯(lián)元素（inline element）（行內(nèi)元素）
1）常見的內(nèi)聯(lián)元素如：a，span纤壁，i左刽，em，strong酌媒，b欠痴，del等
2）內(nèi)聯(lián)元素的表現(xiàn)形式是始終以行內(nèi)逐個進(jìn)行顯示
3）內(nèi)聯(lián)元素沒有自己的形狀，不能定義它的寬和高馍佑，它顯示的寬度斋否、高度只能根據(jù)所包含內(nèi)容的高度和寬度來確定，它的最小內(nèi)容單元也會呈現(xiàn)矩形形狀
4）內(nèi)聯(lián)元素也會遵循盒模型基本規(guī)則拭荤，如可以定義padding，border疫诽，margin舅世，background等屬性，但個別屬性不能正確顯示
可變元素
需要根據(jù)上下文關(guān)系確定該元素是快元素或者內(nèi)聯(lián)元素
元素類型的轉(zhuǎn)換
盒子模型可通過display屬性來改變默認(rèn)的顯示類型
display屬性與屬性值 (18個屬性值)
屬性值：block 奇徒、inline雏亚、inline-block、none摩钙、list-item罢低、table-header-group、table-footer-group....
作用：該屬性設(shè)置或檢索對象元素應(yīng)該生成的盒模型的類型
說明：各屬性值的作用
1）Block塊狀顯示：類似在元素后面添加換行符胖笛，也就是說其他元素不能在其后面并列顯示
2）inline內(nèi)聯(lián)顯示：在元素后面刪除換行符网持，多個元素可以在一行內(nèi)并列顯示
3）當(dāng)元素設(shè)置了float屬性后，就相當(dāng)于給該元素加了display：block;屬性长踊；
4）Inline-block行內(nèi)塊元素顯示：元素的內(nèi)容以塊狀顯示功舀，行內(nèi)的其他元素顯示在同一行。（只有這一個元素類型支持vertical-align屬性）img,input身弊。
5）none此元素不會被顯示辟汰。
6）list-item：將元素轉(zhuǎn)換成列表。li的默認(rèn)類型
7）
A）大部分塊元素display屬性值默認(rèn)為block阱佛，其中l(wèi)i默認(rèn)值為list-item
B）大部分內(nèi)聯(lián)元素的display屬性值默認(rèn)為inline,其中img,input帖汞，默認(rèn)為inline-block
定位
語法：position：static/absolute/relative/fixed
取值：
1）static：默認(rèn)值，無特殊定位凑术，對象遵循HTML原則;
2）absolute：絕對定位翩蘸，將對象從文檔流中脫離出來，使用left/right/top/bottom等屬性相對其最接近的一個并有定位設(shè)置的父元素進(jìn)行絕對定位;如果不存在這樣的父對象麦萤，則依據(jù)html（根元素）鹿鳖，而其層疊通過z-index屬性定義扁眯；
3）relative：相對定位，對象不可層疊翅帜，將依據(jù)right姻檀，top，left涝滴，bottom（相對定位）等屬性在正常文檔流中偏移位置（相對自己原來的位置偏移）
[if !vml][endif]
4）fixed：固定定位绣版，對象定位遵從絕對定位方式（absolute）;但是要遵守一些規(guī)范（IE6瀏覽器不支持此定位）根據(jù)瀏覽器的窗口來定義自己的位置
滾動字幕的應(yīng)用
behavior(行為)="scroll(滾動)/alternate(晃動)"
direction(方向)="up(從下向上)/down/left/right(從左向右)"
scrollamount(滾動速度)="value"
height="value(上下滾動范圍)"
?width="value"(左右滾動范圍)>
day08_定位續(xù)講
透明：opacity："value"數(shù)值0~1
display：none;不占位 等于消失
visibility：hidden;占位 等于隱身
relative：相對定位元素參照自身起始位置移動，并占據(jù)原有空間
absolute：絕對定位元素參照最近的已定位父元素移動歼疮，不占據(jù)空間
fixed：固定定位元素參照瀏覽器移動杂抽，不占據(jù)空間
絕對定位和相對定位的區(qū)別
1）參照物不同絕對定位的參照物是包含塊，相對定位的參照物是元素本身位置
2）絕對定位將對象從文檔流中脫離出來因此不占據(jù)空間韩脏，相對定位不破壞正常的文檔流順序無論是否進(jìn)行移動缩麸，元素仍然占據(jù)原來的空間
定位元素層疊屬性
z-index：auto/number檢索或設(shè)置對象的層疊順序
auto：默認(rèn)值 遵從其父對象
number：無單位的整數(shù)值 可為負(fù)數(shù)
說明：
較大number值的對象會覆蓋在較小number值的對象至少 如兩個絕對定位對象的此屬性具有同樣的number值，那么將依據(jù)它們在HTML文檔中聲明的順序?qū)盈B
此屬性僅作用于position屬性值為relative或absolute赡矢，fixed的對象
命名錨點(diǎn)鏈接的應(yīng)用
定義：是網(wǎng)頁制作中超級鏈接的一種杭朱，又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內(nèi)的超級鏈接吹散，運(yùn)用相當(dāng)普遍
1）命名錨點(diǎn)的作用：在同一頁面內(nèi)的不同位置進(jìn)行跳轉(zhuǎn)
2）給元素定義命名錨記名
語法：<標(biāo)記id="命名錨記名稱">
</標(biāo)記>
3）命名錨記鏈接
語法：<a
href="命名錨記名稱">
滾動條
overflow內(nèi)容溢出時(shí)的設(shè)置
overflow 水平及垂直方向內(nèi)容溢出時(shí)的設(shè)置
overflow-x 水平方向內(nèi)容溢出時(shí)的設(shè)置
overflow-y 垂直方向內(nèi)容溢出時(shí)的設(shè)置
以上三個屬性設(shè)置的屬性值：
visible弧械、scroll、hidden空民、auto刃唐、visible默認(rèn)值，使用該值時(shí)界轩，無論設(shè)置的"width"和"height"的值是多少画饥，其中的內(nèi)容無論是否超出范圍都將被強(qiáng)制顯示 hidden效果與visible相反。任何超出width和height的內(nèi)容都會不可見
?scroll 無論內(nèi)容是否超越范圍耸棒，都將顯示滾動條
?auto 當(dāng)內(nèi)容超出范圍時(shí)荒澡，顯示滾動條，否則不顯示
應(yīng)用：
1）沒有水平滾動條
<div
style="overflow-x：hidden">test
2）沒有垂直滾動條
<div
style="overflow-y：hidden">test
3）沒有滾動條
<div
style="overflow-x：hidden;overflow-y：hidden"
或style="overflow：hidden">test
4）自動顯示滾動條
test
自己定義滾動條的顏色
Body{
scrollbar-arrow-color：#f4ae21; /*圖6,三角箭頭的顏色*/
scrollbar-face-color： #333;
/*圖5,立體滾動條的顏色*/
scrollbar-3dlight-color： #666;
/*圖1,立體滾動條亮邊的顏色*/
scrollbar-highlight-color： #666;
/*圖2,滾動條空白部分的顏色*/
scrollbar-shadow-color： #999;
/*圖3,立體滾動條陰影的顏色*/
scrollbar-darkshadow-color： #666;
/*圖4,立體滾動條強(qiáng)陰影的顏色*/
scrollbar-track-color： #666;
/*圖7,立體滾動條背景顏色*/
scrollbar-base-color：#f8f8f8;
/*滾動條的基本顏色*/
}
關(guān)于溢出
1）溢出屬性（容器的）
overflow：visible/hidden/scroll/auto/inherit;
visible：默認(rèn)值与殃，內(nèi)容不會被修建单山，會成現(xiàn)在元素框之外;
hidden：內(nèi)容會被修剪，并且其余內(nèi)容是不可見的;
scroll：內(nèi)容會被修剪幅疼，瀏覽器會顯示滾動條米奸，以便查看其余內(nèi)容;
auto：如果內(nèi)容被修剪，瀏覽器會顯示滾動條爽篷，以便查看其他內(nèi)容;
inherit：規(guī)定應(yīng)該從父元素繼承overflow屬性的值
2）空余空間
white-space：normal/pre/nowrap/pre-wrap/pre-line/inherit
該屬性用來設(shè)置如何處理元素內(nèi)的空白;
normal：默認(rèn)值悴晰，空白會被瀏覽器忽略;
pre：空白會被瀏覽器保留，其行為方式類似HTML中的pre標(biāo)簽;
nowarp：文本不會換行，文本會在同一行上繼續(xù)铡溪，知道遇到<br/>標(biāo)簽為止;
pre-wrap：保留空白符序列漂辐，但是正常的進(jìn)行換行;
pre-line：合并空白符序列，但是保留換行符;
inherit：規(guī)定應(yīng)該從父元素繼承white-space屬性的值;（IE瀏覽器不支持）
3）文本溢出：text-overflow：clip/ellipsis
取值
clip：不顯示省略號(...)棕硫，而是簡單的裁切
ellipsis：當(dāng)對象內(nèi)文本溢出時(shí)髓涯，顯示省略標(biāo)記
說明
text-overflow屬性僅是...，當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記哈扮，并不具備其它的樣式屬性定義纬纪，要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號的效果還需定義：
1）容器寬度：width：value；
2）強(qiáng)制文本在一行內(nèi)顯示：white-space：nowrap;
3）溢出內(nèi)容為隱藏：overflow：hidden滑肉；
4）溢出文本顯示省略號：text-overflow：ellipsis;
day09_雪碧圖
CSS Sprites的原理（圖片整合技術(shù)包各、雪碧圖/圖片精靈）
將導(dǎo)航背景圖片，按鈕背景圖片等有規(guī)則的合并成一張背景圖靶庙，即將多張圖合為一張整圖问畅，然后用background-position來實(shí)現(xiàn)背景圖片的定位技術(shù)
圖片整合的優(yōu)勢：
1）通過圖片整合來減少對服務(wù)器的請求次數(shù)，提高頁面的加載速度
2）通過整合圖片來減小圖片的體積
CSS Sprites的實(shí)現(xiàn)方法
滑動門技術(shù)
1）什么是滑動門
滑動門是一個形象的稱呼六荒，它利用CSS背景圖像可層疊性按声，并允許彼此之上進(jìn)行滑動來創(chuàng)造一些特殊動態(tài)效果
2）滑動門特征
通過滑動門技術(shù)，可以使CSS設(shè)計(jì)出來的導(dǎo)航菜單兼具傳統(tǒng)布局的圖像效果恬吕，與CSS布局的高效擴(kuò)展性
動畫
transition：value? 動畫執(zhí)行時(shí)間
transform：scale(2) rotate(360deg); scale放大倍數(shù)?rotate旋轉(zhuǎn)度數(shù)
transparent 透明：一般用來定義倒三角
圖片與文字對齊方式：display：inline-block?? vertical-align：middle
day10_兼容問題、表單高級须床、H5新增標(biāo)簽和表單控件
五大瀏覽器內(nèi)核代表作品
Trident：IE铐料、Maxthon（遨游）、騰訊豺旬、360钠惩、Theworld世界之窗
Gecko：MozillaFirefox?
Webkit：Safari、Chrome族阅，是一個開源項(xiàng)目
Presto：Opera世界上公認(rèn)的渲染速度最快的引擎
Blink：由Google和Opera
Software開發(fā)的瀏覽器排版引擎篓跛，2013年4月發(fā)布
CSS Bug、CSS Hack和Filter
1）CSS Bug：CSS樣式在各瀏覽器中解析不一致的情況坦刀，或者說CSS樣式在瀏覽器中不能正確顯示的問題稱為CSS Bug
2）CSS Hack：CSS中愧沟，Hack是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法，因?yàn)樗鼈兌紝儆趥€人對CSS代碼的非官方的修改鲤遥，或非官方的補(bǔ)丁沐寺，有些人更喜歡使用
3）Filter：表示過濾器的意思，它是一種對特定的瀏覽器或?yàn)g覽器組顯示或隱藏規(guī)則或聲明的方法盖奈。本質(zhì)上講混坞，F(xiàn)ilter是一種用來過濾不用patch（補(bǔ)丁）來描述這種行為
使用Hack帶來的一些副作用：
降低CSS代碼的可讀性，增加了代碼的負(fù)擔(dān)
設(shè)計(jì)CSS Hack和Filter通常有兩種方法
1）一種是利用瀏覽器自身的Bug究孕，來隱藏或顯示樣式或聲明
2）另一種是利用瀏覽器對CSS支持的不完善啥酱，如對某些規(guī)則或語法還沒有形成支持，來隱藏或顯示樣式
IE6常見CSS解析Bug及Hack
1)圖片間隙
A）div中的圖片間隙(該bug出現(xiàn)在IE6及更低版本中)
描述：在div中插入圖片時(shí),圖片會將div下方撐大三像素
Hack1：將</div>與<img>寫在一行上
Hack2：將<img>轉(zhuǎn)為塊狀元素,給<img>添加聲明：display：block
B）dt,li中圖片間隙(IE6)
Hack：將<img>轉(zhuǎn)為塊狀元素,給<img>添加聲明：display：block;
2）雙倍浮向(雙倍邊距)
描述：當(dāng)IE6及更低版本瀏覽器在解析浮動元素時(shí),會錯誤地把浮向邊邊界加倍顯示
Hack：給浮動元素添加聲明：display：inline
3）默認(rèn)高度(IE6)
描述：在IE6及以下版本中,部分塊元素?fù)碛心J(rèn)高度(低16px高度)
Hack1：給元素添加聲明：font-size：0
Hack2：給元素添加聲明：overflow：hidden
4）表單元素行高不一致(IE,MOZ,C,O,S)
描述：表單元素行高對齊方式不一致
Hack：給表單元素添加聲明： float：left
5）按鈕元素默認(rèn)大小不一致
描述：各瀏覽器中按鈕元素大小不一致
Hack1：統(tǒng)一大小/(用a標(biāo)記模擬)
Hack2：input外邊套一個標(biāo)簽,在這個標(biāo)簽里寫按鈕的樣式,把 input的邊框去掉(推薦用)
Hack3：如果這按鈕是一個圖片,直接把圖片作為按鈕的背景圖即可
6）瀏覽器解析按鈕邊框時(shí),會把邊框解析在按鈕內(nèi)部,不會影響按鈕的原有大小
7）百分比Bug
描述：在IE6及以下版本中在解析百分比時(shí),會按四舍五入方式計(jì)算從而導(dǎo)致50%加50%大于100%的情況
Hack：給右面的浮動元素添加聲明： clear：right 意思：清除右浮動
注釋：元素右浮的時(shí)候清除左浮動;元素左浮的時(shí)候清除右浮動
8）鼠標(biāo)指針Bug
描述：cursor屬性的hand屬性值只有IE瀏覽器識別厨诸，其他瀏覽器不識別該聲明镶殷，cursor屬性的pointer屬性值IE6.0以上版本及其他內(nèi)核瀏覽器都識別該聲明
Hack：如統(tǒng)一某元素鼠標(biāo)指針形狀為手型，應(yīng)添加聲明：cursor：pointer
cursor：泳猬； auto默認(rèn)crosshair加號 text文本 wait等待 help幫助progress過程inherit繼承 move移動ne-resize向上或向右移動
9）列表階梯Bug(IE6及更低版本的瀏覽器中)
Bug1：在給的子元素中使用了Float：left父元素中沒有設(shè)置浮動屬性,會出現(xiàn)垂直效果
Hack：給父元素設(shè)置浮動便能解決此問題
Bug2：當(dāng)給Li里的A轉(zhuǎn)成塊元素且a寫了浮動后并a設(shè)置了固定高度時(shí)在IE6及更低的版本瀏覽器里會出現(xiàn)Li階梯狀效果
Hack：給Li也同設(shè)置左浮動便可解決
10）瀏覽器解析margin屬性值時(shí),上下邊界的屬性值重合,左右相加
11）在IE6及更低版本的瀏覽器里,如果想去掉input的默認(rèn)邊框,需將其 border屬性值設(shè)置成0方可兼容多個瀏覽器
12）階梯BUG
Bug：子元素沒設(shè)置任何浮動,設(shè)置了margin-top屬性后,會錯誤的把margin-top的屬性值添加給父元素(塊元素)
Hack：給父元素添加overflow：hidden;聲明
如果子元素設(shè)置了浮動屬性也不會出現(xiàn)這個問題
Bug：li里a加display：block;IE6以下版本瀏覽器出現(xiàn)行高不一致;
Hack：給li加float：left;（并設(shè)置li的寬度等于父元素的寬度）
13）透明屬性Bug
IE8以下瀏覽器寫法：filter：alpha（opacity=value）;取值范圍1-100
兼容其他瀏覽器寫法：opacity：value;（value的取值范圍0-1）
過濾器Filter
兼容元素具備最小高度自適應(yīng)的方法：
Hack1：min-height：value;
_height：value;
Hack2：min-height：value;
height：auto!important;
height：value（建議使用）
合并相鄰單元格邊框：
border-collapse：separate（邊框分開）/collapse（邊框合并）
插入圖片透明
A.圖片背景透明
???????? .gif：支持
???????? .png8：支持(建議使用)
???????? .png24：IE6不支持批钠，其它內(nèi)核瀏覽器支持（PS制作)
???????? .png32：IE6不支持，其它內(nèi)核瀏覽器支持
B.圖片本身透明
??????? .png24：IE6不支持（ps制作)得封，可用filter兼容埋心。
??????? .png32：IE6不支持，可用filter兼容忙上。
半透明插入圖片兼容IE6做法
使用png32或PS制作的png24半透明圖片
