零基礎(chǔ)學習HTML之CSS篇元素顯示模式文檔流元素浮動和布局
素顯示模式
display : block | none | inline | inline-block
display 屬性用來設(shè)置元素的顯示方式。
block塊對象指的是元素顯示為一個方塊，默認顯示狀態(tài)下，它將占
據(jù)整行，其它的元素只能在下一行顯示。
inline行間對象與block剛好相反，它允許其它元素在同一行顯示。
none隱藏對象
元素的浮動
float : none | left | right
float 屬性用來控制元素是否浮動顯示。
left向左浮動
right向右浮動
none不浮動
浮動的時候元素的顯示屬性也變化了 變?yōu)?"行內(nèi)元素"
Css 布局
div 標簽：
<div> </div>
div 與其它標簽一樣，也是一個XHTML所支持的標簽。
div 是XHTML中指定的，專門用于布局設(shè)計的容器標簽。
在css布局方式中，div 是這種布局方式的核心對象，我們的頁面排版不再依賴于表格，僅從div的使用上說，做一個簡單的布局只需要兩樣東西：div 與 css.因此我們稱這種布局方式為 div + css 布局。
<div id="header">頁面頭部</div>
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer">頁腳</div>
盒模型就是指CSS布局中的每一個元素，在瀏覽器的解釋中，都被當作一個盒狀物。
對我們來說，只需要理解元素在頁面中所占據(jù)的位置。
ie6 / ie7 / firefox 的最終寬度=左邊框?qū)?+ 左內(nèi)邊距 + 寬度 + 右內(nèi)邊距 + 右邊框?qū)?/p>
文檔流
文檔流是瀏覽器解析網(wǎng)頁的一個重要概念，對于一個XHTML網(wǎng)頁，body 元素下的任意元素，根
據(jù)其前后順序，組成了一個個上下關(guān)系，這便是文檔流。瀏覽器根據(jù)這些元素的順序去顯示它
們在網(wǎng)頁中的位置。
文檔流是瀏覽器的默認顯示規(guī)則。
深入浮動
浮動的目的
就是要打破文檔流的默認顯示規(guī)則。如果要讓元素按照我們的布局要求進行顯示。這時就要利
用float屬性。
1.任何申明為 float 的元素自動被設(shè)置為一個"塊級元素"。
2.在標準瀏覽器中 浮動元素脫離了文檔流 ，所以浮動元素后的元素會占據(jù)浮動元素本來應(yīng)該
所處的位置。
3.如果水平方向上沒有足夠的空間容納浮動元素，則轉(zhuǎn)向下一行 。
4.文字內(nèi)容會圍繞在浮動元素周圍 。
5.浮動元素只能浮動至左側(cè)或者右側(cè) 。
清除浮動
clear : none | left | right | both
none :默認值。允許兩邊都可以有浮動對象
left :不允許左邊有浮動對象
right: 不允許右邊有浮動對象
both :不允許有浮動對象
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
文檔流
是瀏覽器解析網(wǎng)頁的一個重要概念。對于一個XHTML網(wǎng)頁，body元素下的任意元素，根據(jù)其先后順序，組成了一個上下關(guān)系，這便是文檔流。瀏覽器根據(jù)這些元素的順序去顯示它們在網(wǎng)頁中的位置。文檔流是瀏覽器的默認顯示規(guī)則。
Float
1）浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
2）由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。
請看下圖，當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：
例1：
例2：
再請看下圖，當框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
例3：
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。
例4：
如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：
例5：
浮動元素會生成一個塊級元素，而不論它本身是何種元素。
代碼：
<head>
<style type="text/css">
span{ float:left; width:100px; height:100px; background-color: #FFCCCC}
</style>
</head>
<body>
<span>內(nèi)聯(lián)元素浮動會變成塊</span>
</body>
效果：
解釋：內(nèi)聯(lián)元素無法設(shè)置寬高，但是加了float后便可以，說明浮動的元素都是塊。
· 如果未給浮動元素設(shè)置寬度，那么其寬度為內(nèi)容寬度。
代碼：
<head>
<style type="text/css">
div{ float:left;background-color: #FFCCCC}
</style>
</head>
<body>
<div>浮動元素的默認寬度看內(nèi)容</div>
</body>
效果：
解釋：div是個塊級元素，默認寬度為父級容器的100%，但是加上浮動后，寬度變的符合內(nèi)容，可見，浮動的元素，如果不設(shè)置寬度，那么它會根據(jù)內(nèi)容自適應(yīng)寬度。
開發(fā)程序時，會經(jīng)常用到框架，比如說常見的考試管理系統(tǒng)就涉及了浮動框架。今天給大家展示一個簡單的例子如何運用浮動框架（獨立功能的頁面）重新組成一個完整的頁面（A頁面），在瀏覽器顯示。要實現(xiàn)如下的效果：
把要實現(xiàn)的頁面分為兩大部分，一部分是左側(cè)主要是系統(tǒng)管理選項（B頁面），另一部分是右側(cè)的查詢結(jié)果顯示（C頁面），最后再用用浮動框架把他們嵌入到最后顯示頁面，便于表達我們就叫它A頁面。A頁面代碼如下：
上圖標紅框的位置是框架嵌入的頁面，它們分別是A頁面左側(cè)（B頁面）和A頁面的右側(cè)（C頁面）。B頁面和C頁面代碼如下：
B頁面代碼
C頁面部分代碼
技術(shù)要點
浮動框架常見屬性
浮動框架iframe是一種特殊的框架頁面，可以在瀏覽器窗口嵌套子窗口，在其中顯示子頁面的內(nèi)容。語法格式是：
文件時其他框架文件的文件名或者鏈接，name是框架的名字，align是指對齊方式（left、right、center、justify），scrolling是框架的滾動條顯示有三個值（yes、no、auto），frameborder是浮動框架的邊框?qū)傩浴?/p>
靜態(tài)網(wǎng)站使用框架注意事項
1、在seo中應(yīng)用了大量的框架結(jié)構(gòu)，會導(dǎo)致搜索引擎的“蜘蛛”程序無法抓取頁面，不利于網(wǎng)站seo，所以不建議大規(guī)模在靜態(tài)網(wǎng)頁上應(yīng)用框架結(jié)構(gòu)。
2、要處理好框架頁面出現(xiàn)的滾動條，滾動條太多會影響用戶體驗，最后得不償失。
3、框架不適合復(fù)雜效果頁面布局（比如說專題頁），靜態(tài)網(wǎng)站還是建議使用div+css布局頁面。
關(guān)于“關(guān)于HTML中浮動框架的應(yīng)用”先聊到這。圖中是源碼一部分，源碼私信。每天學習一個知識點，每日寄語”你所有的努力，都有跡可循。”如轉(zhuǎn)載清標明出處，
