整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          零基礎(chǔ)學(xué)習(xí)HTML之CSS篇元素顯示模式文檔流元素浮動(dòng)和布局

          素顯示模式

          display : block | none | inline | inline-block

          display 屬性用來(lái)設(shè)置元素的顯示方式。

          block塊對(duì)象指的是元素顯示為一個(gè)方塊,默認(rèn)顯示狀態(tài)下,它將占

          據(jù)整行,其它的元素只能在下一行顯示。

          inline行間對(duì)象與block剛好相反,它允許其它元素在同一行顯示。

          none隱藏對(duì)象

          元素的浮動(dòng)

          float : none | left | right

          float 屬性用來(lái)控制元素是否浮動(dòng)顯示。

          left向左浮動(dòng)

          right向右浮動(dòng)

          none不浮動(dòng)

          浮動(dòng)的時(shí)候元素的顯示屬性也變化了 變?yōu)?"行內(nèi)元素"

          Css 布局

          div 標(biāo)簽:

          <div> </div>

          div 與其它標(biāo)簽一樣,也是一個(gè)XHTML所支持的標(biāo)簽。

          div 是XHTML中指定的,專門用于布局設(shè)計(jì)的容器標(biāo)簽。

          在css布局方式中,div 是這種布局方式的核心對(duì)象,我們的頁(yè)面排版不再依賴于表格,僅從div的使用上說(shuō),做一個(gè)簡(jiǎn)單的布局只需要兩樣?xùn)|西:div 與 css.因此我們稱這種布局方式為 div + css 布局。

          <div id="header">頁(yè)面頭部</div>

          <div id="content">

          <div id="left"></div>

          <div id="right"></div>

          </div>

          <div id="footer">頁(yè)腳</div>

          盒模型就是指CSS布局中的每一個(gè)元素,在瀏覽器的解釋中,都被當(dāng)作一個(gè)盒狀物。

          對(duì)我們來(lái)說(shuō),只需要理解元素在頁(yè)面中所占據(jù)的位置。

          ie6 / ie7 / firefox 的最終寬度 =左邊框?qū)?+ 左內(nèi)邊距 + 寬度 + 右內(nèi)邊距 + 右邊框?qū)?/p>

          文檔流

          文檔流是瀏覽器解析網(wǎng)頁(yè)的一個(gè)重要概念,對(duì)于一個(gè)XHTML網(wǎng)頁(yè),body 元素下的任意元素,根

          據(jù)其前后順序,組成了一個(gè)個(gè)上下關(guān)系,這便是文檔流。瀏覽器根據(jù)這些元素的順序去顯示它

          們?cè)诰W(wǎng)頁(yè)中的位置。

          文檔流是瀏覽器的默認(rèn)顯示規(guī)則。

          深入浮動(dòng)

          浮動(dòng)的目的

          就是要打破文檔流的默認(rèn)顯示規(guī)則。如果要讓元素按照我們的布局要求進(jìn)行顯示。這時(shí)就要利

          用float屬性。

          1.任何申明為 float 的元素自動(dòng)被設(shè)置為一個(gè)"塊級(jí)元素"。

          2.在標(biāo)準(zhǔn)瀏覽器中 浮動(dòng)元素脫離了文檔流 ,所以浮動(dòng)元素后的元素會(huì)占據(jù)浮動(dòng)元素本來(lái)應(yīng)該

          所處的位置。

          3.如果水平方向上沒(méi)有足夠的空間容納浮動(dòng)元素,則轉(zhuǎn)向下一行 。

          4.文字內(nèi)容會(huì)圍繞在浮動(dòng)元素周圍 。

          5.浮動(dòng)元素只能浮動(dòng)至左側(cè)或者右側(cè) 。

          清除浮動(dòng)

          clear : none | left | right | both

          none :默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象

          left :不允許左邊有浮動(dòng)對(duì)象

          right: 不允許右邊有浮動(dòng)對(duì)象

          both :不允許有浮動(dòng)對(duì)象

          程序員web前端學(xué)習(xí)路線分享CSS浮動(dòng)-清除浮動(dòng)篇,為什么要清除浮動(dòng)

          這里所說(shuō)的清除浮動(dòng),并不是不要浮動(dòng)了,而是清除浮動(dòng)與浮動(dòng)之間的影響。那么到底會(huì)有什么影響呢?

          1.高度塌陷

          舉個(gè)例子我們看一下。



          我們?cè)谶@里設(shè)置了div0是外容器,div1是內(nèi)部容器,div1因?yàn)樵O(shè)置了寬高是100,所以顯示的時(shí)候就是一個(gè)橙色的100*100的方塊,但是div0僅設(shè)置了背景色,因?yàn)閐iv特有的獨(dú)占一行,寬度會(huì)自動(dòng)100%,高度被內(nèi)部容器div1撐開(kāi)了,撐開(kāi)的高度是100像素,所有看到一個(gè)綠色高100像素,寬度100%的容器

          現(xiàn)在我們給div1設(shè)置浮動(dòng)



          這時(shí)候我們發(fā)現(xiàn)div0這個(gè)外容器沒(méi)了,看不見(jiàn)了。。別急,我們?cè)赿iv0里打一些字看看



          我們發(fā)現(xiàn)aaa這些文字出來(lái)了,環(huán)繞在橙色方塊周圍了,這個(gè)原因在浮動(dòng)中我們已經(jīng)講解了,而且我們也發(fā)現(xiàn)綠色的容器也出來(lái)了,但是它的高度僅僅是文字的行高。這就說(shuō)明,內(nèi)部的橙色塊設(shè)置浮動(dòng)后,它的父級(jí)容器綠色塊就不知道橙色容器的高度了,因此綠色容器的高度變成了0,寫入文字后,綠色容器重新被撐開(kāi)高度才可以看到。我們把這種情況稱為高度塌陷

          我們其實(shí)是希望一個(gè)容器中的內(nèi)容不斷的撐開(kāi)容器的高度,這樣我們后續(xù)的內(nèi)容就可以緊貼在上面了,而網(wǎng)頁(yè)中的內(nèi)容并不是都是靜態(tài)的,很多都需要每天更新,更新的內(nèi)容多少,圖片高度,都不相同。那么后面的東西想要緊貼上面的內(nèi)容,上面內(nèi)容的高度就不能設(shè)置一個(gè)固定數(shù)值,否則很多數(shù)據(jù)的時(shí)候放不下。如果不設(shè)置高度,一旦設(shè)置浮動(dòng)后,就會(huì)出現(xiàn)高度塌陷。丟失了高度后,頁(yè)面后續(xù)的內(nèi)容就會(huì)插在上面內(nèi)容的底部,頁(yè)面就會(huì)錯(cuò)亂,因此我們就需要做清除浮動(dòng)來(lái)解決這個(gè)問(wèn)題,最終做到即使使用浮動(dòng),外容器也會(huì)因?yàn)閮?nèi)容的多少自動(dòng)撐開(kāi)高度,不會(huì)高度塌陷。

          margin padding設(shè)置值不能正確顯示

          2.Margin和padding屬性值不正確

          由于浮動(dòng)導(dǎo)致父級(jí)子級(jí)之間設(shè)置了css padding、css margin屬性的值不能正確表達(dá)。特別是上下邊的padding和margin不能正確顯示。

          要來(lái)解決這個(gè)問(wèn)題,我們就必須來(lái)認(rèn)識(shí)一下BFC

          什么是BFC

          要來(lái)理解BFC,先介紹一下Box和Formatting Context

          Box 是 CSS 布局的對(duì)象和基本單位, 簡(jiǎn)單來(lái)說(shuō)頁(yè)面就是由Box組成,元素的類型和 display 屬性,決定了這個(gè) Box 的類型。 不同類型的 Box, 會(huì)參與不同的 Formatting Context(一個(gè)決定如何渲染文檔的容器),因此Box內(nèi)的元素會(huì)以不同的方式渲染。

          1、block-level box:display 屬性為 block, list-item, table 的元素,會(huì)生成 block-level box。并且參與 block formatting context;

          2、inline-level box:display 屬性為 inline, inline-block, inline-table 的元素,會(huì)生成 inline-level box。并且參與 inline formatting context;

          3、run-in box: css3 中才有, 這兒先不講了。

          Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域,并且有一套渲染規(guī)則,它決定了其子元素將如何定位,以及和其他元素的關(guān)系和相互作用。最常見(jiàn)的 Formatting context 有 Block fomatting context (簡(jiǎn)稱BFC)和 Inline formatting context (簡(jiǎn)稱IFC)。

          BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域,只有Block-level box參與, 它規(guī)定了內(nèi)部的Block-level Box如何布局,并且與這個(gè)區(qū)域外部毫不相干。

          BFC布局規(guī)則:

          (1)內(nèi)部的Box會(huì)在垂直方向,一個(gè)接一個(gè)地放置。

          (2)Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊

          (3)每個(gè)元素的margin box的左邊, 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化,否則相反)。即使存在浮動(dòng)也是如此。

          (4)BFC的區(qū)域不會(huì)與float box重疊。

          (5)BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器,容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

          (6)計(jì)算BFC的高度時(shí),浮動(dòng)元素也參與計(jì)算

          瞧,最后一條就是我們需要利用的了,我們只需要利用BFC就可以解決浮動(dòng)后外容器高度塌陷的問(wèn)題

          如何生成BFC

          1. 根元素是BFC模式

          這種不能考慮,因?yàn)槎疾皇歉?/p>

          2. 設(shè)置高度

          顯然也是不可以的。

          3. float屬性不為none

          本來(lái)就要設(shè)置浮動(dòng)的。所以也不考慮

          4. position為absolute或fixed

          這樣設(shè)置后,就失去浮動(dòng)的意義了。因此也不使用

          5. display為inline-block, table-cell, table-caption, flex, inline-flex

          雖然可以開(kāi)啟,但是導(dǎo)致父元素原有寬度丟失

          6. overflow不為visible

          這種方法副作用比較小,但是還是有問(wèn)題的。比如overflow設(shè)置為hidden,這個(gè)不行,內(nèi)容的高度是撐開(kāi)的寬度也不能確定。設(shè)置為scroll,會(huì)出現(xiàn)右邊和下邊的滾動(dòng)條寬度

          設(shè)置為auto最合適,不過(guò),如果里面的內(nèi)容使用了定位,并且超出去就會(huì)出現(xiàn)滾動(dòng)條。所以只能保證內(nèi)容不能有定位。

          Clear:both

          清除:兩者間,顧名思義就是清除浮動(dòng)



          我們看到如果要使用clear:both,就需要給高度塌陷的容器里面最后追加一個(gè)div,并且給這個(gè)div設(shè)置為clear:both,我們發(fā)現(xiàn)這種使用方法比較麻煩,每次設(shè)置都需要最后增加div。

          因此我們做了一個(gè)修改

          <!DOCTYPE html>

          我們知道css中最重要的就是浮動(dòng)了,一張網(wǎng)頁(yè)結(jié)構(gòu)布局,用的最多的就是浮動(dòng)了,現(xiàn)在大多數(shù)的網(wǎng)站網(wǎng)頁(yè)結(jié)構(gòu)都是浮動(dòng)布局了,不像早些年的表格布局。所以學(xué)好浮動(dòng)對(duì)我們的開(kāi)發(fā)很重要。

          浮動(dòng)是什么?可能很多人的理解都不一樣,我們來(lái)看看w3c對(duì)浮動(dòng)的解釋是什么

          大多數(shù)小伙伴聽(tīng)得最多的可能就是浮動(dòng)流,下面我們就來(lái)講講什么是浮動(dòng)流以及清除浮動(dòng)。

          首先,我們知道,在一張網(wǎng)頁(yè)中的正常布局流向(排列方式)都是從左到右,從上到下的方式排列。這個(gè)我們稱之為標(biāo)準(zhǔn)文檔流。那什么是浮動(dòng)流呢?

          浮動(dòng)浮動(dòng)浮動(dòng) ==> 因?yàn)橛袀€(gè)浮字,我們可以理解為浮起來(lái)了一樣。就好比標(biāo)準(zhǔn)文檔流在地下排流,浮動(dòng)流在天空上排流。簡(jiǎn)單看個(gè)例子。

          這是兩個(gè)正常排列的div,div獨(dú)占一行,就不用多說(shuō)了吧。然后我們給小的方塊加一個(gè)浮動(dòng)

          然后我們?cè)倏葱Ч?/p>

          然后我們就看到大方塊在小方塊下面,因?yàn)樾》綁K跑天上去了,它就不占據(jù)原來(lái)的位置,會(huì)把那個(gè)位置空出來(lái),所以大方塊會(huì)竄上去,就看起來(lái)兩個(gè)方塊重疊了。

          在看另外一個(gè)例子,子級(jí)浮動(dòng),父級(jí)高度撐不開(kāi)的問(wèn)題,這也是浮動(dòng)帶來(lái)的一個(gè)不好的影響,平常寫代碼的時(shí)候會(huì)經(jīng)常遇到這個(gè)。

          一個(gè)ul標(biāo)簽,下面兩個(gè)li標(biāo)簽,然后給ul加一個(gè)邊框 便于觀看。

          保存運(yùn)行看下正常效果

          然后我們給li標(biāo)簽浮動(dòng)

          效果如下

          這下我們看到ul的高度沒(méi)有了,上下邊框緊緊挨著,這就是剛剛上面說(shuō)的浮起來(lái)的狀況,因?yàn)樽蛹?jí)li標(biāo)簽浮動(dòng)起來(lái)了,它不占據(jù)原來(lái)的位置,它已經(jīng)在天上了,所以它的父級(jí)ul標(biāo)簽包不住它,撐不起來(lái)高度,才會(huì)產(chǎn)生這種狀況。

          那我們要怎么解決這種現(xiàn)象呢。就是清除浮動(dòng)。

          大致分為4種方案:

          1、在并列的子元素,最后加一個(gè)元素,給他加clear:both

          2、給父子加一個(gè)class: clearfix

          .clearfix::after{

          content: '';

          clear: both;

          display: block;

          }

          3、讓父級(jí)觸發(fā)BFC效果

          position:absolute

          display:inline-block

          float:left|right

          overflow:hidden

          4、如何浮動(dòng)的父級(jí)本身就是浮動(dòng)元素嗎,那么不用清除浮動(dòng)了

          咱們就來(lái)給父級(jí)觸發(fā)BFC效果看一下。

          看效果

          現(xiàn)在父級(jí)就把子級(jí)包裹住了,高度也有了。

          有什么問(wèn)題可以點(diǎn)一下關(guān)注,私信小編。


          主站蜘蛛池模板: 人体内射精一区二区三区| 国内精自品线一区91| 少妇无码一区二区三区| 一区视频免费观看| 熟女少妇丰满一区二区| 国精产品一区一区三区| 亚洲国产一区在线| 无码精品一区二区三区| 日本一区二区三区不卡在线视频| 暖暖免费高清日本一区二区三区| 国产日韩高清一区二区三区| 国产熟女一区二区三区四区五区| 少妇激情AV一区二区三区| 成人精品一区二区三区电影| 国产一区二区三区精品视频| 任你躁国语自产一区在| 影院无码人妻精品一区二区| 国产在线乱子伦一区二区| 日韩有码一区二区| 国产99久久精品一区二区| 痴汉中文字幕视频一区| 成人一区专区在线观看| 亚洲av鲁丝一区二区三区| 国产乱码精品一区三上| 伊人无码精品久久一区二区| 国产成人精品一区二三区在线观看| 中文乱码字幕高清一区二区| 国产美女精品一区二区三区| 一区二区三区杨幂在线观看| 国产精品久久久久久一区二区三区 | 日韩精品无码一区二区三区四区| 亚洲色偷精品一区二区三区| 无码午夜人妻一区二区三区不卡视频| 无码人妻一区二区三区兔费 | 老熟女五十路乱子交尾中出一区| 香蕉一区二区三区观| 国产亚洲福利精品一区二区 | 久久亚洲AV午夜福利精品一区| 成人精品视频一区二区三区不卡| 夜色阁亚洲一区二区三区| 一区二区中文字幕在线观看|