一：標(biāo)準(zhǔn)流
<!--1.什么是標(biāo)準(zhǔn)流
標(biāo)簽在沒有添加布局相關(guān)的樣式的時(shí)候祖搓，在瀏覽器中默認(rèn)的布局方式。
塊級標(biāo)簽在標(biāo)準(zhǔn)流中是一個(gè)占一行（不管寬度是多少）湖苞，默認(rèn)寬度是父標(biāo)簽的寬度拯欧，默認(rèn)高度是內(nèi)容的高度财骨，設(shè)置寬高是有效的
行內(nèi)標(biāo)簽在標(biāo)準(zhǔn)流中一行可以顯示多個(gè)；默認(rèn)大小是內(nèi)容的大懈眉帧捌臊；設(shè)置寬高無效(span,a……)
行內(nèi)塊標(biāo)簽在標(biāo)準(zhǔn)流中一行可以顯示多個(gè)；默認(rèn)大小是內(nèi)容的大小理澎，可以設(shè)置寬高（img，input）
2.實(shí)際布局的選擇
a.左右結(jié)構(gòu)使用行內(nèi)塊
display屬性 - 可以讓任何標(biāo)簽變成塊級糠爬、行內(nèi)、行內(nèi)塊砚亭；隱藏標(biāo)簽
b.脫流/脫標(biāo)（脫離標(biāo)準(zhǔn)流）
float(流動(dòng))
定位（letf , right ,top ,bottom , position）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background: burlywood; width: 120px;">
我是div,塊級的
</div>
<div id="" style="background: red ;">
我是div,塊級的
</div>
<span style="background: gold;">
天下英雄盡役
</span>
<span style="background: teal;">
天下無又給
</span>
</body>
</html>
二：display
display屬性（css屬性）
block(塊) -
inline(行內(nèi))
inline-block(行內(nèi)塊) - 默認(rèn)左右有間隙(因?yàn)閾Q行產(chǎn)生的)，可以通過將父標(biāo)簽的字體大小設(shè)置為0來去掉添祸。
none(隱藏)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.d1{
display: inline-block;
}
</style>
</head>
<body style="font-size: 0px;">
<div style="height: 120px; background-color: red;">
<a href="" style="font-size: 20px;">夜帝</a>
<a href="">楚留香</a>
</div>
<div class="d1" style="height: 200px; width: 30%; background-color: darkgray;"></div>
<div class="d1" style="height: 200px; width: 70%; background-color:darkgoldenrod;"></div>
</body>
</html>
三：float
浮動(dòng)
浮動(dòng)會(huì)讓標(biāo)簽脫流
脫流 - 讓標(biāo)簽脫離標(biāo)準(zhǔn)流布局寻仗，不管什么標(biāo)簽脫流了，都是按’一行可以顯示多個(gè)耙替，默認(rèn)大小是內(nèi)容大小曹体，并且設(shè)置寬高有效的方式‘
float屬性
left
right
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="" style="background-color: salmon; height: 50px;">
人生如夢
</div>
<div id="" style="background-color: gold; width: 40%; float:left; ">
hehe
</div>
<div id="" style="background-color: chartreuse; width: 40%; float:left; ">
hehe
</div>
<div id="" style="background-color: darkblue; width: 20%; float:left; ">
hehe
</div>
<div id="" style="background-color: hotpink; width: 100%; float:left; ">
hehe
</div>
</body>
</html>
四：文字環(huán)繞
<!--文字環(huán)繞
被環(huán)繞的標(biāo)簽浮動(dòng)，文字標(biāo)簽不浮動(dòng)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="" style="background-color: lawngreen; width: 80px;height: 80px;float:left ;margin-right: 10px;">
</div>
<p>
本文實(shí)例講述了Python列表切片用法箕别。分享給大家供大家參考，具體如下：Python中符合序列的有序序列都支持切片（slice）串稀，例如列表，字符串到忽，元組清寇。
本文實(shí)例講述了Python列表切片用法。分享給
本文實(shí)例講述了Python列表切片用法颗管。分享給
本文實(shí)例講述了Python列表切片用法滓走。分享給
本文實(shí)例講述了Python列表切片用法。分享給
</p>
</body>
</html>
五：清除浮動(dòng)
1.高度塌陷
當(dāng)父標(biāo)簽不浮動(dòng)比吭，子標(biāo)簽浮動(dòng)的時(shí)候姨涡，父標(biāo)簽就會(huì)產(chǎn)生高度塌陷的問題
2.清除浮動(dòng)
清除浮動(dòng)指的是清除因?yàn)楦?dòng)而產(chǎn)生的高度塌陷問題。
a.方法一：添加空盒子
在高度會(huì)塌陷的父標(biāo)簽的里面最后涛漂，添加一個(gè)空的div;然后給空的div添加樣式检诗，設(shè)置clear屬性的值為both
b.方法二：overflow
給高度會(huì)塌陷的父標(biāo)簽添加樣式瓢剿，設(shè)置overflow屬性值為hidden
c.方法三：萬能清除法
選中高度會(huì)塌陷的父標(biāo)簽，給after狀態(tài)添加樣式：
然后再給這個(gè)父標(biāo)簽添加樣式zoom:1
六：定位
1.定位
定位會(huì)讓標(biāo)簽脫流
2.定位屬性：
top : 到頂部的距離
bottom : 底部的距離
left : 左邊的距離
right ：右邊的距離
以上4個(gè)屬性想要有效攻泼，必須通過position屬性來說明參考對象
position :
initial和static - 默認(rèn)值鉴象，不能定位（定位無效）
absolute - 絕對定位；以第一個(gè)position的值不是默認(rèn)值的父標(biāo)簽進(jìn)行定位（注意：body塊標(biāo)簽的position不是initaial和static）
relative - （相對定位）相對于標(biāo)準(zhǔn)流定位纺弊；（相對自己在標(biāo)簽流的位置定位）一般使用relative是在標(biāo)簽本身不需要定位，但希望自己的子標(biāo)簽相對自己來定位的時(shí)候使用氢惋。
fixed - 相對瀏覽器定位
sticky - 當(dāng)瀏覽器內(nèi)容沒有超過一屏的時(shí)候稽犁，顯示在內(nèi)容的最下面，當(dāng)瀏覽器內(nèi)容超過一屏bottom有效已亥，并且顯示在瀏覽器的底部
top和borrom有效，left和right無效震鹉。
七：盒子模型
1.盒子模型
網(wǎng)頁上所有的可視標(biāo)簽都是一個(gè)盒子模型：一個(gè)標(biāo)簽是由四個(gè)部分組成捆姜，分別是：內(nèi)容（content）、padding泥技、border、margin珊豹；
其中content、padding蜕便、border是可見的贩幻，margin不可見两嘴，但是占位
2.盒子模型的每個(gè)部分
content - 標(biāo)簽內(nèi)容吃溅，設(shè)置標(biāo)簽的寬高就是設(shè)置內(nèi)容部分的大小。標(biāo)簽中的文字和子標(biāo)簽都是添加在content上的
padding - 在內(nèi)容外部决侈，默認(rèn)是0；可見的枉圃，并且背景顏色也作用于padding;有四個(gè)方向
