2.27筆記

浮動(dòng)

一,標(biāo)準(zhǔn)流標(biāo)準(zhǔn)流就是瀏覽器默認(rèn)布局的方式玉雾,也就是從上往下色建,從左向右的默認(rèn)的排班布局的方式。

二,浮動(dòng)布局方式浮動(dòng)的本質(zhì):就是解決圖片和文字并排的格式問(wèn)題蜘澜。

元素浮動(dòng)后,會(huì)脫離標(biāo)準(zhǔn)流响疚,但是還會(huì)影響標(biāo)準(zhǔn)流的布局鄙信。浮動(dòng)的元素會(huì)不占據(jù)標(biāo)準(zhǔn)流的空間。但是會(huì)影響標(biāo)準(zhǔn)流中的文本的排版.

三,浮動(dòng)的特性

1.浮動(dòng)脫離標(biāo)準(zhǔn)流忿晕,不占位置装诡,但會(huì)影響標(biāo)準(zhǔn)流。浮動(dòng)只有左右浮動(dòng)践盼。

2. 浮動(dòng)的元素A排列位置鸦采,跟上一個(gè)元素(塊級(jí))有關(guān)系。如果上一個(gè)元素有浮動(dòng)咕幻,則A元素頂部會(huì)和上一個(gè)元素的頂部對(duì)齊渔伯;如果上一個(gè)元素是標(biāo)準(zhǔn)流,則A元素的頂部會(huì)和上一個(gè)元素的底部對(duì)齊肄程。

3.一個(gè)父盒子里面的子盒子锣吼,如果其中一個(gè)子級(jí)有浮動(dòng)的选浑,則其他子級(jí)都需要浮動(dòng)。這樣才能一行對(duì)齊顯示吐限。

4.浮動(dòng)根據(jù)元素書寫的位置來(lái)顯示相應(yīng)的浮動(dòng)鲜侥。

5. 元素添加浮動(dòng)后,如果沒(méi)有設(shè)置寬高的話诸典,元素會(huì)具有行內(nèi)塊元素的特性描函。元素的大小完全取決于定義的大小或者默認(rèn)的內(nèi)容多少。也就是具有了包裹性狐粱。

6.浮動(dòng)具有破壞性舀寓,元素浮動(dòng)后,破壞來(lái)原來(lái)的正常流布局肌蜻,造成內(nèi)容塌陷互墓。如果一個(gè)標(biāo)準(zhǔn)流的父盒子真椿,沒(méi)有設(shè)置高的情況下愕撰,所有的子盒子進(jìn)行了浮動(dòng),那么父盒子的高度會(huì)塌陷成0.

四,解決浮動(dòng)破壞性造成的高度塌陷的問(wèn)題1,在父盒子上設(shè)置overflow: hidden坷澡;之后豆挽,父盒子具有的包裹性育谬,就不會(huì)出現(xiàn)高度塌陷的問(wèn)題了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末帮哈,一起剝皮案震驚了整個(gè)濱河市膛檀,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌娘侍,老刑警劉巖咖刃,帶你破解...
    沈念sama閱讀 212,332評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異憾筏,居然都是意外死亡嚎杨,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,508評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門氧腰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)磕潮,“玉大人,你說(shuō)我怎么就攤上這事容贝。” “怎么了之景?”我有些...
    開(kāi)封第一講書人閱讀 157,812評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵斤富,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我锻狗,道長(zhǎng)满力,這世上最難降的妖魔是什么焕参? 我笑而不...
    開(kāi)封第一講書人閱讀 56,607評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮油额,結(jié)果婚禮上叠纷,老公的妹妹穿的比我還像新娘。我一直安慰自己潦嘶,他們只是感情好涩嚣,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,728評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著掂僵,像睡著了一般航厚。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上锰蓬,一...
    開(kāi)封第一講書人閱讀 49,919評(píng)論 1 290
  • 那天幔睬,我揣著相機(jī)與錄音,去河邊找鬼芹扭。 笑死麻顶,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的舱卡。 我是一名探鬼主播辅肾,決...
    沈念sama閱讀 39,071評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼灼狰!你這毒婦竟也來(lái)了宛瞄?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 37,802評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤交胚,失蹤者是張志新(化名)和其女友劉穎份汗,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體蝴簇,經(jīng)...
    沈念sama閱讀 44,256評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡杯活,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,576評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了熬词。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片旁钧。...
    茶點(diǎn)故事閱讀 38,712評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖互拾,靈堂內(nèi)的尸體忽然破棺而出歪今,到底是詐尸還是另有隱情,我是刑警寧澤颜矿,帶...
    沈念sama閱讀 34,389評(píng)論 4 332
  • 正文 年R本政府宣布寄猩,位于F島的核電站,受9級(jí)特大地震影響骑疆,放射性物質(zhì)發(fā)生泄漏田篇。R本人自食惡果不足惜替废,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,032評(píng)論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望泊柬。 院中可真熱鬧椎镣,春花似錦、人聲如沸兽赁。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,798評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)闸氮。三九已至剪况,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蒲跨,已是汗流浹背译断。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,026評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留或悲,地道東北人孙咪。 一個(gè)月前我還...
    沈念sama閱讀 46,473評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像巡语,于是被迫代替她去往敵國(guó)和親翎蹈。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,606評(píng)論 2 350

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

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案男公? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評(píng)論 1 92
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表荤堪,主要用...
    寥寥十一閱讀 1,825評(píng)論 0 6
  • 當(dāng)你再一次暗示男友送你“5.20”禮物時(shí),他仍舊不解枢赔,你發(fā)送了一張因怒火而微微漲紅的小臉澄阳,他不明所以地賠笑著:“寶...
    詩(shī)涼閱讀 931評(píng)論 3 4
  • 生活并不復(fù)雜 如果能落實(shí)到吃飯上 無(wú)非是早中晚三餐 與閨蜜吃飯 約個(gè)日子組個(gè)局 我能安靜 她能囂張 我可以清純 她...
    初之閱讀 231評(píng)論 2 0
  • 2016年12月1日 周四 婆婆一直提醒我,你爸不住走了踏拜,房子別空著租出去吧碎赢。婆婆性子比我還急,于是我寫了一張租房...
    魅力春天閱讀 224評(píng)論 0 1