一、浮動(dòng)
標(biāo)準(zhǔn)流：塊標(biāo)簽是一個(gè)占一行址貌，從上往下布局铐拐。
行內(nèi)標(biāo)簽一行可以顯示多個(gè)徘键，從左往右布局，直到遇到邊界自動(dòng)換行
脫流：浮動(dòng)遍蟋、定位
1.浮動(dòng)：就是讓豎著顯示的標(biāo)簽橫著來(lái),塊的默認(rèn)寬度是內(nèi)容的寬度
float：left和right
注意：1.如果要使用浮動(dòng)吹害，那么同一級(jí)的所有標(biāo)簽都要浮動(dòng)
2.如果父標(biāo)簽浮動(dòng)，那么子標(biāo)簽的位置會(huì)跟著一起動(dòng)
3.布局的基本順序：從上往下虚青，從左往右
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.top{
float: right;
width: 100%;
height: 120px;
background-color: red;
}
.left{
float: left;
background-color: palevioletred;
width: 25%;
height: 400px;
}
.mid{
float: left;
background-color: green;
width: 50%;
height: 400px;
}
.right{
float: left;
background-color: yellow;
width: 25%;
height: 400px;
}
.down{
float: left;
background-color: black;
width: 100%;
height: 150px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="left"></div>
<div class="mid">
<p >窗前明月光</p>
</div>
<div class="right"></div>
<div class="down"></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>
<style type="text/css">
#d1{
float: left;
width: 60px;
height: 60px;
background-color: yellow;
}
#d2{
width: 400px;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
發(fā)哈發(fā)貨客服alhfqufjkvbakbkaf發(fā)開(kāi)發(fā)倍經(jīng)驗(yàn)啊發(fā)發(fā)卡號(hào)積分看到房間卡加快那份發(fā)發(fā)看房間啊大家愛(ài)護(hù)的預(yù)付差紅包和保護(hù)巴驢驢了會(huì)不會(huì)發(fā)放
</div>
</body>
</html>
三棒厘、清除浮動(dòng)
清除浮動(dòng)：是指清除因?yàn)楦?dòng)而產(chǎn)生的問(wèn)題(高度塌陷)--問(wèn)題不是什么時(shí)候都會(huì)產(chǎn)生的
a.添加空的div
在父標(biāo)簽(高度塌陷的標(biāo)簽)的最后添加一個(gè)空的div纵穿，并且設(shè)置這個(gè)div的樣式表 clear:both
(可能會(huì)產(chǎn)生大量的額外的代碼)
b.設(shè)置overflow: hidden;
在父標(biāo)簽中設(shè)置樣式表的overflow的值為hidden
c.萬(wàn)能清除法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*2.清除浮動(dòng)方案2*/
/*.clear{
overflow: hidden;
}*/
/*3.清除浮動(dòng)方案3*/
.clear:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clear{
zoom: 1;
}
</style>
</head>
<body>
<div style="height: 100px;background-color: yellow;"></div>
<div style="background-color: blue;" class="clear">
<div style="width: 30%;background-color: fuchsia;height: 200px;float: left;"></div>
<div style="width: 30%;background-color: indigo;height: 200px;float: left;"></div>
<!--1.清除方案1-->
<!--<div id="" style="clear: both;">
-->
<!--</div>-->
</div>
</body>
</html>
四、diaplay
1.HTML標(biāo)簽分為塊和行內(nèi)
3.CSS中標(biāo)簽分為三類：塊標(biāo)簽绊谭，行內(nèi)塊政恍、行內(nèi)(display)
(在標(biāo)準(zhǔn)流中)
block：塊(一個(gè)占一行，默認(rèn)寬度是100%达传，高度默認(rèn)根據(jù)內(nèi)容來(lái)確定篙耗；直接設(shè)置寬高有效)
inline-block：行內(nèi)塊(一行可以有多個(gè)，默認(rèn)寬高是內(nèi)容的寬高宪赶；直接設(shè)置寬高有效)
inline：行內(nèi)(一行可以有多個(gè)宗弯，默認(rèn)寬高是內(nèi)容的寬高；設(shè)置寬高無(wú)效)
通過(guò)改變標(biāo)簽的display的值搂妻，可以讓一個(gè)標(biāo)簽在塊蒙保、行內(nèi)塊和行內(nèi)之間任意切換
注意：inline-block標(biāo)簽的右邊默認(rèn)都有一個(gè)間隙，不能與其他標(biāo)簽無(wú)縫連接(目前沒(méi)有辦法清除)
五欲主、定位
定位
1.距離
top：標(biāo)簽頂部距離其他標(biāo)簽的位置
bottom：標(biāo)簽的底部距離其他標(biāo)簽的位置
left：標(biāo)簽的左邊距離其他標(biāo)簽的位置
right：標(biāo)簽的右邊距離其他標(biāo)簽的位置
2.position
想要設(shè)置標(biāo)簽的top邓厕，bottom，left扁瓢，right的值有效详恼，必須設(shè)置標(biāo)簽的參考方式
initial：(默認(rèn)值) 沒(méi)有參考對(duì)象
absolute:相對(duì)第一個(gè)position的值是非static,非initial的父標(biāo)簽進(jìn)行定位
relative：正常位置定位(按照標(biāo)準(zhǔn)流定位)
fixed：相對(duì)于瀏覽器定位
sticky：不滾動(dòng)的時(shí)候按標(biāo)準(zhǔn)流布局，滾動(dòng)的時(shí)候相對(duì)瀏覽器定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
/*position: static;*/
width: 500px;
height: 10000px;
background-color: aqua;
/*top: 100px;*/
}
#d2{
position: absolute;
width: 100px;
height: 100px;
background-color: #DB7093;
top: 50px;
}
#d3{
position: sticky;
width: 50px;
height: 30px;
background-color: yellow;
bottom: 20px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
<div id="d3">
</div>
</div>
</body>
</html>
六引几、relative
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d0{
width: 500px;
background-color: black;
}
#d1{
float: left;
width: 100px;
height: 100px;
background-color: green;
position: relative;
margin-left: 20px;
margin-top: 20px;
}
#d0{
overflow: hidden;
}
</style>
</head>
<body>
<div id="d0">
<div id="d1"></div>
<div id="d1"></div>
<div id="d1"></div>
<div id="d1"></div>
<div id="d1"></div>
<div id="d1"></div>
<div id="d1"></div>
<div id="d1"></div>
</div>
</body>
</html>
七昧互、盒子模型
每一個(gè)標(biāo)簽都是有四個(gè)部分組成
1.內(nèi)容：顯示標(biāo)簽內(nèi)容的部分，可見(jiàn)的(設(shè)置寬和高的值伟桅，就是內(nèi)容部分的值)
2.內(nèi)邊距(padding)：可見(jiàn)的敞掘，不能顯示內(nèi)容(通過(guò)設(shè)置padding來(lái)改變其值，默認(rèn)是零)
3.邊框(border)：可見(jiàn)的楣铁，如果有內(nèi)邊距邊框就顯示在內(nèi)邊距上玖雁，否則顯示在內(nèi)容上
4.外邊距(margin)：不可見(jiàn)的，但是會(huì)占據(jù)瀏覽器的空間
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*注意：以后再寫網(wǎng)頁(yè)的時(shí)候民褂，在樣式表的最前面關(guān)閉自帶的所有的margin和padding*/
*{
margin: 0;
padding: 0;
}
div{
background-color:fuchsia;
/*1.設(shè)置內(nèi)容大小*/
width:100px;
height:100px;
/*2.padding的值有四個(gè)
可以單獨(dú)設(shè)茄菊，也可以一起設(shè)置*/
padding: 10px;
padding: 20px 40px;
/*3.邊框
可以單獨(dú)設(shè)疯潭，也可以一起設(shè)置
*格式：寬度 樣式 顏色
* a.樣式： solid-實(shí)線 dotted-點(diǎn)狀線 double-雙線 dashed-虛線*/
/*同時(shí)設(shè)置四條邊的寬度、樣式面殖、顏色*/
border: 10px inset green;
/*設(shè)置邊框圓角的弧度*/
border-radius: 10px;
/*4.外邊距*/
/*可以單獨(dú)設(shè)置
也可以一起設(shè)置*/
margin: 100px;
}
</style>
</head>
<body>
<div id="">
床前明月光
</div>
</body>
</html>
八竖哩、居中
<!--
1.垂直居中
a.固定標(biāo)簽高度
b.設(shè)置line-height的值和高度一樣
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
height: 100px;
background-color: gold;
}
p{
height: 50px;
width: 200px;
background-color: green;
/*垂直居中*/
line-height: 50px;
/*文字水平居中*/
text-align: center;
}
</style>
</head>
<body>
<div id="">
<p>床前明月光</p>
</div>
</body>
</html>
