素顯示模式
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)注,私信小編。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。