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