# 浮動

### 文檔流
文檔流，是指盒子按照html標簽編寫的順序依次從上到下，從左到右排列，塊元素占一行，行內元素在一行之內從左到右排列，先寫的先排列，後寫的排在後面，每個盒子都占據自己的位置。

### 浮動的特性
1、浮動元素有左浮動(float:left)和右浮動(float:right)兩種

2、浮動的元素會向左或向右浮動，碰到父元素邊界、浮動元素、未浮動的元素才停下來

3、相鄰浮動的塊元素可以並在一行，超出父級寬度就換行

4、浮動讓行內元素或塊元素自動轉化為行內塊元素

5、浮動元素後面沒有浮動的元素會占據浮動元素的位置，沒有浮動的元素內的文字會避開浮動的元素，形成文字饒圖的效果

6、父元素內整體浮動的元素無法撐開父元素，需要清除浮動
 


7、浮動元素之間沒有垂直margin的合並

### 清除浮動

- 父級上增加屬性overflow：hidden
- 在最後一個子元素的後面加一個空的div，給它樣式屬性 clear:both（不推薦）
- 使用成熟的清浮動樣式類，clearfix
```angularjs
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
```
清除浮動的使用方法：
```angularjs
.con2{... overflow:hidden}
或者

<div class="con2 clearfix">
 

```

# 定位

### 關於定位
我們可以使用css的position屬性來設置元素的定位類型，postion的設置項如下：
- relative 生成相對定位元素，元素所占據的文檔流的位置不變，元素本身相對文檔流的位置進行偏移
- absolute 生成絕對定位元素，元素脫離文檔流，不占據文檔流的位置，可以理解為漂浮在文檔流的上方，相對於上一個設置了相對或者絕對或者固定定位的父級元素來進行定位，如果找不到，則相對於body元素進行定位。
- fixed 生成固定定位元素，元素脫離文檔流，不占據文檔流的位置，可以理解為漂浮在文檔流的上方，相對於瀏覽器窗口進行定位。
- static 默認值，沒有定位，元素出現在正常的文檔流中，相當於取消定位屬性或者不設置定位屬性
 


```angularjs
relative 相對定位,不脫離文檔流,相對於自己本身的位置進行定位,
absolute 絕對定位,脫離文檔流,位置相對於已定位的父級,
    如果沒有父級,或父級沒有定位,那麽相對於文檔的00點 (body)
fixed 固定定位,脫離文檔流,位置相對於瀏覽器窗口 進行定位
```

### 定位元素特性
絕對定位和固定定位的塊元素和行內元素會自動轉化為行內塊元素

### 定位元素的層級

**定位元素是浮動在正常的文檔流之上的，可以用z-index屬性來設置元素的層級**

# 頁面布局

### 靜態布局

靜態布局：元素不變的布局。

布局特點：窗口縮小後內容被遮擋時，拖動滾動條顯示布局

設計方法：

PC：居中布局，所有樣式使用絕對寬度，高度

移動設備：另外建立移動網站，以m.域名為域名



### 響應式布局(了解)

```
響應式布局：創建多個布局，分別對應一個屏幕分辨率範圍

特點：分別為不同的屏幕分辨率定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配

響應式布局就是使用媒體查詢的方式,創建多個元素寬度是相對的的布局理想的響應式布局是指的對PC/移動各種終端進行響應的
```

響應布局的偽代碼如下：

```
.a{
   height: 200px;
   display: inline-block;
}
/*當瀏覽器窗口小於=960時*/
@media (max-width:960px){
    .a{width:50%;}
}
/*當瀏覽器窗口小於=640時*/``_****_``
@media (max-width:640px){
    .a{width:100%;}
}
/*當瀏覽器窗口大於等於960時*/
/*@media (min-width:960px){
    .a{width:25%;}
}*/
```

05-CSS浮動、定位、頁面布局