自我總結(jié):
浮動(dòng)是實(shí)現(xiàn)布局的一種常見方式
浮動(dòng)脫離普通文檔流做院,即頁(yè)面渲染時(shí)盲泛,盒模型按標(biāo)準(zhǔn)會(huì)將父元素所設(shè)置的屬性將頁(yè)面撐開;加入浮動(dòng)后山憨,父元素不會(huì)發(fā)現(xiàn)浮動(dòng)元素查乒,父元素則不會(huì)被浮動(dòng)元素?fù)伍_頁(yè)面)弥喉。 塊級(jí)元素默認(rèn)樣式可以撐滿父容器郁竟,加入浮動(dòng)后,塊級(jí)元素浮動(dòng)則會(huì)收縮到內(nèi)容本身的寬度由境。 加入浮動(dòng)后棚亩,在父元素中看不見浮動(dòng)元素蓖议,在行內(nèi)元素看得見浮動(dòng),如文本或其他行內(nèi)元素都會(huì)環(huán)繞浮動(dòng)元素讥蟆。
加入浮動(dòng)后勒虾,浮動(dòng)盒會(huì)向左或向右移動(dòng),直到其外邊挨到包含塊邊沿或者另一個(gè)浮動(dòng)盒的外邊瘸彤。 當(dāng)同一個(gè)方向的浮動(dòng)元素:當(dāng)一個(gè)浮動(dòng)元素在浮動(dòng)過(guò)程中碰到同一個(gè)方向的浮動(dòng)元素時(shí)修然,它會(huì)緊跟在它們后面; 當(dāng)反方向的浮動(dòng)元素:互不影響质况,位于同一條水平線上愕宋,當(dāng)空間不夠時(shí)會(huì)被擠下。 當(dāng)浮動(dòng)盒的寬度不一樣時(shí)结榄,緊跟后面的另一浮動(dòng)盒則會(huì)出現(xiàn)卡住的現(xiàn)象中贝。
加入浮動(dòng)后,塊級(jí)元素內(nèi)容寬度會(huì)縮短臼朗,呈現(xiàn)
inline-block``的特性邻寿,放不下會(huì)換行;行內(nèi)元素則以塊級(jí)元素特性呈現(xiàn)视哑,可以設(shè)置
width绣否、
height、
margin```黎炉。
一枝秤、浮動(dòng):
1、從實(shí)踐嘗試到理論定義
(1)例子1:
一個(gè)浮動(dòng)盒會(huì)向左或向右移動(dòng)慷嗜,直到其外邊(outerEdge)挨到包含塊邊沿或者另一個(gè)浮動(dòng)盒的外邊淀弹。如果沒(méi)有足夠的水平空間來(lái)浮動(dòng),它會(huì)向下移動(dòng)庆械,直到空間合適或者不會(huì)再出現(xiàn)其它浮動(dòng)了
(2)例子2:
高度不一樣薇溃,即出現(xiàn)一個(gè)卡住的問(wèn)題
(3)例子3:
注:
未設(shè)置樣式的塊級(jí)元素,即有默認(rèn)樣式缭乘,margin-top(or bottom);
因?yàn)楦?dòng)(盒)不在普通流內(nèi)沐序,在浮動(dòng)盒之前或者之后創(chuàng)建的未定位的塊盒會(huì)豎直排列,就像浮動(dòng)不存在一樣堕绩。接著策幼,浮動(dòng)(盒)創(chuàng)建的當(dāng)前及后續(xù)行盒會(huì)進(jìn)行必要的縮短,為了給浮動(dòng)(盒)的margin box
讓出空間奴紧。
例子:
如一個(gè)普通元素(如p)遇到浮動(dòng)元素之后特姐,普通元素(如p)看不見這個(gè)浮動(dòng)元素,但這個(gè)普通元素里的行盒(文字生成的行盒特性)能看到該浮動(dòng)元素黍氮。當(dāng)浮動(dòng)盒寬度變化唐含,文字行盒也會(huì)相應(yīng)地被擠下去換行浅浮。
2、從理論到實(shí)現(xiàn)效果
(1)浮動(dòng)元素脫離普通流捷枯?
A滚秩、普通流是什么?
頁(yè)面渲染時(shí)淮捆,遵循“塊級(jí)元素占據(jù)一行郁油,行內(nèi)元素一行水平排列占據(jù)它自身寬度,再來(lái)塊級(jí)元素素依次向下排列”規(guī)律攀痊,并且這些元素從上到下已艰,從左到右會(huì)將父元素所展示的頁(yè)面撐開。
B蚕苇、脫離普通流:
父元素計(jì)算寬高的時(shí)候哩掺,發(fā)現(xiàn)不了浮動(dòng)元素。一旦有浮動(dòng)元素涩笤,塊級(jí)元素不會(huì)按照“從上到下嚼吞,從左到右”的順序去展示頁(yè)面,塊級(jí)元素會(huì)收縮內(nèi)容寬度(呈現(xiàn)inline-block
的特性)蹬碧,那么舱禽,父容器不會(huì)被里面的浮動(dòng)元素?fù)伍_;
行內(nèi)元素則會(huì)能看見浮動(dòng)元素恩沽,如文本或其他行內(nèi)元素則會(huì)環(huán)繞浮動(dòng)元素誊稚。
例子:脫離普通流?罗心!
(2)小結(jié):
塊級(jí)元素浮動(dòng)渤闷,寬度會(huì)收縮(width:100%
的用武之地)疾瓮;
行內(nèi)元素浮動(dòng),以塊級(jí)特性呈現(xiàn)(不用再寫display: inline-block;
)
塊級(jí)元素浮動(dòng)寬度收縮飒箭,行內(nèi)元素浮動(dòng)以塊級(jí)特性呈現(xiàn)
注:
塊級(jí)元素默認(rèn)樣式可以撐滿父容器狼电,塊級(jí)元素浮動(dòng)則會(huì)收縮到內(nèi)容的本身的寬度。
如:
.box{
float: left;
background: red;
}
注:行內(nèi)元素能發(fā)現(xiàn)浮動(dòng)元素弦蹂,如設(shè)置float
或者position
元素屬性肩碟,便有了塊級(jí)元素的特性,可以設(shè)置寬高凸椿。
span{
float: left;
background: blue;
width: 100px;
height: 50px;
margin: 10px;
};
(3)注:
脫離普通流削祈?!VS abosolute
3削饵、浮動(dòng)的使用場(chǎng)景
(1)兩欄布局
特指一側(cè)是固定寬度岩瘦,另一側(cè)是自適應(yīng)(用margin
間隔來(lái)表示自適應(yīng)的作用,是因?yàn)槠胀ǖ膲K級(jí)元素會(huì)充滿整個(gè)頁(yè)面)
左側(cè)固定寬度窿撬,右側(cè)自適應(yīng) (反之启昧,也可以)
(2)三欄布局
指兩側(cè)寬度固定,中間內(nèi)容區(qū)塊自適應(yīng)
注:
注意html結(jié)構(gòu)順序劈伴,即按照class為menu
——aside
——main
的div元素順序?qū)懛?/p>
當(dāng)一個(gè)浮動(dòng)盒按照設(shè)置實(shí)現(xiàn)左浮動(dòng)時(shí)密末,另一個(gè)浮動(dòng)元素設(shè)置為右浮,此時(shí)這個(gè)右浮跛璧,即相對(duì)于同級(jí)元素的高度進(jìn)行右秆侠铩(除非頁(yè)面放不下被擠下移除外)。
(3)導(dǎo)航條
list-style:none;
float:left(or right);
margin-left:XXpx;
4追城、清除浮動(dòng)
(1)為什么要清除浮動(dòng)刹碾?
雖然浮動(dòng)是一種實(shí)現(xiàn)布局的方式,但是浮動(dòng)在父元素中看不見座柱。一旦在元素標(biāo)簽內(nèi)加入了浮動(dòng)迷帜,浮動(dòng)脫離了普通流,在頁(yè)面渲染時(shí)并不會(huì)按照html結(jié)構(gòu)的計(jì)算規(guī)則色洞,浮動(dòng)元素會(huì)導(dǎo)致父元素所設(shè)置的頁(yè)面無(wú)法撐開戏锹,浮動(dòng)甚至?xí)尭?dòng)的效果疊放在頁(yè)面某些元素效果上。所以必要時(shí)火诸,需要清除浮動(dòng)锦针,這也是浮動(dòng)實(shí)現(xiàn)布局的重要一環(huán)。
從浮動(dòng)具有副作用說(shuō)起:
問(wèn)題A:對(duì)后續(xù)元素位置產(chǎn)生影響
問(wèn)題B:父容器告訴計(jì)算出現(xiàn)問(wèn)題
(2)clear:left?
例子:
clear:left?
-
clear:left;
:要求該盒的top
border邊位于源文檔中在此之前的元素形成的所有左浮動(dòng)盒的bottom
外邊下方
-
clear: right;
:要求該盒的top
border
邊位于源文檔中在此之前的元素形成的所有右浮動(dòng)盒的bottom
外邊下方
(3)清除浮動(dòng)的兩大副作用
對(duì)應(yīng)問(wèn)題B:
【重點(diǎn)】
由于浮動(dòng)在父容器中不能被發(fā)現(xiàn)置蜀,但要解決父容器(或頁(yè)面)撐開的問(wèn)題奈搜,我們必須在浮動(dòng)和父容器(或者浮動(dòng)元素)共存時(shí)尋找到一種解決方法。
即在帶有浮動(dòng)屬性的父元素標(biāo)簽中添加class為clearfix
盯荤,關(guān)于偽元素屬性::after
(或::before
)的固定代碼樣式媚污,
偽元素清除浮動(dòng)法(IE8以上使用):
.clearfix::after {
content:'';
display: block;
clear: both;
}
/*或觸發(fā)ie6的屬性*/
.clearfix {
*zoom:1;
}
設(shè)置一個(gè)普通元素內(nèi)不具有浮動(dòng)的屬性參數(shù),即float:none;
和clear: left;
即可將完成clear:left;
的效果【注意:應(yīng)注重css元素的權(quán)重廷雅,以免報(bào)錯(cuò)】
或
【解決】
方法1:
方法2:
#1采用偽元素(一個(gè)替代標(biāo)簽)解決行內(nèi)浮動(dòng)問(wèn)題
#2采用偽元素(一個(gè)替代標(biāo)簽)解決塊級(jí)浮動(dòng)問(wèn)題
(4)總結(jié)
實(shí)現(xiàn)一個(gè)水平布局
方法1:設(shè)置display:inline-block;
耗美,注意縫隙和上對(duì)其的問(wèn)題
方法2:加入浮動(dòng),用clearfix
的固定代碼包裹解決父元素?fù)伍_頁(yè)面的問(wèn)題
二航缀、定位
1商架、什么是定位?
(1)先了解正常/文檔流(Normal Flow)是什么
Normal Flow即瀏覽器默認(rèn)的文檔布局方式芥玉。一旦添加了浮動(dòng)和定位蛇摸,脫離文檔流之后,頁(yè)面布局的規(guī)則發(fā)生變化灿巧。
(2)定位
通過(guò)設(shè)置position
屬性來(lái)覆蓋默認(rèn)的布局樣式赶袄。即元素添加position
和對(duì)應(yīng)的屬性值揽涮,它則會(huì)脫離了文檔流。
position
饿肺,讓一個(gè)元素的位置在以前的基礎(chǔ)上產(chǎn)生變動(dòng)蒋困。(考慮:相對(duì)于誰(shuí)和屬性值)
2、定位的類型
(1)靜態(tài)定位
position: static;
:默認(rèn)值 默認(rèn)的布局方式敬辣。
(2)相對(duì)定位:相對(duì)于自身的位置
position: relative;
:相對(duì)默認(rèn)的布局位置進(jìn)行定位雪标。
注:
left
和top
只對(duì)position:absolution/relative/fixed;
生效
所謂的相對(duì)定位,是針對(duì)移動(dòng)的元素自身溉跃,相對(duì)于它本身原先位置做了對(duì)應(yīng)位置的偏移村刨。但它所占用的文檔流位置大小是沒(méi)有變的。
(3)絕對(duì)定位:相對(duì)于父元素位置
position: absolute;
絕對(duì)定位元素脫離正常文檔流撰茎,相對(duì)其定位上下文(Positioning Context)進(jìn)行定位嵌牺。 即頁(yè)面上的正常元素看不見該絕對(duì)定位元素。但頁(yè)面上絕對(duì)定位常覆蓋其他元素龄糊。多個(gè)絕對(duì)定位元素存在頁(yè)面髓梅,它們之間的絕對(duì)定位也相互看不見,產(chǎn)生重疊現(xiàn)象绎签。
尋找頁(yè)面中一個(gè)元素絕對(duì)位置枯饿,可以先設(shè)置該元素絕對(duì)定位:position: absolute;
然后先從它的父元素中進(jìn)行相對(duì)定位:position: relative;
中確定該元素的絕對(duì)定位;
如果沒(méi)有此絕對(duì)定位诡必,再?gòu)乃母冈氐母冈兀ㄈ鏱ody)里的位置找奢方;如果沒(méi)有,則根據(jù)html的根節(jié)點(diǎn)作為參考爸舒。
總結(jié):
使用絕對(duì)定位時(shí)蟋字,設(shè)置好參考點(diǎn),一般扭勉,絕對(duì)定位的參考點(diǎn)為元素父容器
如一個(gè)元素設(shè)置了position:absolute鹊奖;
,那么它的父容器則設(shè)置position:relative涂炎;
注:
元素中使用了position:absolute;
忠聚,就像浮動(dòng)一樣有了一些特性:
A、加入絕對(duì)定位后唱捣,寬度收縮
B两蟀、加入絕對(duì)定位后,行內(nèi)元素呈現(xiàn)快接的特性震缭,可以添加寬高
(4)z-index
由于使用絕對(duì)定位之后赂毯,產(chǎn)生元素覆蓋的問(wèn)題,z-index
可以解決元素之間覆蓋順序的問(wèn)題,,設(shè)置它的層疊順序党涕。如:
(5)固定定位
position: fixed;
相對(duì)瀏覽器窗口進(jìn)行定位烦感。
如“回到頂部”、“內(nèi)容變固定窗口不變”等效果膛堤。因此當(dāng)滾動(dòng)產(chǎn)生時(shí)手趣,固定定位元素依然處于窗口的某個(gè)固定位置。
.feedback {
right: 30px;
bottom: 30px;
position: fixed;
}
(6)粘性定位(兼容性差)
position: sticky;
是相對(duì)定位和固定定位的結(jié)合骑祟。
默認(rèn)情況下表現(xiàn)為相對(duì)定位,當(dāng)瀏覽器窗口頂端與元素的距離等于 top 屬性的值時(shí)气笙,轉(zhuǎn)變?yōu)楣潭ǘㄎ弧?/p>
如:
三次企、浮動(dòng)和定位——解決的一些問(wèn)題
1、BFC和浮動(dòng)
2潜圃、浮動(dòng)和負(fù)邊距
兩個(gè)浮動(dòng)元素缸棵,如果因放不下導(dǎo)致其中一個(gè)下移,對(duì)下移的元素設(shè)置負(fù) margin
值大于自身的寬度可將其上移
如:
3谭期、用inline-block;
還是浮動(dòng)
(1)inline-block;
- 優(yōu)勢(shì): 不需要清除浮動(dòng)堵第,簡(jiǎn)單,在設(shè)置居中時(shí)更方便,適合子內(nèi)容不多的元素水平排列
- 劣勢(shì): 需要注意縫隙隧出,注意對(duì)齊踏志,ie8以下不能用
(2)float
- 優(yōu)勢(shì): 兼容性好,沒(méi)縫隙問(wèn)題
- 劣勢(shì): 需要清除浮動(dòng)胀瞪,適合稍大的布局
4针余、用定位還是浮動(dòng)?
大布局凄诞、自適應(yīng)用浮動(dòng)圆雁;小元素、固定寬高用定位帆谍。具體要結(jié)合實(shí)際情況是關(guān)鍵伪朽。
如: