#03你認(rèn)真學(xué)了css?浮動(dòng)+定位

自我總結(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绣否、heightmargin```黎炉。


一枝秤、浮動(dòng):

1、從實(shí)踐嘗試到理論定義

(1)例子1:

放不下會(huì)換行

一個(gè)浮動(dòng)盒會(huì)向左或向右移動(dòng)慷嗜,直到其外邊(outerEdge)挨到包含塊邊沿或者另一個(gè)浮動(dòng)盒的外邊淀弹。如果沒(méi)有足夠的水平空間來(lái)浮動(dòng),它會(huì)向下移動(dòng)庆械,直到空間合適或者不會(huì)再出現(xiàn)其它浮動(dòng)了


image
image

(2)例子2:

被卡住

高度不一樣薇溃,即出現(xiàn)一個(gè)卡住的問(wèn)題

image
image

(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)地被擠下去換行浅浮。


image
image

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)元素誊稚。

例子:脫離普通流?罗心!

塊盒看不見浮動(dòng)的 box1里伯,但我是文本我能看見
塊盒看不見浮動(dòng)的 box1,但我是文本我能看見

(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)

簡(jiǎn)單的三欄布局

注:
注意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外邊下方

即:box2設(shè)置clear:right有效嗎?有

image
image

image
image

(3)清除浮動(dòng)的兩大副作用

對(duì)應(yīng)問(wèn)題B:

父容器告訴計(jì)算出現(xiàn)問(wèn)題

image
image

【重點(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:

父容器與浮動(dòng)共存問(wèn)題的解決

方法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)行定位雪标。

相對(duì)定位偏移前
相對(duì)定位偏移前

相對(duì)定位偏移后1
相對(duì)定位偏移后1

相對(duì)定位偏移后2
相對(duì)定位偏移后2

注:
lefttop只對(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;

image
image

然后先從它的父元素中進(jìn)行相對(duì)定位:position: relative; 中確定該元素的絕對(duì)定位;

image
image

如果沒(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ì)定位后唱捣,寬度收縮


image
image

B两蟀、加入絕對(duì)定位后,行內(nèi)元素呈現(xiàn)快接的特性震缭,可以添加寬高


image
image

(4)z-index
由于使用絕對(duì)定位之后赂毯,產(chǎn)生元素覆蓋的問(wèn)題,z-index可以解決元素之間覆蓋順序的問(wèn)題,,設(shè)置它的層疊順序党涕。如:

image
image

(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>

如:


image
image

三次企、浮動(dòng)和定位——解決的一些問(wèn)題

1、BFC和浮動(dòng)

2潜圃、浮動(dòng)和負(fù)邊距

兩個(gè)浮動(dòng)元素缸棵,如果因放不下導(dǎo)致其中一個(gè)下移,對(duì)下移的元素設(shè)置負(fù) margin 值大于自身的寬度可將其上移
如:

image
image

image
image

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)鍵伪朽。

如:


image
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市汛蝙,隨后出現(xiàn)的幾起案子烈涮,更是在濱河造成了極大的恐慌,老刑警劉巖窖剑,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件跃脊,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡苛吱,警方通過(guò)查閱死者的電腦和手機(jī)酪术,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人绘雁,你說(shuō)我怎么就攤上這事橡疼。” “怎么了庐舟?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵欣除,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我挪略,道長(zhǎng)历帚,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任杠娱,我火速辦了婚禮挽牢,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘摊求。我一直安慰自己禽拔,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布室叉。 她就那樣靜靜地躺著睹栖,像睡著了一般。 火紅的嫁衣襯著肌膚如雪茧痕。 梳的紋絲不亂的頭發(fā)上野来,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音踪旷,去河邊找鬼梁只。 笑死,一個(gè)胖子當(dāng)著我的面吹牛埃脏,可吹牛的內(nèi)容都是我干的搪锣。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼彩掐,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼构舟!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起堵幽,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤狗超,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后朴下,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體努咐,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年殴胧,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了渗稍。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片佩迟。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖竿屹,靈堂內(nèi)的尸體忽然破棺而出报强,到底是詐尸還是另有隱情,我是刑警寧澤拱燃,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布秉溉,位于F島的核電站,受9級(jí)特大地震影響碗誉,放射性物質(zhì)發(fā)生泄漏召嘶。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一哮缺、第九天 我趴在偏房一處隱蔽的房頂上張望弄跌。 院中可真熱鬧,春花似錦蝴蜓、人聲如沸碟绑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至押袍,卻和暖如春诵冒,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背谊惭。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工汽馋, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人圈盔。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓豹芯,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親驱敲。 傳聞我的和親對(duì)象是個(gè)殘疾皇子铁蹈,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,761評(píng)論 1 92
  • 1. 前言 前端圈有個(gè)“怪谡#”:在面試時(shí)握牧,問(wèn)個(gè)css的position屬性能刷掉一半人,其中不乏工作四五年的同學(xué)娩梨。在...
    YjWorld閱讀 4,472評(píng)論 5 15
  • 學(xué)會(huì)使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,319評(píng)論 2 66
  • CSS 是什么 css(Cascading Style Sheets)沿腰,層疊樣式表,選擇器{屬性:值狈定;屬性:值}h...
    崔敏嫣閱讀 1,490評(píng)論 0 5
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5颂龙? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 27,522評(píng)論 1 45