- 文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
- 文檔流：將窗體自上而下分成一行一行，并在每行中按從左至右的挨次排放元素，即為文檔流。
-
浮動和絕對定位可以讓元素脫離文檔流，區別如下:
元素浮動之后，會跳出文檔流，也就是說當它后面還有元素時，其他元素會無視它所占據了的區域，直接在它身下布局。但是文字卻會認同浮動元素所占據的區域，圍繞它布局，相當于沒有脫離文本流（文檔流是相對于盒子模型講的，文本流是相對于文章段落講的）。more
但是絕對定位后，元素不僅會脫離文檔流，文字也會出文本流，后面元素的文本就不會在認同它的區域位置，會直接在它后面布局，不會再環繞。
<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>
效果對比圖
- 有幾種定位方式，分別是如何實現定位的，使用場景如何？偏移的參考點分別是什么？
-
relative不脫離文檔流的布局，只改變自身的位置，在文檔流原先的位置遺留空白區域，移動后它覆蓋其它框。參考點為本身原來所處的位置進行偏移。 -
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>```
* `fixed`可通過 "left"、"top"、"right" 以及"bottom" 屬性來規定元素的位置。參考點為瀏覽器窗口，不論窗口滾動與否，元素都會留在那個位置。
應用場景：登陸框；頁面彈窗廣告，底部導航，回到頂部等。
3. z-index 有什么作用? 如何使用?
<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;}```
4. `position:relative`和負margin都可以使元素位置發生偏移，二者有什么區別？
* `position:relative`只改變了位置，所占空間位置和大小沒有改變，因此不會影響它結構下的元素。好比靈魂出竅，肉身還在，且還活著。
* 而負margin通過改變本身占據空間的大小來改變位置，會影響位于它結構下的元素。這是一種自殺式的，偏移后真身直接被高效處理了，看到的不是靈魂是鬼魂。
<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; }```
5. 如何讓一個固定寬高的元素在頁面上垂直水平居中?
父元素設置`position: relative`，目標元素為`position: absolute`。設置`top:50%;left: 50%;`、再設置`margin-top、margin-left `為負值，絕對值得大小是本身高度和寬度值的一半。
.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;
}```
垂直水平居中
- 浮動元素有什么特征？對其他浮動元素、普通元素、文字分別有什么影響?
元素浮動后，會脫離文檔流，不再占據空間。浮動的元素會覆蓋普通元素，但是文字會環繞它存在。
.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;
}
浮動元素覆蓋普通元素（只有紅色浮動）
如果之前有浮動，它會浮動到上一個左或右，空間不足會向下浮動。
不足時向下浮動（三個都浮動空間）
- 清除浮動指什么? 如何清除浮動?
清除浮動是指清除浮動元素帶來的影響。比如，
.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>```
- 方法1：在父元素中加入一個新元素清除浮動。
```<body>
<div class="outer">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<br class="c"/> /*設置.c{clear: both}*/
</div>
</body>```
- 方法2：給父元素設置`overflow: hidden`或者`overflow: auto`
```.outer{
width: 500px;
margin: 0 auto;
border: 1px solid;
overflow: auto; }/*或者設為hidden*/```
> 使用overflow屬性來清除浮動有一點需要注意，overflow屬性共有三個屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動，但切記不能使用visible值，如果使用這個值將無法達到清除浮動效果，其他兩個值都可以，其區據說在于一個對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)