第四章：內(nèi)聯(lián)塊（inlineblock）
*小知識點：
：分割線
行高和高度一樣時文字垂直居中成榜。
hover{····}：鼠標(biāo)移動到某處時發(fā)生的動態(tài)變化。
hover, .class選擇器名：當(dāng)前選中某頁面蹦玫。
display:規(guī)定元素生成的框類型赎婚；
劃分區(qū)域的框默認(rèn)樣式：四邊形并且每個角都是90度。
塊元素的特征：
1.沒有設(shè)置寬度時樱溉，默認(rèn)撐滿一行挣输。
2.默認(rèn)塊元素獨占一行。
3.支持所有CSS命令福贞。
內(nèi)聯(lián)元素的特征：
1.寬高由內(nèi)容撐開撩嚼。
2.不支持寬高。
3.一行內(nèi)可以繼續(xù)顯示跟同類的標(biāo)簽。
4.不支持上下的margin
5.代碼換行被解析
display：block 顯示為塊
使內(nèi)聯(lián)元素具備塊屬性標(biāo)簽的特性
display：inline 顯示為內(nèi)嵌
使行塊屬性標(biāo)簽具備內(nèi)聯(lián)元素的特性
Inline-block的特點：
1完丽、塊元素能在一行顯示恋技；
2、內(nèi)聯(lián)元素支持寬高逻族；
3蜻底、沒有寬度的時候由內(nèi)容撐開寬度；
第五章：浮動（float）
*inline-block 特性：
1.塊在一排顯示
2.內(nèi)聯(lián)支持寬高
3.默認(rèn)內(nèi)容撐開寬度
4.標(biāo)簽之間的換行間隙被解析（問題）
5.ie6 ie7不支持塊屬性標(biāo)簽的inline-block（問題）
float
float:left（左） right （右）none（沒有）inherit（繼承）;
浮動的定義：使元素脫離文檔流聘鳞，按照指定方向發(fā)生移動薄辅，遇到父級邊界或者相鄰的浮動元素停了下來。
文檔流是文檔中可顯示對象在排列時所占用的位置抠璃。
float:left;---div1 div2 div3
float:right;---div3 div2 div1
clear:left （左）right （右）both （左右兩邊）none （沒有）inherit （繼承）长搀；元素的某個方向上不能有浮動元素
clear:both; 在左右兩側(cè)均不允許有浮動元素。
float的特征：
1.塊在一排顯示
2.內(nèi)聯(lián)支持寬高
3.默認(rèn)內(nèi)容撐開寬度
4.脫離文檔流
5.提升層級半層
清除浮動：
1.clear
clear:left （左）right （右）both （左右兩邊）none （沒有）inherit （繼承）鸡典；元素的某個方向上不能有浮動元素
clear:both; 在左右兩側(cè)均不允許有浮動元素。
2.加高度
問題：高度不定時不方便清除枪芒，擴展性不好彻况。
3.父級浮動
問題：頁面中所有元素都加浮動，margin左右auto失效（floats bad ＞俗佟）
4.inline-block 清浮動方法：
問題：margin左右auto失效纽甘；
5.空標(biāo)簽清除浮動
問題：IE6 最小高度 19px；（解決后IE6下還有2px偏差）
6.br清除浮動 <br clear="all"/>
問題：不符合工作中：結(jié)構(gòu)抽碌、樣式悍赢、行為，三者分離的要求货徙。
7.after偽類清除浮動方法（現(xiàn)在主流方法）給浮動元素的父級加after偽類
after偽類： 元素內(nèi)部末尾添加內(nèi)容左权；
after{content"添加的內(nèi)容";} IE6，7下不兼容
zoom 縮放
a.觸發(fā) IE下 haslayout痴颊，使元素根據(jù)自身內(nèi)容計算寬高赏迟。
b.FF 不支持；
clear:after{content:'';display:block;clear:both;}
clear{zoom:1;}
以下形式觸發(fā)BFC：
BFC (block formatting context) 標(biāo)準(zhǔn)瀏覽器
a.float的值不為none蠢棱。
b.overflow的值不為visible锌杀。
c.display的值為table-cell, table-caption, inline-block中的任何一個。
d.position的值不為relative和static泻仙。
e.width|height|min-width|min-height:(!aotu)
以下形式觸發(fā) IE下 haslayout：
a.writing-mode:tb-rl
b.-ms-writing-mode:tb-rl
c.zoom:(!normal)
8.overflow:hidden 清浮動方法糕再；給浮動元素的父級加overflow
問題：需要配合 寬度 或者 zoom 兼容IE6 IE7；
overflow: scroll | auto | hidden玉转；
overflow:hidden;溢出隱藏（裁刀Ｍ幌搿）（超出父級隱藏）
overflow:scroll;（超出父級有滾動條）
第六章：定位（position）
position:relative; 相對定位
*需要誰移動就給誰加定位
a.不影響元素本身的特性；
b.不使元素脫離文檔流（元素移動之后原始位置會被保留）；
c.如果沒有定位偏移量蒿柳，對元素本身沒有任何影響饶套；
d.提升層級
定位元素位置控制
top/right/bottom/left （上 右 下 左）定位元素偏移量。
top:200px; 上部留有200px垒探。
left:200px; 左側(cè)留有200px妓蛮。
position:absolute; 絕對定位
a、使元素完全脫離文檔流（元素移動之后原始位置不會被保留）圾叼；
b蛤克、使內(nèi)嵌支持寬高；
c夷蚊、塊屬性標(biāo)簽內(nèi)容撐開寬度构挤；
d、如果有定位父級相對于定位父級發(fā)生偏移惕鼓，沒有定位父級相對于document（瀏覽器可視區(qū)域的）發(fā)生偏移筋现；
e、相對定位一般都是配合絕對定位元素使用箱歧；
f矾飞、提升層級
*層級：代碼從上往下執(zhí)行，后面的能覆蓋前面的呀邢。
z-index:number;定位層級
a.定位元素默認(rèn)后者層級高于前者洒沦；
b.建議在兄弟標(biāo)簽之間比較層級
position:fixed； 固定定位
與絕對定位的特性基本一致价淌，差別是始終相對整個文檔（瀏覽器可視區(qū)域的）進(jìn)行定位申眼；問題：IE6不支持固定定位；
position:fixed;
right:0; 可直接定位方向
bottom:0;
position:relative | absolute | fixed | static | inherit;
position:static 蝉衣； 默認(rèn)值
position:inherit ; 從父元素繼承定位屬性的值 (不兼容)
position:absolute; 絕對定位元素子級的浮動可以不用寫清浮動方法括尸；
position:fixed; 固定定位元素子級的浮動可以不用寫清浮動方法；（IE6不兼容）
position:relative | absolute | fixed | static | inherit;
遮罩彈窗：
標(biāo)準(zhǔn)瀏覽器透明度設(shè)置： opacity:0~1; （完全透明~不透明）
父級加透明度子級也會被繼承病毡。
IE瀏覽器6.7下的透明度設(shè)置： filter:alpha(opacity=0~100); （完全透明~不透明）
第七章：表格表單（tableform）
表格標(biāo)簽：
table 表格
thead 表格頭
tbody 表格主體
tr 表格行
th 元素定義表頭
td 元素定義表格單元
<table border=" ">:表格邊框
（與table{border-collapse:collapse;} 配合使用）
*寫代碼時以行為單位去寫
表格樣式重置
table{border-collapse:collapse;} 單元格間隙合并
th,td{padding:0;}重置單元格默認(rèn)填充
單元格合并
colspan 屬性規(guī)定單元格可橫跨的列數(shù)姻氨。
<td colspan="2"></td> 合并兩個單元格
rowspan 屬性規(guī)定單元格可橫跨的行數(shù)。
<td rowspan="2"></td> 合并兩個單元格
合并的數(shù)量+剩余的數(shù)量=總數(shù)
一行合并刪當(dāng)前行剪验，跨行合并刪除當(dāng)前行的其他行肴焊。
表單
表單：form （用戶輸入對應(yīng)東西的）
<form action=""></form>（action屬性是提交的地址）
<input type="··· " name="···" value="···" />
input：單標(biāo)簽 type：類型 name：提交的信息是做什么的
value：默認(rèn)輸入的信息
text 文本框，輸入框
password 密碼
radio 單選 name后面的需要保持一致
checkbox 復(fù)選 name后面的需要保持一致
submit 提交
reset 重置
button 按鈕
image 圖片
file 上傳
hidden 隱藏
代碼如下：
<input type="text" name="user_name" value="輸入框">
<input type="password" name="password" value="">
<input type="radio" name="sex" value="men">男
<input type="radio" name="sex" value="women">女
<input type="checkbox" name="xingqu" value="chi">吃
<input type="checkbox" name="xingqu" value="shuijiao">睡覺
<input type="checkbox" name="xingqu" value="dadoudou">打豆豆
<input type="button" value="自定義按鈕"> 一定要加value
<input type="image">
<input type="file"> 上傳文件
<input type="hidden" value="yincang"> 隱藏不需要用戶看到的數(shù)據(jù)
<input type="submit"> 不設(shè)置value顯示提交功戚，設(shè)置顯示value的信息
<input type="reset"> 不設(shè)置value顯示重置娶眷，設(shè)置顯示value的信息
第八章：兼容性講解
fuckIE（一）
每個瀏覽器都有不同的內(nèi)核，不同的處理引擎啸臀，導(dǎo)致同一條樣式的處理方式是不一樣的届宠。每個瀏覽器上的不同差異稱之為兼容性烁落。
H5標(biāo)簽兼容。H5標(biāo)簽在IE6豌注，IE7下是沒有用的伤塌。
原因：IE6不是標(biāo)準(zhǔn)的瀏覽器。
方式一（動態(tài)創(chuàng)建自定義標(biāo)簽）：
<script> 動態(tài)去創(chuàng)建的標(biāo)簽是自定義標(biāo)簽轧铁，默認(rèn)的是內(nèi)聯(lián)元素每聪，不支持寬高，在主體中需要轉(zhuǎn)換為塊元素"diaplay:block;"
document.createElement("header"); 創(chuàng)建"header"節(jié)點
document.createElement("section"); 創(chuàng)建"section"節(jié)點
document.createElement("footer"); 創(chuàng)建"footer"節(jié)點
</script>
方式二（引用js）：
<script src="js/html5shiv.js"></script>
fuckIE（二）
元素浮動之后,能設(shè)置寬度的話就給元素加寬度.如果需要寬度是內(nèi)容撐開,就給它里邊的塊元素加上浮動;
解決方案：需要誰浮動就給浮動加給誰齿风。
第一塊元素浮動,第二塊元素加margin值等于第一塊元素,在IE6下會有間隙問題;
解決方案：
1.不建議這么寫药薯。 原因：脫離文檔流的元素和沒有脫離文檔流的元素有層級差異。
2.用浮動解決救斑。
fuckIE（三）
IE6下子元素超出父級寬高童本，會把父級的寬高撐開
解決方案：不要讓子元素的寬高超出父級。
p 包含塊元素嵌套規(guī)則
塊元素不能嵌套塊元素：<p> <td> <h1>-<h6>
margin兼容性問題：
1.margin-top傳遞給父級
解決方案：觸發(fā)BFC脸候，haslayout
2.上下margin疊加
解決方案：盡量使用同一方向的margin穷娱，比如都設(shè)置top或者bottom
fuckIE（四）
display:inline-block：
*：針對不同瀏覽器進(jìn)行處理
解決方案：
*display:inline;
*zoom:1;
IE6 最小高度問題：19px
解決方案：*overflow:hidden;
fuckIE（五）
IE6 雙邊距：
<body>默認(rèn)樣式邊距：8px
當(dāng)元素浮動后再設(shè)置margin那么就會產(chǎn)生雙倍邊距（左側(cè)）
解決方案：針對IE6和IE7添加：*display:inline;
li里元素都浮動 li 在IE6 7 下方會產(chǎn)生4px間隙問題：
間隙由li產(chǎn)生。
解決方案：針對IE6和IE7添加：*vertical:top;
fuckIE（六）
浮動元素之間注釋运沦，導(dǎo)致多復(fù)制一個文字問題：
條件：兩個浮動元素中間有注釋或者內(nèi)聯(lián)元素并且和父級寬度相差不超過3px泵额。
解決方案：
1.兩個浮動元素中間避免出現(xiàn)注釋或者內(nèi)聯(lián)元素
2.與父級寬度相差3px或以上。
IE6 7 父級元素的overflow:hidden 是包不住子級的relative：
解決方案：針對IE6和IE7給父級元素添加相對定位茶袒。
fuckIE（七）
IE6下絕對定位元素父級寬高是奇數(shù),絕對定位元素的right和bottom值會有1px的偏差：
解決方案：避免父級寬高出現(xiàn)奇數(shù)
IE6下絕對定位元素和浮動元素并列（同級）絕對定位元素消失：
解決方案：只要絕對定位元素和浮動元素不處于同級就可以避免絕對定位元素消失。
IE6 下input的空隙：
解決方案：針對IE6和IE7給input元素添加float
fuckIE（八）
IE6 下 輸入類型表單控件背景問題：
輸入類型表單控件：需要用戶輸入的表單控件
解決方案：設(shè)置background-attachment:fixed;
*（hack）:針對不同的瀏覽器寫不同的CSS 樣式的過程凉馆，就叫CSS hack!
\9 IE10以及IE10以下版本的瀏覽器
*IE7以及IE7以下版本的瀏覽器
_IE6以及IE6以下版本的瀏覽器
fuckIE（九）
png-24 兼容性問題：IE6不支持png-24 圖片
解決方案：
1.JS插件(問題:不能處理body之上png24)
<script src="js/DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix("img, div");
</script>
DD_belatedPNG.fix('標(biāo)簽名,標(biāo)簽名');
2.原生濾鏡：（能處理body之上png24）
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="crop");
樣式優(yōu)先級：
默認(rèn) < 類型 < class < id < style(行間) < !important
提升樣式優(yōu)先級：
!important 提升樣式優(yōu)先級或權(quán)重
