1、標(biāo)準(zhǔn)流和拖標(biāo)流
標(biāo)準(zhǔn)流布局：
在沒有寫任何布局樣式的時候，標(biāo)簽在網(wǎng)頁中的默認的布局方式。
標(biāo)簽在標(biāo)準(zhǔn)流中的布局主要分為三種：
1)塊級標(biāo)簽：一個占一行；默認寬度是父標(biāo)簽的寬度，高度是內(nèi)容的高度；設(shè)置寬度有效。 eg:div,p,hr,h1~h5,等；
2)行內(nèi)標(biāo)簽：一行可以顯示多個；默認大小是內(nèi)容大小；設(shè)置寬高無效。 eg:a,font,span,等；
3)行內(nèi)塊標(biāo)簽：一行可以顯示多個；默認大小是內(nèi)容大?。辉O(shè)置寬高有效。 eg:input,img,等；
display:
block 塊級標(biāo)簽
inline 行內(nèi)標(biāo)簽
inline-block 行內(nèi)塊標(biāo)簽
none 隱藏
脫流(脫離標(biāo)準(zhǔn)流布局):
不管什么標(biāo)簽以什么技術(shù)成功脫流，那么它的布局方式只有一種：一行可顯示多個；默認大小是內(nèi)容的大小；設(shè)置寬度有效。
浮動和定位都可以脫流：
<!--====================1.標(biāo)準(zhǔn)流布局示例================-->
<h1>====================1.標(biāo)準(zhǔn)流布局示例================</h1>
<!--行內(nèi)標(biāo)簽-->
<a href="" style="background-color: red; width: 100px;">百度</a>
<!--塊級標(biāo)簽-->
<p style="background-color: chartreuse; height: 100px;">我是段落1</p>
<p style="background-color: chartreuse; height: 100px; width: 120px;">我是段落2</p>
<!--行內(nèi)塊(可以看成)-->
<img src="img/bear.png" style="width: 60px; height: 60px;"/>
<img src="img/bucket.png"/>
<input type="" name="" id="" value="" style="width: 100px; height: 200px;" />
<input type="" name="" id="" value="" />
<hr />
<h1>====================2.修改標(biāo)簽類型示例=================</h1>
<!--塊級變成行內(nèi)-->
<p style="background-color: hotpink; display: inline; width: 200px; height: 100px;">我是段落3</p>
<p style="background-color: khaki; display: inline;">我是段落4</p>
<!--塊級變行內(nèi)塊-->
<p style="background-color: lightcoral; height: 60px; display: inline-block;">我是段落5</p>
<p style="background-color: darkolivegreen; height: 60px; display: inline;">我是段落6</p>
<!--行內(nèi)變塊級和行內(nèi)塊-->
<a href="" style="background-color: sandybrown; height: 60px; display: block;">百度</a>
<a href="" style="background-color: aquamarine; height: 60px; display: inline-block;">谷歌</a>
<!--隱藏標(biāo)簽-->
<p style="display: none;">我是段落7</p>
<p>我是段落8</p>
2、浮動
1.浮動
通過設(shè)置標(biāo)簽的float屬性，可以讓標(biāo)簽浮動
left: 左浮動， 浮動后標(biāo)簽靠左顯示
right: 右浮動， 浮動后標(biāo)簽靠右顯示
2.什么時候使用浮動
浮動可以讓豎著顯示的橫著來; 還可以讓標(biāo)簽靠右顯示
<h1>=====================1.浮動會導(dǎo)致標(biāo)簽脫流============================</h1>
<div id="" style="height: 250px;">
<p style="background-color: chartreuse; height: 40px; float: left;">我是段落1</p>
<p style="background-color: lavenderblush; float: left;">我是段落2</p>
<a href="" style="background-color: lightskyblue; height: 40px; float: left;">我是超鏈接</a>
</div>
<h1>======================2.浮動讓標(biāo)簽靠右顯示=======================</h1>
<div id="">
<p style="background-color: khaki; float: right;">我是段落3</p>
<p style="background-color: lavender; float: right;">我是段落4</p>
<p style="background-color: antiquewhite; float: right;">我是段落5</p>
</div>
3、清除浮動
清除浮動指的是清除因為浮動而產(chǎn)生的高度塌陷問題
高度塌陷：如果父標(biāo)簽沒有設(shè)置高度，并且沒浮動，子標(biāo)簽浮動的時候就會出現(xiàn)高度塌陷的問題
清除浮動的三種方法：
1)空盒子法：在會塌陷的標(biāo)簽的最后添加一個空的div，并且設(shè)置這個空的div的clear:both
2)方法2：哪個標(biāo)簽會塌陷就在那個的標(biāo)簽上加上overflow:hidden;
3)萬能清除法：.clearfix1:after{display:block;clear:both;content:".";visibility:hidden;height:0;} .clearfix1{zoom:1;}
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.clearfix:after{
display: block;
clear: both;
content: '';
visibility: hidden;
height: 0;
}
.clearfix{
zoom: 1;
}
</style>
<!--空盒子法-->
<div style="background-color: gainsboro; height: 50px;"></div>
<div id="">
<div style="background-color: red; height: 100px; float: left; width: 40%;"></div>
<div style="background-color: blue; height: 100px; float:left; width: 50%;"></div>
<div style="clear: both;"></div>
</div>
<div style="background-color: greenyellow; height: 50px;"></div>
<div id="" style="height: 100px;"></div>
<!--方法2-->
<div style="background-color: gainsboro; height: 50px;"></div>
<div id="" style="overflow: hidden;">
<div style="background-color: red; height: 100px; float: left; width: 40%;"></div>
<div style="background-color: blue; height: 100px; float:left; width: 50%;"></div>
</div>
<div style="background-color: greenyellow; height: 50px;"></div>
<div id="" style="height: 100px;"></div>
<!--萬能清除法-->
<div style="background-color: gainsboro; height: 50px;"></div>
<div id="" class="clearfix">
<div style="background-color: red; height: 100px; float: left; width: 40%;"></div>
<div style="background-color: blue; height: 100px; float:left; width: 50%;"></div>
</div>
<div style="background-color: greenyellow; height: 50px;"></div>
4、定位
定位屬性：left,right,top,bottom 設(shè)置的分別是左右上下到參考對象的對應(yīng)距離。
注意：如果以上標(biāo)簽要有效果，必須設(shè)置參考對象(position)
設(shè)置定位的參考對象：position屬性
1)initial/static(不定位，即沒有參考對象):body標(biāo)簽在不設(shè)置position的時候不是initial也不是static
2)absolute(絕對定位):將當(dāng)前標(biāo)簽第一個非inital/static的父標(biāo)簽作為參考對象
3)relative(相對定位):相對標(biāo)準(zhǔn)流(自己)位置進行定位;一般講標(biāo)簽的position設(shè)置為relative來保證子標(biāo)簽?zāi)芟鄬ψ约憾ㄎ弧? 4)fixed(相對瀏覽器進行定位)：固定在瀏覽器某個位置
5)sticky:當(dāng)頁面內(nèi)容超過一屏相對瀏覽器定位；如果沒有超過一屏就相對標(biāo)準(zhǔn)流進行定位。
<!--===============1.直接相對父標(biāo)簽定位(父標(biāo)簽本身不能是initial/static)================-->
<!--<div id="" style="width: 100px; height: 100px; background-color: hotpink; top: 200px; right: 10px;position: absolute;"></div>-->
<!--=====================2.absolute的定位============================-->
<!--<style type="text/css">
#div3{
right: 20px;
position: absolute;
}
</style>
<div style="width: 300px; height: 300px; background-color: red; position: relative;">
<div style="width: 200px; height: 200px; background-color: green; position: relative;">
<div id="div3" style="width: 80px; height: 80px; background-color: blue;">
</div>
</div>
</div>-->
<!--=======================3.relative的定位================================-->
<!--<style type="text/css">
#div3{
bottom: 50px;
position: relative;
}
</style>
<div id="div3" style="width: 100px; height: 100px; background-color: hotpink;"></div>-->
<!--========================4.相對瀏覽器定位:fixed=================================-->
<!--<style type="text/css">
#div3{
right: 10px;
top: 100px;
position: fixed;
}
</style>
<div id="div3" style="width: 100px; height: 100px; background-color: hotpink;"></div>
<div id="" style="height: 10000px; background-color: yellow;">
</div>-->
<!--========================5.sticky定位=================================-->
<style type="text/css">
#div3{
bottom: 10px;
position: sticky;
}
</style>
<div id="" style="height: 200px; background-color: yellow;"></div>
<div id="div3" style="width: 100%; height: 100px; background-color: hotpink;"></div>
5、盒子模型
1.盒子模型
每個可見的標(biāo)簽其實都是由content、padding、border和margin四個部分組成；
其中content、padding、border是可見的，margin是不可見的，但是占位置
2.控制盒子模型
1)content - 設(shè)置標(biāo)簽的寬度和高度其實就是在設(shè)置content的大小;
標(biāo)簽中的內(nèi)容或者子標(biāo)簽都是顯示或者添加到content上的;
設(shè)置標(biāo)簽的背景會作用于content
2)padding(內(nèi)邊距) - padding分四個方向；這四個方向可以單獨控制(大小);
設(shè)置標(biāo)簽的背景會作用于padding
3)border (邊框) - border分四個方向；每個方向可以單獨控制(大小、樣式和顏色);
4)margin(外邊距) - margin分四個方向; 每個方向可以單獨控制(大小)
不可見，但是占位置
<style type="text/css">
#div1{
/*1.控制content的大小*/
width: 100px;
height: 100px;
/*2.控制padding
1)一起設(shè)置(同時給四個方向賦值)
padding: 值;
2)單獨設(shè)四個方向的值
padding-left
padding-right
padding-top
padding-bottom
*/
/*padding: 50px;*/
padding-left: 50px;
padding-top: 10px;
/*3.控制border
1)一起設(shè)置
border: 邊框?qū)挾?邊框的樣式(solid-實線，dashed-虛線, dotted-點劃線, double-雙線) 邊框顏色;
*/
border: 3px solid rgba(255,0,0,1);
border-left: 5px dotted #0000FF;
/*2)設(shè)置圓角*/
/*同時設(shè)置四個方向的圓角*/
/*border-radius: 10px;*/
/*單獨設(shè)置某一個圓角*/
/*border-top-left-radius: 20px;
border-bottom-right-radius: 30px;*/
/*border-radius: 20px 30px;*/
border-radius: 10px 20px 30px;
/*4.控制margin*/
/*margin: 100px;*/
margin-left: 100px;
}
</style>
<div id="div1" style="background-color: khaki;">
div1
</div>
<input style="padding-left: 20px;"/>
<div id="">
<div id="" style="width: 200px; height: 200px; background-color: rgba(0,0,255,0.8); float: left;">
</div>
<div style="width: 100px; height: 100px; background-color: red;">
</div>
</div>
