任務(wù)10

  1. 文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
  • 文檔流：將窗體自上而下分成一行一行，并在每行中按從左至右的挨次排放元素，即為文檔流。
  • 浮動和絕對定位可以讓元素脫離文檔流，區(qū)別如下:
    元素浮動之后，會跳出文檔流，也就是說當(dāng)它后面還有元素時，其他元素會無視它所占據(jù)了的區(qū)域，直接在它身下布局。但是文字卻會認(rèn)同浮動元素所占據(jù)的區(qū)域，圍繞它布局，相當(dāng)于沒有脫離文本流（文檔流是相對于盒子模型講的，文本流是相對于文章段落講的）。more
    但是絕對定位后，元素不僅會脫離文檔流，文字也會出文本流，后面元素的文本就不會在認(rèn)同它的區(qū)域位置，會直接在它后面布局，不會再環(huán)繞。
<style type="text/css">
    .big{
        width: 500px;
        height: 500px;
        margin: 0 auto;
        position: relative;
    }
    .small{
        width: 50px;
        height: 50px;   
    }
    .one{
        float: right;
        border: 5px solid red;
    }
    .two{
        position: absolute;
        border: 5px solid blue;
    }
    </style>
</head>
<body>
    <div class="big">
        <div class="small one"></div>
        <div class="small two"></div>
        <p class=" ">
            充滿鮮花.....最耀眼的瞬間。
        </p>
    </div>
</body>
效果對比圖
  1. 有幾種定位方式，分別是如何實現(xiàn)定位的，使用場景如何？偏移的參考點分別是什么？
    • relative不脫離文檔流的布局，只改變自身的位置，在文檔流原先的位置遺留空白區(qū)域，移動后它覆蓋其它框。參考點為本身原來所處的位置進(jìn)行偏移。
    • absolute脫離文檔流的布局，遺留下來的空間由后面的元素填充，參考點為距離最近的祖先元素，如果都沒有那么相對于body。
<style type="text/css">
    .grandfather{
        width: 300px;
        height: 300px;
        border: 1px solid;
        position: relative;
        top: 50px;
        left: 100px;
}
    .father{
        width: 200px;
        height: 200px;
        border: 1px solid;
        /*position: relative;*/
        top: 50px;
        left: 100px;
    }
    .son1{
        width: 50px;
        height: 50px;
        position: relative;
        top: 30px;
        left: 50px;
        background-color: green;
    }
    .son2{
        width: 50px;
        height: 50px;
        top: 50%;
        left: 50%;
        margin-left: -25px;
        margin-top: -25px;
        position: absolute;
        background-color: red;
    }
    </style>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son1"></div>
            <div class="son2"></div>
        </div>
    </div>
</body>```
![紅色框現(xiàn)在參考點為grandfather](http://upload-images.jianshu.io/upload_images/2150964-7cc866a7ecd53ba3.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
   * `fixed`可通過 "left"、"top"、"right" 以及"bottom" 屬性來規(guī)定元素的位置。參考點為瀏覽器窗口，不論窗口滾動與否，元素都會留在那個位置。
應(yīng)用場景：登陸框；頁面彈窗廣告，底部導(dǎo)航，回到頂部等。

3. z-index 有什么作用? 如何使用?
![z-index](http://upload-images.jianshu.io/upload_images/2150964-d0ac07ddbaf554ef.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

<style type="text/css">
.fa{
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
position: relative;
}
.one{
width: 300px;
height: 50px;
background-color: #f00;
position: absolute;
top: 0;
}
.two{
width: 200px;
height: 150px;
background-color: #0f0;
top: 0;
position: absolute;
}
.three{
width: 150px;
height: 100px;
background-color: #00f;
position: absolute;
top: 0;
}```


效果
.one{z-index: 2;}
. two{z-index: 0;}
.three{z-index: 1;}```
![加入z-index](http://upload-images.jianshu.io/upload_images/2150964-6ae04274c7fe2bbf.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

4. `position:relative`和負(fù)margin都可以使元素位置發(fā)生偏移，二者有什么區(qū)別？
  * `position:relative`只改變了位置，所占空間位置和大小沒有改變，因此不會影響它結(jié)構(gòu)下的元素。好比靈魂出竅，肉身還在，且還活著。
  * 而負(fù)margin通過改變本身占據(jù)空間的大小來改變位置，會影響位于它結(jié)構(gòu)下的元素。這是一種自殺式的，偏移后真身直接被高效處理了，看到的不是靈魂是鬼魂。

<style type="text/css">
.box{
width: 300px;
height: 200px;
border: 1px solid;
margin: 30px auto;
}
.one{
width: 50px;
height: 50px;
background-color: #f00;
position: relative;
}
.two{
width: 50px;
height: 50px;
background-color: #f00;
}
.con{
width: 50px;
height: 50px;
background-color: #0f0;
}
</style>
</head>
<body>
<div class="fa">
<div class="box">
<div class="one"></div>
<div class="con"></div>
</div>
<div class="box">
<div class="two"></div>
<div class="con"></div>
</div>
</body>```


偏移前

偏移代碼

.one{top: -20px;}
.two{margin-top: -20px; }```
![偏移后](http://upload-images.jianshu.io/upload_images/2150964-0325829e265590b1.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

5. 如何讓一個固定寬高的元素在頁面上垂直水平居中?
父元素設(shè)置`position: relative`，目標(biāo)元素為`position: absolute`。設(shè)置`top:50%;left: 50%;`、再設(shè)置`margin-top、margin-left `為負(fù)值，絕對值得大小是本身高度和寬度值的一半。

.outer{
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid;
position: relative;
}
.one{
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
position: absolute;
background-color: red;
}```

垂直水平居中

  1. 浮動元素有什么特征？對其他浮動元素、普通元素、文字分別有什么影響?
    元素浮動后，會脫離文檔流，不再占據(jù)空間。浮動的元素會覆蓋普通元素，但是文字會環(huán)繞它存在。
.big{
    width: 500px;
    height: 500px;
    margin: 0 auto;
}   
.one{
    width: 100px;
    height: 130px;
    background-color: red;
    float: left;
}
.two{
    width: 200px;
    height: 120px;
    background-color: blue;
}
.three{
    width: 300px;
    height: 110px;
    background-color: green;
}
浮動元素覆蓋普通元素（只有紅色浮動）

如果之前有浮動，它會浮動到上一個左或右，空間不足會向下浮動。
不足時向下浮動（三個都浮動空間）
  1. 清除浮動指什么? 如何清除浮動?
    清除浮動是指清除浮動元素帶來的影響。比如，
    .outer{
        width: 500px;
        margin: 0 auto;
        border: 1px solid;
    }   
    .one{
        width: 50px;
        height: 50px;
        background-color: red;
        float: left;
    }
    .two{
        width: 50px;
        height: 50px;
        background-color: blue;
        float: left;
    }
    .three{
        width: 50px;
        height: 50px;
        background-color: green;
        float: left;
    }
    </style>
</head>
<body>
    <div class="outer">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>```
![父元素沒有被撐開](http://upload-images.jianshu.io/upload_images/2150964-34f430a66722750e.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
   - 方法1：在父元素中加入一個新元素清除浮動。
```<body>
    <div class="outer">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <br class="c"/>    /*設(shè)置.c{clear: both}*/
    </div>
</body>```
   - 方法2：給父元素設(shè)置`overflow: hidden`或者`overflow: auto`
```.outer{
    width: 500px;
    margin: 0 auto;
    border: 1px solid;
    overflow: auto; }/*或者設(shè)為hidden*/```
>  使用overflow屬性來清除浮動有一點需要注意，overflow屬性共有三個屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動，但切記不能使用visible值，如果使用這個值將無法達(dá)到清除浮動效果，其他兩個值都可以，其區(qū)據(jù)說在于一個對seo比較友好，而hidden對seo不是太友好。
   - 方法3：把父元素本身也浮動。
```.outer{
    width: 500px;
    margin: 0 auto;
    border: 1px solid;
        float: left;}```
##代碼
[兩欄布局](https://github.com/jirengu-inc/jrg-renwu6/blob/master/homework/%E9%83%AD%E5%BF%97%E6%98%8E/%E4%BB%BB%E5%8A%A110/%E4%B8%A4%E6%A0%8F%E5%B8%83%E5%B1%80.html)——[效果](http://book.jirengu.com/jirengu-inc/jrg-renwu6/homework/%E9%83%AD%E5%BF%97%E6%98%8E/%E4%BB%BB%E5%8A%A110/%E4%B8%A4%E6%A0%8F%E5%B8%83%E5%B1%80.html)
[三角](https://github.com/jirengu-inc/jrg-renwu6/blob/master/homework/%E9%83%AD%E5%BF%97%E6%98%8E/%E4%BB%BB%E5%8A%A110/two.html)  ——[效果](http://book.jirengu.com/jirengu-inc/jrg-renwu6/homework/%E9%83%AD%E5%BF%97%E6%98%8E/%E4%BB%BB%E5%8A%A110/two.html)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容