浮动、居中等笔记
樣式：就近原則
Eg:行內(nèi)>內(nèi)部>外部
Border：1px solid red;（一個(gè)不能拉下）
盒子3D模型：
Border
Content+padding
Background-image
Background-color
Margin
Background：url() 0 0[設(shè)置位置] no-repeat;
盒子尺寸=外框+內(nèi)邊距+外邊距+content
Class=“content book”[book為追加樣式]
盒子不設(shè)置高度時(shí)，可隨內(nèi)容自適應(yīng)
第一種居中方法：
塊級(jí)元素：縱向排列
Margin:0 auto;[列居中，不能同時(shí)設(shè)置浮動(dòng)和絕對(duì)定位]
Auto：根據(jù)瀏覽器寬度設(shè)置外邊距
原理：[瀏覽器寬度-設(shè)置寬度]/2=外邊距
為父層（class=wrap）設(shè)置寬度，子層設(shè)置100%（子層會(huì)繼承父層的寬度及居中）
第二種方法：float（實(shí)現(xiàn)橫向排列）=left/right/none
特點(diǎn)：仍在文檔流中，元素左右移直至觸碰到容器邊緣為止
元素未設(shè)置寬度，而設(shè)置了浮動(dòng)屬性，元素的寬度隨內(nèi)容變化而變化
當(dāng)元素設(shè)置浮動(dòng)屬性后，會(huì)對(duì)相鄰元素產(chǎn)生影響（塊級(jí)元素一行排列）
消除浮動(dòng)方法：
段落：Clear:both/left/right/none/inherit;（主要用于緊鄰后面的元素的清除浮動(dòng)）
父包含縮成一條時(shí)沒(méi)有用
同時(shí)設(shè)置width：100%（或固定寬度）+overflow：hidden;
1.加高
問(wèn)題：擴(kuò)展性不好
?
2.父級(jí)浮動(dòng)
問(wèn)題：頁(yè)面中所有元素都加浮動(dòng)，margin左右自動(dòng)失效（floats bad ！）
?
3.inline-block 清浮動(dòng)方法：
問(wèn)題：margin左右auto失效；
?
4.空標(biāo)簽清浮動(dòng)
問(wèn)題：IE6 最小高度 19px；（解決后IE6下還有2px偏差）
?
5.br清浮動(dòng)
問(wèn)題：不符合工作中：結(jié)構(gòu)、樣式、行為，三者分離的要求。
?
6.after偽類 清浮動(dòng)方法（現(xiàn)在主流方法）
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}
?
after偽類： 元素內(nèi)部末尾添加內(nèi)容；
:after{content"添加的內(nèi)容";} IE6，7下不兼容
zoom 縮放
a、觸發(fā) IE下 haslayout，使元素根據(jù)自身內(nèi)容計(jì)算寬高。
b、FF 不支持；
回顧:inline-block 特性：
?1、塊在一排顯示
2、內(nèi)聯(lián)支持寬高
3、默認(rèn)內(nèi)容撐開(kāi)寬度
4、標(biāo)簽之間的換行間隙被解析（問(wèn)題）
5、ie6 ie7不支持塊屬性標(biāo)簽的inline-block（問(wèn)題）
絕對(duì)定位與相對(duì)定位：
position:relative; ?相對(duì)定位
a、不影響元素本身的特性；
b、不使元素脫離文檔流（元素移動(dòng)之后原始位置會(huì)被保留）；
c、如果沒(méi)有定位偏移量，對(duì)元素本身沒(méi)有任何影響；
d、提升層級(jí)
?
定位元素位置控制
top/right/bottom/left ?定位元素偏移量。
???top:200px;
position:absolute; ?絕對(duì)定位
a、使元素完全脫離文檔流；
b、使內(nèi)嵌支持寬高；
c、塊屬性標(biāo)簽內(nèi)容撐開(kāi)寬度；
d、如果有定位父級(jí)相對(duì)于定位父級(jí)發(fā)生偏移，沒(méi)有定位父級(jí)相對(duì)于document發(fā)生偏移；
e、相對(duì)定位一般都是配合絕對(duì)定位元素使用；（在父級(jí)元素指定為相對(duì)定位）
f、提升層級(jí)（會(huì)和后面div重合）
z-index:[number]； ?定位層級(jí)
a、定位元素默認(rèn)后者層級(jí)高于前者；number:1,2
b、建議在兄弟標(biāo)簽之間比較層級(jí),數(shù)字高的顯示層級(jí)高
z-index:[number]； ?定位層級(jí)
position:fixed； 固定定位
與絕對(duì)定位的特性基本一致，的差別是始終相對(duì)整個(gè)文檔進(jìn)行定位；
問(wèn)題：IE6不支持固定定位；
?
定位其他值：
position:static ； 默認(rèn)值
position:inherit ; ?從父元素繼承定位屬性的值 (不兼容)
?????(static是靜態(tài)定位，relative是相對(duì)定位，absolute.fixed是絕對(duì)定位）
position:relative |?absolute | fixed | static | inherit;
position:absolute; 絕對(duì)定位元素子級(jí)的浮動(dòng)可以不用寫(xiě)清浮動(dòng)方法；
?
position:fixed; ?固定定位元素子級(jí)的浮動(dòng)可以不用寫(xiě)清浮動(dòng)方法；（IE6不兼容）
?
?
遮罩彈窗（優(yōu)酷彈窗）
標(biāo)準(zhǔn) 不透明度： ?opacity:0~1; （透明度）父級(jí)加了透明度，子集也會(huì)變透明
IE6.7 下透明度濾鏡： ??????????filter:alpha(opacity=0~100（100完全不透明);
?
父層沒(méi)有設(shè)置float，子層設(shè)置了浮動(dòng)，高度無(wú)法擴(kuò)展
Div最好不要設(shè)置高度，不能隨內(nèi)容擴(kuò)展
?
轉(zhuǎn)載于:https://www.cnblogs.com/dsh20134584/p/5627934.html
總結(jié)
- 上一篇： 能够提高开发效率的Eclipse实用操作
- 下一篇： editActionsForRowAtI