国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

帶你徹底了解CSS浮動（文字整理版）

AlphaWatch / 2658人閱讀

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

謝老板（謝然）最近在segmentfault講堂上開了一個視頻課程《帶你徹底掌握CSS浮動》，因為視頻比較長（69分鐘），不方便回顧，我將之做了一個整理，并從我自己理解的角度進行了闡述，以做記錄。

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

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

浮動元素

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

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

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




  
  
  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.

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

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

浮動元素會影響行內(nèi)元素：文字部分被藍色浮動元素影響，空出了藍色浮動元素的部分

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

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

盡量靠上

盡量靠左

盡量一個挨著一個

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

不能超過所在行的最高點

不能超過它前面浮動元素的最高點

行內(nèi)元素繞著浮動元素擺放：左浮動元素的右邊和右浮動元素的左邊會出浮動元素

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


閉合浮動的方法：

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

BFC：塊級格式化上下文。它是一個獨立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的塊級元素如何布局，并且與這個區(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;意味著塊級元素的左邊和右邊都不能有浮動元素。在包含塊的末尾建立了一個內(nèi)容為空的偽元素，并設(shè)置clear:both，使這個元素位于所有的浮動元素之后，從而撐開了包含塊的高。

包含塊自己也浮動

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

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

結(jié)語

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112957.html

相關(guān)文章

  • 解剖CSS布局原理

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

    李文鵬 評論0 收藏0

  • css float的深入研究

    摘要：去年就看到張鑫旭大神的這篇文章，看了好幾遍才看懂。而對于使用脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會無視它。而這造成的顯示上的差異就是文檔流中的文字實體不會與浮動元素重疊，而會與絕對定位元素重疊。 去年就看到張鑫旭大神的這篇文章，看了好幾遍才看懂。后來再去想其中的一些原理，又忘了。于是打算把它記下來，一來做個備份，二來希望與君共勉。 這里我對文章以自己的理解做了一些精簡，完整版...

    Tony 評論0 收藏0

  • JavaScript - 收藏集 - 掘金

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

    izhuhaodev 評論0 收藏0

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

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

    JeOam 評論0 收藏0

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

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

    Edison 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<