1.標(biāo)準(zhǔn)流和浮動(dòng)
1.標(biāo)準(zhǔn)流
標(biāo)準(zhǔn)流布局 ：在標(biāo)準(zhǔn)流中，塊級(jí)標(biāo)簽是一個(gè)占一行，默認(rèn)寬度是父標(biāo)簽的寬度留晚，默認(rèn)高度是內(nèi)容的高度并且可以設(shè)置寬度和高度
行內(nèi)標(biāo)簽，一行可以顯示多個(gè)告嘲，默認(rèn)寬度和高度都是內(nèi)容的寬度和高度错维，設(shè)置寬高無效
行內(nèi)塊，一行可以顯示多個(gè)橄唬，默認(rèn)寬度和高度都是內(nèi)容的寬高赋焕，設(shè)置寬高有效
塊級(jí)標(biāo)簽：h1-h6, p, hr,ol/ul/dl/il,table, tr, div
行內(nèi)標(biāo)簽:a, img, td, input, select, option, textarea,span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div style="height: 200px; background-color: aqua;"></div>
<div style="height: 400px; background-color: antiquewhite;">
</div>
<div style="height: 200px; background-color: gray;"></div>
</body>
</html>
2.display屬性
2.display(設(shè)置標(biāo)簽的性質(zhì))
block-將標(biāo)簽設(shè)置為塊級(jí)標(biāo)簽
inline-block-將標(biāo)簽設(shè)置為行內(nèi)塊標(biāo)簽（注意：一般不會(huì)通過將標(biāo)簽轉(zhuǎn)換成行內(nèi)塊來解決，因?yàn)樾袃?nèi)塊標(biāo)簽在顯示的時(shí)候左右中間會(huì)有不能消除的空隙）
inline-將標(biāo)簽設(shè)置為行內(nèi)標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- display:bolck-將a轉(zhuǎn)換成塊級(jí)標(biāo)簽 -->
<a href="", style="display: block; background-color: aqua; width: 200px;">abc</a>
<!-- display:inline-block-將a轉(zhuǎn)換成行內(nèi)塊標(biāo)簽 -->
<a href="", style="display: inline-block; background-color: green; width: 200px;">123</a>
<a href="", style="display: inile; background-color: aqua; width: 200px;">abc</a>
</body>
</html>
3.float屬性
1.浮動(dòng)的原理
a.浮動(dòng)會(huì)讓標(biāo)簽脫離標(biāo)準(zhǔn)流進(jìn)行布局（脫流）
b.沒有浮動(dòng)的標(biāo)簽既占池底的位置仰楚，也占水面的位置隆判，浮動(dòng)后只占水面的位置
2.float屬性
lef-左浮動(dòng)
right-右浮動(dòng)
3.脫流后的布局規(guī)則:不管什么標(biāo)簽，脫流后都是一行可以顯示多個(gè)僧界，可以設(shè)置寬度和高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
background-color: chartreuse;
float: left;
width: 200px;
}
a{
background-color: sandybrown;
width: 200px;
float: left;
}
div{
width: 200px;
}
</style>
</head>
<body>
<!--1.設(shè)置float屬性后會(huì)脫流-->
<!-- <p>我是段落1</p>
<p style="background-color: yellow;">我是段落2</p>
<a href="">aaa</a>
<a href="">bbb</a> -->
<div style="background-color: hotpink; height: 300px;float: right;">div1</div>
<div style="background-color: goldenrod; height: 200px;">
div2
</div>
<div style="background-color: yellow; height: 400px; ">div3</div>
<a href="">aaa</a>
</body>
</html>
4.清除浮動(dòng)
1.清除浮動(dòng)
清除浮動(dòng)指的是清除因?yàn)楦?dòng)而產(chǎn)生的高度塌陷問題
2.高度塌陷
當(dāng)父標(biāo)簽不浮動(dòng)侨嘀，并且不設(shè)置高度；但是子標(biāo)簽浮動(dòng)的時(shí)候就會(huì)產(chǎn)生高度塌陷問題
3.清除浮動(dòng)的方法：
a.添加空的div： 在父標(biāo)簽的最后添加一個(gè)空的div,并且設(shè)置樣式clear屬性的值為both
b.在會(huì)塌陷的標(biāo)簽中添加樣式捂襟，將overflow屬性的值設(shè)置為hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*方案2*/
#div2{
overflow: hidden;
}
</style>
</head>
<body>
<div style="background-color: hotpink; height: 100px;"></div>
<!--div2會(huì)出現(xiàn)高度塌陷問題-->
<div id="div2" style="background-color: yellow;">
<div style="background-color: peru; height: 100px; width: 200px;float: left;"></div>
<div style="background-color: seagreen; height: 200px;width: 200px; float: right;"></div>
<!--方案1-->
<!--<div style="clear: both;"></div>-->
</div>
<div style="background-color: lightblue; height: 120px;"></div>
</body>
</html>
5.文字環(huán)繞效果
文字環(huán)繞：被環(huán)繞的標(biāo)簽(例如圖片對(duì)應(yīng)的標(biāo)簽)浮動(dòng)咬腕；文字對(duì)應(yīng)的標(biāo)簽不浮動(dòng)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--圖片對(duì)應(yīng)塊-->
<div id="" style="background-color: sandybrown; float: left;">
<img src="img/.png"/>
</div>
<!--文字對(duì)應(yīng)的塊-->
<div id="" style="background-color: yellow;">
文字部分
</body>
</html>
6.定位
css可以通過letf,right,top,bottom來對(duì)標(biāo)簽進(jìn)行定位 ，前提是設(shè)置好參考對(duì)象
1.定位的屬性：
left-標(biāo)簽左邊距
right-標(biāo)簽右邊距
top-標(biāo)簽上邊距
bottom-標(biāo)簽上邊距
注意：a.定位需要通過position屬性來設(shè)置參考對(duì)象
b.當(dāng)標(biāo)簽的寬度固定的時(shí)候葬荷，同時(shí)設(shè)置left和right只有l(wèi)eft有效(top和bottom同理)
c.可以同時(shí)設(shè)置left和right,不設(shè)置寬度或者寬度值為auto的時(shí)候涨共，標(biāo)簽會(huì)自動(dòng)拉伸
2.position屬性
initial（默認(rèn)值）
static-不希望自己的子標(biāo)簽相對(duì)自己定位的時(shí)候才使用static（）
absolute-相對(duì)第一個(gè)非static和非initial的父標(biāo)簽進(jìn)行定位
relative-相對(duì)于自己在標(biāo)準(zhǔn)流中的位置定位,如果一個(gè)標(biāo)簽希望自己的子標(biāo)簽?zāi)軌蛳鄬?duì)自己定位就設(shè)置這個(gè)標(biāo)簽的position為relative自己不定位
fixed-相當(dāng)于瀏覽器定位
sticky-粘性定位，值針對(duì)網(wǎng)頁底部的標(biāo)簽定位宠漩，如果網(wǎng)頁內(nèi)容超過一屏（需要滾動(dòng)）的時(shí)候举反，相對(duì)瀏覽器定位否則相對(duì)標(biāo)準(zhǔn)流定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 600px;
height: 400px;
background-color: hotpink;
}
#div2{
width: 400px;
height: 300px;
background-color: navajowhite;
position: relative;
/*裁掉自己的子標(biāo)簽超出自己的范圍的部分*/
overflow: hidden;
}
#div3{
background-color: green;
/*1.absolute*/
/*寬高不確定的應(yīng)用*/
/*width: auto;
height: auto;
position: absolute;
left: 50px;
right: 50px;
top: 20px;
bottom: 30px;*/
/*2.relative*/
/*width: 100px;
height: 100px;
position: relative;
top: 50px;*/
/*3.fixed*/
/*width: 100%;
height: 100px;
position: fixed;
top: 0px;
right: 0px;*/
/*4.sticky*/
/*width: 100%;
height: 100px;
position: sticky;
bottom: 0px;*/
width: 100px;
height: 100px;
position: absolute;
right: -25px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<!--<div style="width: 100px; height: 100px; background-color: honeydew;"></div>-->
<div id="div3">
</div>
</div>
</div>
<div id="" style="height: 200000px; background-color: slategray;">
</div>
</body>
</html>
7.盒子模型
html中所有可見的標(biāo)簽都是盒子模型，有固定的結(jié)構(gòu)扒吁，包括：內(nèi)容火鼻，padding,border,margin四個(gè)部分
內(nèi)容-可見的，設(shè)置width和height實(shí)質(zhì)就是設(shè)置內(nèi)容的大小雕崩，默認(rèn)大小跟標(biāo)簽中的內(nèi)容有關(guān)
添加子標(biāo)簽或者設(shè)置文字內(nèi)容魁索，都是添加或者顯示在內(nèi)容部分的
可以background-color會(huì)作用于內(nèi)容部分
padding-可見的，分上下左右四個(gè)部分晨逝，一般沒有默認(rèn)都是0蛾默，
background-color會(huì)作用于padding
border-可見的，分上下左右四個(gè)部分捉貌，一般默認(rèn)都是0
border的背景顏色需要單獨(dú)設(shè)置
margin-不可見支鸡，但是占位置冬念，分上下左右四個(gè)部分，一般默認(rèn)是0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
/*設(shè)置內(nèi)容部分和padding部分的背景顏色*/
background-color: hotpink;
/*1.設(shè)置內(nèi)容的大小*/
width: 100px;
height: 100px;
/*2.設(shè)置padding*/
/*a.分開設(shè)置*/
/*padding-left: 50px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 30px;*/
/*b.一起設(shè)置*/
padding: 20px; /*同時(shí)設(shè)置四個(gè)padding值都為20px*/
/*3.設(shè)置border*/
/*
* border值的格式 ： 線的樣式 顏色 寬度
* 線的樣式 - solid(實(shí)線)\double(雙實(shí)線)\dashed(點(diǎn)劃線)\dotted(虛線)
*/
/*border-left: solid blue 13px;
border-top: solid yellow 10px;
border-right: solid yellowgreen 12px;
border-bottom: solid sienna 12px;*/
/*同時(shí)設(shè)置*/
/*border: solid lightskyblue 10px;*/
/*4.設(shè)置圓角*/
border-radius: 20px;
/*分開切每個(gè)角的圓角*/
/*border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;*/
/*5.添加margin*/
margin-left: 20px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="" style="width: 100px; height: 200px; background-color: yellow;">
</div>
<div id="div1">
<!--俺是看得見福建師范-->
<div id="" style="width: 20px; height: 20px; background-color: yellowgreen;">
</div>
</div>
姓名:<input type="text" name="" id="" value="" style="padding-left: 20px;"/>
</body>
</html>
