一、標(biāo)準(zhǔn)流
塊級(jí)元素
- 獨(dú)占一行，從上到下排列
- 默認(rèn)寬度同父元素
div、hr、p、h、ul、ol、dl、form、table等
行內(nèi)元素
- 一行內(nèi)顯示，超出自動(dòng)換行
span、a、i、em等
二、浮動(dòng)
- 任何元素都可以添加，變?yōu)閴K級(jí)元素（相當(dāng)于行內(nèi)塊）
- 脫離標(biāo)準(zhǔn)流，到指定位置
- 漂浮在普通流的上面
- 添加浮動(dòng)屬性，元素不占位置
多個(gè)盒子處于一行處理
- 行內(nèi)塊屬性
默認(rèn)有縫隙，難以處理 - 浮動(dòng)完美解決
屬性
noneleftright
注：一般為了避免和標(biāo)準(zhǔn)流影響，浮動(dòng)元素必須有一個(gè)標(biāo)準(zhǔn)流的父親規(guī)范
與父盒子
- 貼著盒子的內(nèi)邊框
- 不會(huì)超過盒子的內(nèi)邊距
與兄弟盒子
- 浮動(dòng)的元素只會(huì)影響當(dāng)前的或者后面的標(biāo)準(zhǔn)流盒子，不影響前面的標(biāo)準(zhǔn)流
- 建議兄弟盒子都浮動(dòng)，方便處理
清除浮動(dòng)
- 很多情況下父元素不方便給高度，子元素浮動(dòng)后不占位置，導(dǎo)致父盒子無高度，影響整個(gè)頁面布局
- 清除浮動(dòng)，父盒子自動(dòng)獲取子元素最大的高度
-
clear
屬性left、right、both（常用）
a> 額外標(biāo)簽法
浮動(dòng)元素末尾添加空標(biāo)簽，并為該標(biāo)簽添加屬性clear: both;
注：W3C推薦，通俗易懂，但無意義
b> 父級(jí)添加overflow
overflow屬性設(shè)為hidden|auto|scroll
注：內(nèi)容增多時(shí)不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏，無法顯示需要溢出的元素
c> 使用after偽元素
.clearfix:after { content:""; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {*zoom:1;}/IE6、7專有/
d> 雙偽元素
.clearfix:before,
.clearfix:after {
content:"";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
三、定位
- 定位 = 定位模式 + 邊偏移
- 邊偏移
top、bottom、left、right - 定位模式
position
static、relative、absolute、fixed，默認(rèn)靜態(tài)定位
靜態(tài)定位
- 默認(rèn)定位方式
- 按照標(biāo)準(zhǔn)流特性擺放，無偏移
相對(duì)定位
- 相對(duì)于原來自身在標(biāo)準(zhǔn)流中的位置偏移
- 保留原來標(biāo)準(zhǔn)流中的位置
絕對(duì)定位
- 以帶有定位的父級(jí)元素來移動(dòng)位置（父元素?zé)o定位時(shí)，以瀏覽器為基準(zhǔn)）
- 完全脫離標(biāo)準(zhǔn)流，不占位置
- 子絕父相 （子級(jí)絕對(duì)定位，父級(jí)相對(duì)定位）
固定定位
- 絕對(duì)定位的特殊形式，以瀏覽器可視窗口為基準(zhǔn)
定位拓展
-
marginauto在絕對(duì)定位|固定定位中無效，水平居中寫法
左移父級(jí)的一半，再返回自身的一半
.abs {
position: relative;
}
.abs .son {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
}
- 在相對(duì)、絕對(duì)、固定定位中，
z-index調(diào)整堆疊順序，默認(rèn)0，賦值正整數(shù)或負(fù)整數(shù)，在其他流中無效 -
float、固定定位和絕對(duì)定位，造成inline-block效果 - 浮動(dòng)、絕對(duì)定位不會(huì)造成外邊距合并
