一 標(biāo)準(zhǔn)流布局
1.什么是標(biāo)準(zhǔn)流
在沒有給標(biāo)簽通過css布局的時候往踢，標(biāo)簽在瀏覽器中有一套默認(rèn)的布局該規(guī)則峻呕，這個規(guī)則就是標(biāo)準(zhǔn)流
2.標(biāo)準(zhǔn)流的布局規(guī)則
1）塊級標(biāo)簽 -------- 一個占一行（不管標(biāo)簽本身的寬度）瘦癌，設(shè)置寬高有效跷敬，默認(rèn)寬度是父標(biāo)簽的寬度，默認(rèn)高度是內(nèi)容標(biāo)簽的高度
例如：p,h1-h6,hr,div.....
2）行內(nèi)標(biāo)簽 -------- 一行可以有多個桶癣；默認(rèn)大小是內(nèi)容大心锼；設(shè)置寬度無效
例如：a,font,label,span...
3）行內(nèi)塊標(biāo)簽 ------ 一行顯示多個碎税，默認(rèn)大小是內(nèi)容大小雷蹂，設(shè)置寬高有效
例如：input杯道，button，img....
3.display屬性（在style中應(yīng)用）
block ----塊級標(biāo)簽
inline ----行內(nèi)標(biāo)簽
inline-block -- 行內(nèi)塊
none ----隱藏
4.脫流/脫標(biāo)
只要標(biāo)簽脫標(biāo)萎庭，標(biāo)準(zhǔn)流的規(guī)則全部失效驳规，不管是什么樣的標(biāo)簽在脫離標(biāo)準(zhǔn)流的情況下都是按以下規(guī)則進(jìn)行布局：
一行可以顯示多個吗购；默認(rèn)大小都是內(nèi)容大性夷；設(shè)置寬度有效踱启。
浮動和定位都可以讓標(biāo)簽脫流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.塊級標(biāo)簽-->
<p style="background-color:green ;width: 200px;">我是段落1</p>
<p style="background-color: red;font-size: 30px;">我是段落2</p>
<!--2.行內(nèi)標(biāo)簽-->
<a style="background-color: yellowgreen;" >百度一下</a>
<a style="background-color: yellow;" >百度一下</a>
</body>
</html>
二 浮動
1.float屬性
left （左浮動）
right（右浮動）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--=======1.浮動能夠讓標(biāo)簽脫流====-->
<!--<div style="background-color: lightblue;height: 20px;float: left;">我是</div>
<div style="background-color: yellow;height: 40px;">你是</div>
-->
<div style="width:100%;background-color: green;height: 100px;"></div>
<div style="width: 60%;background-color: red;float: left;height: 100px;"></div>
<div style="width: 40%;background-color: yellow;float: left;height: 100px;"></div>
<div style="width:100%;background-color: lightblue;float: left;height: 100px;"></div>
</body>
</html>
三 內(nèi)容環(huán)繞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--浮動內(nèi)容環(huán)繞現(xiàn)象
被環(huán)繞標(biāo)簽浮動，環(huán)繞的不浮動
-->
<div style="background-color: goldenrod;width: 100px;height: 100px;float: left;">
<img src="img/luffy.jpg"/>
</div>
<div id="">
近日飘哨，福建省廈門市翔安區(qū)檢察院
在履行公益訴訟職責(zé)中發(fā)現(xiàn)
轄區(qū)存在因食品安全犯罪被判刑的經(jīng)營者
仍從事食品生產(chǎn)經(jīng)營管理工作
遂以書面函告形式
向區(qū)市場監(jiān)督管理局移送相關(guān)線索
建議其依法核實處理
并在全區(qū)范圍內(nèi)開展全面排查
這里插播一下
</div>
</body>
</html>
四 清除浮動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*方法1*/
/*.clear1{
clear: both;
}*/
/*方法2*/
/*.clear2{
overflow: hidden;
}*/
/*方法3*/
.clear2:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
.clear2{
zoom: 1;
}
</style>
</head>
<body>
<!--
1.清除浮動：
清除浮動是清除因為浮動而產(chǎn)生的高度塌陷的問題浊服。
1）高度塌陷
當(dāng)父標(biāo)簽不浮動，并且不設(shè)置固定高度牙躺；子標(biāo)簽浮動就會產(chǎn)生高度塌陷的問題
2)清除浮動的方法
a.空盒子法: 在高度會塌陷的標(biāo)簽的最后添加一個空的div,并且設(shè)置這個空的div的樣式的clear屬性為both
b.設(shè)置高度會塌陷的標(biāo)簽的樣式的overflow屬性為hidden
c.萬能清除法: 給高度會塌陷的標(biāo)簽的after狀態(tài)添加樣式{display:block;clear:both;content:"";visibility:hidden;height:0;}
再給高度會塌陷的標(biāo)簽添加樣式屬性zoom的值為1
-->
<div style="background-color: hotpink; height: 150px;"></div>
<div class="clear2" style="background-color: black;">
<div id="" style="background-color: aquamarine; height: 150px; width: 200px; float: left;">
</div>
<div id="" style="background-color: yellow; height: 550px; width: 200px; float: right;">
</div>
<!--1.空盒子法-->
<!--<div class="clear1"></div>-->
</div>
<div style="background-color: blanchedalmond; height: 250px;">bottom</div>
</body>
</html>
五 定位
定位
1.position屬性--選中定位的標(biāo)簽的參考對象
initial/static-----不定位 默認(rèn)值吨掌；但是body的不是他們
absolut -- 絕對定位脓恕，相對第一個position屬性不是initial/static的父標(biāo)簽進(jìn)行的定位。
relative -- 相對定位秋茫，相對標(biāo)準(zhǔn)流定位（相對于原標(biāo)簽在標(biāo)準(zhǔn)流中的定位）
fixed -- 相對瀏覽器定位
sticky -- 定位保持網(wǎng)頁中最后一個塊在最后面（網(wǎng)頁滾動的時候在瀏覽器最后肛著，網(wǎng)頁不超過一屏跺讯，在內(nèi)容的最后）
2.left/right/top/bottom ---設(shè)置上下左右到參考對象的距離
注意：在不給position屬性的時候直接設(shè)置上下左右是不會發(fā)生變化的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*絕對定位*/
/*#div2{
position: absolute;
right: 200px;
}*/
/*絕對定位*/
/*#div2{
position: relative;
left: 20px;
}*/
/*相對瀏覽器定位*/
/*#div1{
position: fixed;
right: 50px;
bottom: 50px;
}*/
/*相對頁面定位*/
#div3{
position:sticky;
bottom:30px;
}
</style>
</head>
<body>
<!--相對定位 absolute -->
<!--<div id="div1" style="background-color: yellow;width: 400px;height: 400px;">
<div id="div2" style="background-color: red;width: 200px;height: 200px;"></div>
</div>-->
<!--絕對定位 realitive-->
<!--<div id="div1" style="background-color: yellow;width: 200px;height: 200px;"></div>
<div id="div2" style="background-color: red;width: 200px;height: 200px;"></div>
-->
<!--相對瀏覽器定位 fixed -->
<!--<div id="div1" style="background-color:green ;width: 100px;height: 100px;"></div>-->
<!--定位保持在一個網(wǎng)頁或者文段最后-->
<div id="div2" style="background-color:green ;width: 100%;height: 600px;"></div>
<div id="div3" style="background-color:yellow ;width: 100%;height: 100px;"></div>
</body>
</html>
六 盒子模型
盒子模型
html中每個可見的標(biāo)簽都是一個盒子模型局荚，有content危队，padding钙畔，border擎析，margin組成挥下。
1）content ---內(nèi)容，設(shè)置寬和高其實是設(shè)置盒子內(nèi)容的大邢终偎蘸；添加子標(biāo)簽其實是添加到內(nèi)容里面
設(shè)置背景顏色和背景圖都會作用于內(nèi)容部分
2）padding ---內(nèi)容外面的可見部分（默認(rèn)沒有）瞬内，有四個方向虫蝶；設(shè)置padding會讓標(biāo)簽變大倦西；
設(shè)置背景顏色和背景圖都會作用于padding部分
3）border ---邊框，有四個方向粉铐，可以單獨控制各個方向的大小卤档、顏色。
4）margin ---內(nèi)邊距踱承，有四個方向茎活，不可見琢唾，但是占位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
/*設(shè)置padding*/
/*可以一起設(shè)置懒熙，也可以單獨設(shè)置*/
padding-bottom: 20px;
padding-left: 30px;
/*可單獨設(shè)置也可一起設(shè)置*/
border: 10px solid black;
/*可單獨設(shè)置也可一起設(shè)置*/
margin-left: 100px;
}
/*border
* 1）一起設(shè)置
*格式 border：邊框?qū)挾?邊框樣式 邊框顏色
*邊框樣式 --solid（實線）dashed（虛線）dotted（點劃線）double（雙實線 ）
*/
</style>
</head>
<body>
<div id="div1" style="background-color: red;width: 100px;height: 100px;">
<p>我是內(nèi)容</p>
</div>
</body>
</html>
