成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

帶你徹底了解CSS浮動(dòng)（文字整理版）

AlphaWatch / 2715人閱讀

摘要：謝老板謝然最近在講堂上開(kāi)了一個(gè)視頻課程帶你徹底掌握浮動(dòng)，因?yàn)橐曨l比較長(zhǎng)分鐘，不方便回顧，我將之做了一個(gè)整理，并從我自己理解的角度進(jìn)行了闡述，以做記錄。相應(yīng)的背景文檔浮動(dòng)結(jié)語(yǔ)以上就是謝老板在視頻中的內(nèi)容，希望幫助到大家。

謝老板（謝然）最近在segmentfault講堂上開(kāi)了一個(gè)視頻課程《帶你徹底掌握CSS浮動(dòng)》，因?yàn)橐曨l比較長(zhǎng)（69分鐘），不方便回顧，我將之做了一個(gè)整理，并從我自己理解的角度進(jìn)行了闡述，以做記錄。

頁(yè)面布局是CSS的一個(gè)重點(diǎn)應(yīng)用，例如：

而實(shí)現(xiàn)頁(yè)面布局主要應(yīng)用到兩種方法，一種是CSS浮動(dòng)，一種是Flexbox（IE9以上），本文主要講的是CSS浮動(dòng)，下一篇文章將闡述Flexbox。

浮動(dòng)元素

什么是浮動(dòng)元素：浮動(dòng)元素同時(shí)處于常規(guī)流內(nèi)和流外的元素。其中塊級(jí)元素認(rèn)為浮動(dòng)元素不存在，而浮動(dòng)元素會(huì)影響行內(nèi)元素的布局，浮動(dòng)元素會(huì)通過(guò)影響行內(nèi)元素間接影響了包含塊的布局。

常規(guī)流：頁(yè)面上從左往右，從上往下排列的元素流，就是常規(guī)流 
脫離常規(guī)流：絕對(duì)定位，fixed定位的元素有自己固定的位置，脫離了常規(guī)流
包含塊：一個(gè)元素離它最近的塊級(jí)元素是它的包含塊

下面詳細(xì)描述以上的內(nèi)容，舉個(gè)?：




  
  
  JS Bin



    

        

        

        

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

上面這段代碼顯示的樣子如下：

塊級(jí)元素認(rèn)為浮動(dòng)元素不存在：紅色的塊級(jí)元素沒(méi)有受到粉色浮動(dòng)元素的影響，還展示在左上角的位置，但是被粉色元素蓋住了左邊的部分

浮動(dòng)元素會(huì)影響行內(nèi)元素：文字部分被藍(lán)色浮動(dòng)元素影響，空出了藍(lán)色浮動(dòng)元素的部分

浮動(dòng)元素會(huì)間接影響了包含塊的布局：浮動(dòng)元素影響了文字部分嗎，使之多出了一行，文字部分撐高了最外面的border框，所以間接影響了包含塊的布局。

其中，浮動(dòng)元素的擺放會(huì)遵循如下的規(guī)則：

盡量靠上

盡量靠左

盡量一個(gè)挨著一個(gè)

不能超出包含塊，除非元素比包含塊更寬

不能超過(guò)所在行的最高點(diǎn)

不能超過(guò)它前面浮動(dòng)元素的最高點(diǎn)

行內(nèi)元素繞著浮動(dòng)元素?cái)[放：左浮動(dòng)元素的右邊和右浮動(dòng)元素的左邊會(huì)出浮動(dòng)元素

應(yīng)用 
浮動(dòng)元素并不能撐起包含塊，這和我們的預(yù)期并不相符。通過(guò)以下的辦法可以將包含塊撐開(kāi)，稱之為閉合浮動(dòng)


閉合浮動(dòng)的方法：

BFC: 1) 包含塊設(shè)置overflow:hidden 或者 2)包含塊設(shè)置display:table-cell/table/flex...

BFC：塊級(jí)格式化上下文。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的塊級(jí)元素如何布局，并且與這個(gè)區(qū)域外部毫不相干。
只要符合以下的條件就是BFC:
1) 根元素
2) float屬性不為none
3) position為absolute或fixed
4) display為inline-block, table-cell, table-caption, flex, inline-flex
5) overflow不為visible

相應(yīng)的背景文檔可以參閱：《BFC的神奇原理》

偽元素：

.clearfix::after {
    content: "";
    display: block;
    clear: both;    
}
clear:both;意味著塊級(jí)元素的左邊和右邊都不能有浮動(dòng)元素。在包含塊的末尾建立了一個(gè)內(nèi)容為空的偽元素，并設(shè)置clear:both，使這個(gè)元素位于所有的浮動(dòng)元素之后，從而撐開(kāi)了包含塊的高。

包含塊自己也浮動(dòng)

這個(gè)方法也是w3c使用的方法。不過(guò)，下一個(gè)元素會(huì)受到這個(gè)浮動(dòng)元素的影響。為了解決這個(gè)問(wèn)題，有些人選擇對(duì)布局中的所有東西進(jìn)行浮動(dòng)，然后使用適當(dāng)?shù)挠幸饬x的元素（常常是站點(diǎn)的頁(yè)腳）對(duì)這些浮動(dòng)進(jìn)行清理。這有助于減少或消除不必要的標(biāo)記。

相應(yīng)的背景文檔：《W3C CSS浮動(dòng)》

結(jié)語(yǔ)

以上就是謝老板在視頻中的內(nèi)容，希望幫助到大家。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/112957.html

相關(guān)文章

  • 解剖CSS布局原理

    摘要：前言本文將帶你重新認(rèn)識(shí)布局，帶你解剖布局原理，前提是你要有基礎(chǔ)本文將解除你在布局方面的疑惑。以下將對(duì)布局元素和文檔流進(jìn)行詳細(xì)講解。而且還能保持文檔流，這是其他元素做不到的。 前言 本文將帶你重新認(rèn)識(shí)CSS布局，帶你解剖布局原理，前提是你要有基礎(chǔ)！本文將解除你在布局方面的疑惑。認(rèn)識(shí)每個(gè)布局元素，了解他們的特性，你才知道為什么會(huì)是這樣的結(jié)果。本文內(nèi)容純屬個(gè)人理解，不代表官方。 此文主要為理...

    李文鵬 評(píng)論0 收藏0

  • css float的深入研究

    摘要：去年就看到張?chǎng)涡翊笊竦倪@篇文章，看了好幾遍才看懂。而對(duì)于使用脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會(huì)無(wú)視它。而這造成的顯示上的差異就是文檔流中的文字實(shí)體不會(huì)與浮動(dòng)元素重疊，而會(huì)與絕對(duì)定位元素重疊。 去年就看到張?chǎng)涡翊笊竦倪@篇文章，看了好幾遍才看懂。后來(lái)再去想其中的一些原理，又忘了。于是打算把它記下來(lái)，一來(lái)做個(gè)備份，二來(lái)希望與君共勉。 這里我對(duì)文章以自己的理解做了一些精簡(jiǎn)，完整版...

    Tony 評(píng)論0 收藏0

  • JavaScript - 收藏集 - 掘金

    摘要：插件開(kāi)發(fā)前端掘金作者原文地址譯者插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡(jiǎn)單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內(nèi)優(yōu)雅的實(shí)現(xiàn)文件分片斷點(diǎn)續(xù)傳。 Vue.js 插件開(kāi)發(fā) - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡(jiǎn)單的方式。插....

    izhuhaodev 評(píng)論0 收藏0

  • 優(yōu)秀文章收藏（慢慢消化）持續(xù)更新~

    摘要：整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí)原文協(xié)作規(guī)范中文技術(shù)文檔協(xié)作規(guī)范阮一峰編程風(fēng)格凹凸實(shí)驗(yàn)室前端代碼規(guī)范風(fēng)格指南這一次，徹底弄懂執(zhí)行機(jī)制一次弄懂徹底解決此類(lèi)面試問(wèn)題瀏覽器與的事件循環(huán)有何區(qū)別筆試題事件循環(huán)機(jī)制異步編程理解的異步 better-learning 整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí) 原文:https://www.ahwgs.cn/youxiuwenzhan...

    JeOam 評(píng)論0 收藏0

  • CSS基礎(chǔ)知識(shí)整理

    摘要：語(yǔ)法基礎(chǔ)語(yǔ)法規(guī)則由兩個(gè)主要部分構(gòu)成選擇器以及一條或多條聲明。語(yǔ)法名屬性屬性值屬性屬性值屬性屬性值選擇器選擇器用于描述一組元素的樣式，也叫做類(lèi)選擇器。后代選則器又稱為包含選擇器，以空格分隔，子元素選擇器只能選擇作為某元素子元素的元素。 1 什么是CSS？ CSS通常稱為CSS樣式表或?qū)盈B樣式表（級(jí)聯(lián)樣式表），主要用于設(shè)置HTML頁(yè)面中的文本內(nèi)容（字體、大小、對(duì)齊方式等）、圖片的外形（寬高...

    Edison 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<