文檔流、Position介紹

一、文檔流

1.首先我們要了解什麼是标準文檔流

HTML頁面的标準文檔流(預設布局)是：從上到下，從左到右，遇塊(塊級元素)換行。

2.然後我們要知道塊級元素和行内元素有哪些

塊級元素
1. 獨占一行，不能與其他元素共處一行。
2. 可以寬和高。
3. 如果不設定寬度，那麼寬度将預設變為父親的100%，即和父親一樣寬。
4. div, form, table, p, pre, h1~h6, dl, ol, ul等。
行内元素
1. 與其他元素處在同一行。
2. 不可以設定寬和高，即width和height屬性對其無效。
3. span,a,strong, em, label, input, select, textarea, img, br。

溫馨小提示：

(1).容器級的标簽，裡面可以放置任何東西(div、p、li等)；文本級的标簽裡面，隻能放置文字、圖檔、表單元素。

(2).p标簽是一個文本級标簽。p裡面隻能放文字、圖檔、表單元素。其他的一律不能放。

(3).定義清單是一個組标簽，不過比較複雜，出現了三個标簽：

dl表示definition list 定義清單

dt表示definition title 定義标題

dd表示definition description 定義表述詞

dt、dd隻能在dl裡面；dl裡面隻能有dt、dd

3.塊級元素與行内元素的轉換

塊級元素可以設定為行内元素；

行内元素也可以設定為塊級元素。

display: block 設定屬性為塊級元素

未更改前樣式

文檔流、Position、float介紹文檔流、Position介紹

span{
    display: block;
    width: 300px;
    height: 30px;
    border: 1px solid red;
 }

文檔流、Position、float介紹文檔流、Position介紹

很明顯行内元素不能設定高度和寬度以及不會獨占一行，經過改變以後擁有塊級元素的特性

display: inline 設定屬性為行内元素
```
p{
    display: inline;
    width: 50px;
    height: 100px;
    background-color: skyblue;
}
           
```
文檔流、Position、float介紹文檔流、Position介紹
我們發現從原來的塊級元素獨占一行變成共處一行，且不能設定寬和高，明顯的行内元素特性
display:inline-block

将對象呈現為inline對象，但是對象的内容作為block對象呈現。之後的内聯對象會被排列在同一行内。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
```
p{
    display: inline-block;
    width: 50px;
    height: 100px;
    background-color: skyblue;
}
           
```

文檔流、Position、float介紹文檔流、Position介紹

我們可以看到内容顯示為共處一行，但是同時又可以設定高與寬

二、脫離文檔流

也就是将元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。

1.首先要了解position定位方式

absolute: 生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。元素的位置通過left,top,right以及bottom屬性進行規定。
fixed: 生成絕對定位的元素，相對于浏覽器視窗進行定位。元素的位置通過left、top、right以及bottom屬性進行規定。
relative: 生成相對定位的元素，相對于其正常位置進行定位。
static: 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit: 規定應該從父元素繼承 position 屬性的值。

relative

relative使相對于正常文本流中的位置進行偏移

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style type="text/css">
        #item1 {
            width:100px;
            height:100px;
            background-color:green;
        }
        #item2 {
            width:100px;
            height:100px;
            background-color:red;
        }
    </style>
</head>
<body>
<div id="content">
    <div id="item1" >item1</div>
    <div id="item2">item2</div>
</div>
</body>

</html>

效果圖

文檔流、Position、float介紹文檔流、Position介紹

若将上述的css樣式改為

#item2 {
    width:100px;
    height:100px;
    background-color:red;
    position:relative; //相對定位
    left:20px;
    top:20px;
}

文檔流、Position、float介紹文檔流、Position介紹

總結：relative是相對正常文檔流的位置進行偏移，原先占據的位置依然存在，也就是說它不會影響後面元素的位置。left表示相對原先位置右邊進行偏移，top表示相對原先位置下邊進行偏移。當left和right同時存在，僅left有效，當top和bottom同時存在僅top有效。relative的偏移是基于對象的margin左上側的。

absolute

為了友善我們進行觀察，現将上述原始網頁代碼最外層div加上margin值

#content{
    margin-left: 100px;
    margin-top: 100px;
}

我們注釋掉先前對item的position:relative，正常顯示如下

文檔流、Position、float介紹文檔流、Position介紹

當我們修改position:absolute時

#item2 {
    width:100px;
    height:100px;
    background-color:red;
    position:absolute;
    left:20px;
    top:20px;
}

顯示效果如下

文檔流、Position、float介紹文檔流、Position介紹

由此可見當父級元素的position屬性值為預設值時（static）,absolute是相對于浏覽器視窗進行定位的。

如果設定content的position屬性值為非預設值，那麼absolute就是相對于該父級元素進行定位。

接下來我們設定父容器content的position為相對定位relative試試

#content{
    margin-left: 100px;
    margin-top: 100px;
    position: relative;
    border:5px solid black;//為了友善觀察為父容器設定個邊框
}

讓我們來看看效果吧

文檔流、Position、float介紹文檔流、Position介紹

當我們把父容器的position設定為absolute

#content{
    margin-left: 100px;
    margin-top: 100px;
    position: absolute;
    border:5px solid black;
}

原來為改變前的樣式

文檔流、Position、float介紹文檔流、Position介紹

改變後的樣式

文檔流、Position、float介紹文檔流、Position介紹

注意到變化了嗎，當把外層父容器div設定為absolute時，外層div寬度由原來的100%變為auto.

當把一個元素position屬性設定為absolute或fixed的時候，會發生三件事：

把該元素往 Z 軸方向移了一層，元素脫離了普通流，是以不再占據原來那層的空間，還會覆寫下層的元素，簡稱脫離文檔流。
該元素将變為塊級元素，相當于給該元素設定了 display: block;（給一個内聯元素，如，設定 absolute 之後發現它可以設定寬高了）。
如果該元素是塊級元素，元素的寬度由原來的 width: 100%（占據一行），變為了 auto。

我們此時要注意一點就是我們如果給父容器設定了padding，margin,border等屬性

我們嘗試去給父容器寫一個padding，看看上面的圖有沒有什麼變化

#content{
    margin-left: 100px;
    margin-top: 100px;
    position: absolute;
    padding: 20px;
    border:5px solid black;
}

文檔流、Position、float介紹文檔流、Position介紹

由此可見，如果parent設定了margin，border，padding等屬性，那麼這個定位點将忽略padding，将會從padding開始的地方(即隻從padding的左上角開始)進行定位，這與我們會想當然的以為會以margin的左上端開始定位的想法是不同的.

fixed

生成絕對定位的元素，相對于浏覽器視窗進行定位,特殊的絕對定位

其餘兩個我不進行描述了大緻如上面介紹一般

我們發現能使脫離文檔流的定位方式有absolute和fixed

三、float屬性(魔鬼)

浮動可以了解為讓某個div元素脫離标準流，漂浮在标準流之上，和标準流不是一個層次。

我們先來設定四個小div吧

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style type="text/css">
        .d1{
            width: 400px;
            height: 150px;
            border: 3px solid black;
            background-color: red;
        }
        .d2{     
            width: 320px;  
            height: 100px;
            border: 3px solid black;
            background-color: green;
        }
        .d3{
            width: 200px;
            height: 140px;
            border: 3px solid black;
            background-color: orange;
        }
        .d4{
            width: 300px;
            height: 110px;
            border: 3px solid black;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="d1">div1</div>
    <div class="d2">div2</div>
    <div class="d3">div3</div>
    <div class="d4">div4</div>
</body>
</html>

我們先看看他的初始效果

文檔流、Position、float介紹文檔流、Position介紹

當我們嘗試給div2加上float屬性時

float: left

.d2{     
    width: 320px;  
    height: 100px;
    border: 3px solid black;
    background-color: green;
    float: left;
}

文檔流、Position、float介紹文檔流、Position介紹

float: right

文檔流、Position、float介紹文檔流、Position介紹

如果我們同時給div2和div3加上float：left呢

讓它們同時向左浮動

.d2{     
    width: 320px;  
    height: 100px;
    border: 3px solid black;
    background-color: green;
    float: right;
}
.d3{
    width: 200px;
    height: 140px;
    border: 3px solid black;
    background-color: orange;
    float: left;
}

文檔流、Position、float介紹文檔流、Position介紹

如果我們同時給他們加上float：right呢

讓他們同時向右浮動

.d2{     
    width: 320px;  
    height: 100px;
    border: 3px solid black;
    background-color: green;
    float: right;
}
.d3{
    width: 200px;
    height: 140px;
    border: 3px solid black;
    background-color: orange;
    float: right;
}

文檔流、Position、float介紹文檔流、Position介紹

當同時對div2、div3設定浮動之後，div3會跟随在div2之後，但其實一直到現在，div2在每個例子中都是浮動的，但并沒有跟随到div1之後。是以，我們可以得出一個重要結論：

假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麼A元素會跟随在上一個元素的後邊(如果一行放不下這兩個元素，那麼A元素會被擠到下一行)；如果A元素上一個元素是标準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。

div的順序是HTML代碼中div的順序決定的。靠近頁面邊緣的一端是前，遠離頁面邊緣的一端是後。

文檔流、Position、float介紹文檔流、Position介紹

有關清楚浮動以及浮動的其他知識還有很多，這個僅僅是其中的一小部分，後面還要繼續整理

文檔流、Position、float介紹文檔流、Position介紹

文檔流、Position介紹

一、文檔流

1.首先我們要了解什麼是标準文檔流

2.然後我們要知道塊級元素和行内元素有哪些

3.塊級元素與行内元素的轉換

二、脫離文檔流

1.首先要了解position定位方式

relative

absolute

fixed

三、float屬性(魔鬼)

繼續閱讀

怎樣使用SpringMVC控制頁面

Spring MVC 接收多個實體參數

CSS中僞類和僞元素的差別

Vue項目 - 單檔案元件和Vue中的路由

左耳朵耗子：程式員如何拿到年薪60萬的崗位？

兩種清除浮動的方法

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題