一、標(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)完美解決
屬性
none
left
right
注:一般為了避免和標(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)
定位拓展
-
margin
auto
在絕對(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ì)造成外邊距合并