1. 文檔流
文檔流，是指盒子按照html標籤編寫的順序依次從上到下，從左到右排列，塊元素佔一行，行內元素在一行之內從左到右排列，先寫的先排列，後寫的排在後面，每個盒子都佔據自己的位置。
2. 浮動float特性
1、浮動元素有左浮動(float:left)和右浮動(float:right)兩種
2、浮動的元素會向左或向右浮動，碰到父元素邊界、浮動元素、未浮動的元素才停下來
3、相鄰浮動的塊元素可以並在一行，超出父級寬度就換行
4、浮動讓行內元素或塊元素自動轉化爲行內塊元素
5、浮動元素後面沒有浮動的元素會佔據浮動元素的位置，沒有浮動的元素內的文字會避開浮動的元素，形成文字饒圖的效果
6、父元素內整體浮動的元素無法撐開父元素，需要清除浮動
7、浮動元素之間沒有垂直margin的合併
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width:450px;
height:210px;
border:1px solid #000;
margin:50px auto 0;
}
.box img{
float:left;
margin:10px;
margin-bottom:0;
}
.box div{
margin:10px;
font-size:14px;
line-height:22px;
}
</style>
</head>
<body>
<div class="box">
<img src='abc.png' width="50px" height="50px" alt="h5的標誌">
<div>
1、浮動元素有左浮動(float:left)和右浮動(float:right)兩種
2、浮動的元素會向左或向右浮動，碰到父元素邊界、其他元素才停下來
3、相鄰浮動的塊元素可以並在一行，超出父級寬度就換行
4、浮動讓行內元素或塊元素自動轉化爲行內塊元素(此時不會有行內塊元素間隙問題)
5、浮動元素後面沒有浮動的元素會佔據浮動元素的位置，沒有浮動的元素內的文字會避開浮動的元素，形成文字饒圖的效果
6、父元素如果沒有設置尺寸(一般是高度不設置)，父元素內整體浮動的元素無法撐開父元素，父元素需要清除浮動
</div>
</div>
</body>
</html>
3. 清除浮動
- 父級上增加屬性overflow：hidden
- 在最後一個子元素的後面加一個空的div，給它樣式屬性 clear:both（不推薦）
- 使用成熟的清浮動樣式類，clearfix
父級盒子不給高度，子集盒子浮動，父級盒子需要清除浮動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.list{
width:210px;
/* height:400px; */
border:1px solid #000;
margin:50px auto 0;
list-style:none;
padding:0;
/*
第一種清除浮動的方法：
overflow: hidden;
*/
}
.list li{
width:50px;
height:50px;
background-color:gold;
margin:10px;
float:left;
}
/* .clearfix:before{
content:"";
display:table;
}
.clearfix:after{
content:"";
display:table;
clear:both;
} */
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;
}
</style>
</head>
<body>
<!-- ul.list>li{$}*8 -->
<ul class="list clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<!--
第二種清除浮動的方法：
<div style="clear:both"></div>
-->
</ul>
</body>
</html>
4.關於定位
4.1 我們可以使用css的position屬性來設置元素的定位類型，postion的設置項如下：
- relative 生成相對定位元素，元素所佔據的文檔流的位置不變，元素本身相對文檔流的位置進行偏移
- absolute 生成絕對定位元素，元素脫離文檔流，不佔據文檔流的位置，可以理解爲漂浮在文檔流的上方，相對於上一個設置了相對或者絕對或者固定定位的父級元素來進行定位，如果找不到，則相對於body元素進行定位。
- fixed 生成固定定位元素，元素脫離文檔流，不佔據文檔流的位置，可以理解爲漂浮在文檔流的上方，相對於瀏覽器窗口進行定位。
- static 默認值，沒有定位，元素出現在正常的文檔流中，相當於取消定位屬性或者不設置定位屬性
- inherit 從父元素繼承 position 屬性的值
4.2 定位元素特性
絕對定位和固定定位的塊元素和行內元素會自動轉化爲行內塊元素
4.3 定位元素層級
定位元素是浮動的正常的文檔流之上的，可以用z-index屬性來設置元素的層級
4.4 典型定位佈局
1、固定在頂部的菜單
2、水平垂直居中的彈框
3、固定的側邊的工具欄
4、固定在底部的按鈕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.menu{
height:80px;
background-color:gold;
position:fixed;
width:960px;
top:0px;
left:50%;
margin-left:-480px;
}
p{
text-align:center;
}
.popup{
width:500px;
height:300px;
border:1px solid #000;
background-color:#fff;
position:fixed;
left:50%;
margin-left:-251px;
top:50%;
margin-top:-151px;
z-index:9999;
}
.popup h2{
background-color:gold;
margin:10px;
height:40px;
}
.mask{
position:fixed;
width:100%;
height:100%;
background-color:#000;
left:0;
top:0;
opacity:0.5;
z-index:9998;
}
.pop_con{
display:block;
}
</style>
</head>
<body>
<div class="menu">菜單文字</div>
<div class="pop_con">
<div class="popup">
<h2>彈框的標題</h2>
</div>
<div class="mask"></div>
</div>
<p>網頁文字</p>
<br />
</body>
</html>
