<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮動</title>
<style media="screen">
/*div,p,h1,span,strong{
border: 1px solid;
}*/
/*.box1 {
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.box2{
height: 100px;
width: 100px;
background-color: blue;
float: right;
}*/
/*.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
}*/
/*.box1{
width: 50px;
height: 50px;
background-color: red;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
}
.box3{
width: 150px;
height: 150px;
background-color: green;
float: right;
}
.box4{
width: 200px;
height: 200px;
background-color: brown;
float: right;
}*/
/*.father{
width: 100px;
height: 200px;
background-color: brown;
}
.box1{
width: 50px;
height: 100px;
background-color: green;
float: left;
}
.box2{
width: 50px;
height: 50px;
background-color: red;
float: left;
}
.box3{
width: 100px;
height: 50px;
background-color: blue;
float: left;
}*/
/*img{
float: left;
}*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
.header{
width: 980px;
height: 100px;
margin: 0 auto;
}
.header .brownDiv{
width: 250px;
height: 100px;
float: left;
background-color: brown;
}
.header .greenDiv{
width: 150px;
height: 50px;
background-color: green;
float: right;
}
.header .blueDiv {
width: 650px;
height: 50px;
background-color: blue;
float: right;
}
.content{
width: 980px;
height: 400px;
margin: 0 auto;
margin-top: 10px;
}
.content .leftDiv{
width: 320px;
height: 400px;
background-color: yellow;
float: left;
}
.content .rightDiv{
width: 650px;
height: 400px;
float: right;
}
.content .rightDiv .rightTop{
width: 650px;
height: 350px;
}
.content .rightDiv .rightTop .rightTopLeft{
width: 400px;
height: 350px;
float: left;
}
.content .rightDiv .rightTop .rightTopLeft .rightTopLeftTop {
width: 400px;
height: 200px;
background-color: red;
}
.content .rightDiv .rightTop .rightTopLeft .rightTopLeftBottom {
width: 400px;
height: 140px;
background-color: blue;
margin-top: 10px;
}
.content .rightDiv .rightTop .rightTopRight {
width: 240px;
height: 350px;
background-color: green;
float: right;
}
.content .rightDiv .rightBottom{
width: 650px;
height: 40px;
background-color: blue;
margin-top: 10px;
}
.footer{
width: 980px;
height: 40px;
background-color:blue;
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<!-- <div class="">
我是模塊
</div>
<p>我是段落</p>
<h1>我是標(biāo)題</h1>
<span>我是域</span>
<strong>我是強(qiáng)調(diào)</strong> -->
<!-- <span class="box1"></span>
<span class="box2"></span> -->
<!-- <div class="box1">
box1
</div>
<div class="box2">
box2
</div>
<div class="box3">
box3
</div>
<div class="box4">
box4
</div> -->
<!-- <div class="father">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div> -->
<!-- 
<p>宋佳慧妄，1980年11月13日出生于黑龍江省哈爾濱市南崗區(qū)，畢業(yè)于上海戲劇學(xué)院表演系剪芍，中國女演員塞淹，因有同名的前輩女演員宋佳，故多被媒體稱為“小宋佳”罪裹。2006年出演電影《好奇害死貓》開始嶄露頭角饱普，并因此獲第26屆中國電影金雞獎最佳女配角提名；2012年状共，出演都市勵志劇《那樣芬芳》套耕，飾演榮芬芳。同年峡继，宋佳憑借《懸崖》獲得第18屆上海電視節(jié)最佳電視劇女演員獎和第9屆中國金鷹電視藝術(shù)節(jié)“最佳藝術(shù)表演女演員獎”冯袍；2013年憑借主演電影《蕭紅》獲29屆中國電影金雞獎“最佳女主角”、第9屆中美電影節(jié)</p> -->
<div class="header">
<div class="brownDiv">
</div>
<div class="greenDiv">
</div>
<div class="blueDiv">
</div>
</div>
<div class="content">
<div class="leftDiv">
</div>
<div class="rightDiv">
<div class="rightTop">
<div class="rightTopLeft">
<div class="rightTopLeftTop">
</div>
<div class="rightTopLeftBottom">
</div>
</div>
<div class="rightTopRight">
</div>
</div>
<div class="rightBottom">
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
第119課 網(wǎng)頁布局方式
網(wǎng)頁的布局方式其實就是瀏覽器是如何對網(wǎng)頁中的元素進(jìn)行排版的
1、標(biāo)準(zhǔn)流（文檔流／普通流）排版方式
1康愤、1其實瀏覽器默認(rèn)的排版方式就是標(biāo)準(zhǔn)的排版方式
1.2在CSS中將元素分為三類儡循，分別是塊級元素／行內(nèi)元素／行內(nèi)塊級元素
1.3在標(biāo)準(zhǔn)流中有兩種排版方式，一種是垂直排版征冷，一種是水平排版
垂直排版择膝，如果元素是塊級元素，那么就會垂直排版
水平排版检激，如果元素是行內(nèi)元素／行內(nèi)塊級元素肴捉，那么就會水平排版
2、浮動流排版方式
3叔收、定位流排版方式
第120課 浮動流基本概念
浮動流排版方式
1齿穗、浮動流是一種“半脫離標(biāo)準(zhǔn)流”的排版方式
2、浮動流只能水平排版今穿，只可以設(shè)置某個元素左對齊或者右對齊缤灵。
注意點
1伦籍、浮動流沒有center居中對齊
2蓝晒、在浮動流中是不可以使用margin：0 auto;的
特點：
1、在浮動流中不區(qū)分塊級元素／行內(nèi)元素／行內(nèi)塊級元素帖鸦，都可以水平排版
2芝薇、在浮動流中不區(qū)分塊級元素／行內(nèi)元素／行內(nèi)塊級元素，都可以設(shè)置寬高
3作儿、綜上所述：浮動流中的元素和標(biāo)準(zhǔn)流中的行內(nèi)塊級元素很像
第121課 浮動元素脫標(biāo)
元素的脫標(biāo)：就是元素脫離了標(biāo)準(zhǔn)流
當(dāng)某一個元素浮動之后洛二，那么這個元素看上去就像被從標(biāo)準(zhǔn)流中刪除了一樣，這個就是浮動元素的脫標(biāo)
影響：如果前面一個元素浮動了攻锰，而后面一個元素沒有浮動晾嘶，
那么這個時候前面的一個元素就會蓋住后面的一個元素
第122課 浮動元素排序規(guī)則
1、相同方向上的浮動元素娶吞，先浮動的元素顯示在前面垒迂，后浮動的元素會顯示在后面
2、不同方向上的浮動元素妒蛇，左浮動會找左浮動机断，右浮動會找右浮動
3、浮動元素浮動之后的位置绣夺，由浮動元素浮動之前在標(biāo)準(zhǔn)流中的位置來確定
第123課 浮動元素貼靠現(xiàn)象
如果父元素的寬度小于元素的寬度吏奸，那么元素就會找他前面一個元素之前的元素，查看寬度是否合適
若果合適陶耍，貼著他前面一個元素之前的元素
如果不夠奋蔚，繼續(xù)尋找，直到找到父元素為止
第124課 浮動元素字圍現(xiàn)象
文字會圍繞浮動元素顯示
第125烈钞、126泊碑、127 課 浮動練習(xí)
垂直方向：標(biāo)準(zhǔn)流
水平方向：浮動流
1产上、copy 去除margin padding
2、從上到下蛾狗，從外到內(nèi)
3晋涣、先垂直標(biāo)準(zhǔn)流，水平浮動流
在企業(yè)開發(fā)中沉桌，垂直方向使用標(biāo)準(zhǔn)流谢鹊，水平方向使用浮動流
復(fù)雜界面
1、從上至下布局
2留凭、從外向內(nèi)布局
3佃扼、水平方向可以先劃分為一左一右，再對左邊／右邊進(jìn)行進(jìn)一步布局
