任務十~浮動、定位

一、文檔流的概念指什么？有哪些方式可以讓元素脫離文檔流?

  • 文檔里指元素在文檔中的位置由元素在html里的位置決定，塊級元素獨占一行，自上而下排列；內(nèi)聯(lián)元素從左到右排列

  • 讓元素脫離文檔流的方式：

    • 浮動，通過設置float屬性
    • 絕對定位，通過設置position:absolute
    • 固定定位，通過設置position:fixed

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
position: relative;
width: 800px;
height: 800px;
margin: 0 auto;
border: 1px solid black;
}
.box1{
width: 100px;
height: 100px;
background: red;
float: right;
}
.box2{
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 20px;
top: 20px;
}
.box3{
width: 50px;
height: 50px;
background: green;
position: fixed;
top:300px;
right: 100px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<p>脫離文檔流的方式脫離文檔流的方式脫離文檔流的方式脫離文檔流的方式脫離文檔流的方式脫離文檔流的方式脫離文檔流的方式脫離文檔流的方式脫離文檔流的方式脫離文檔流的方式脫離文檔流的方式脫離文檔流的方式脫離文檔流的方式脫離文檔流的方式脫離文檔流的方式脫離文檔流的方式脫離文檔流的方式脫離文檔流的方式脫離文檔流的方式</p>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>

效果圖

![脫離文檔流效果圖](http://upload-images.jianshu.io/upload_images/2453980-c38deaf48f3b55c5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***
## 二、有幾種定位方式，分別是如何實現(xiàn)定位的，使用場景如何？
positon的定位方式有三種（整理自CSS權威指南）
- **position:relative**~元素框偏移某個位置，元素仍保持其未定位前的形狀，它原本所占的空間仍保留；
- **position:ablosute**~元素框從文檔流中完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或初始包含塊；元素原先在正常文檔流中所占的空間會關閉，就好像該元素不存在一樣
- **position:fixed**~元素框的表現(xiàn)類似于將position設置為absolute，不過其包含塊是視窗本身

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
position: relative;
width: 800px;
height: 800px;
margin: 0 auto;
border: 1px solid black;
}
.box1{
width: 100px;
height: 100px;
background: peachpuff;
position: relative;
top: 100px;
left: 100px;
}
.box2{
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 20px;
top: 20px;
}
.box3{
width: 100px;
height: 100px;
background: orange;
position: fixed;
top:200px;
right: 100px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>

效果圖
![三種定位方式效果圖](http://upload-images.jianshu.io/upload_images/2453980-a20f6c9a4b862e29.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***
## 三、absolute, relative, fixed 偏移的參考點分別是什么？
- absolute的參考點是離其最近設置了fixed、relative的父級（祖先）元素，如果父級元素沒有，則一層一層往上找，最終到body元素
- relative的參考點是其原來自身的位置
- fixed的參考點是瀏覽器的窗口

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
position: relative;
width: 800px;
height: 800px;
margin: 0 auto;
background: #ccc;
}
.box1{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 200px;
left: 250px;
}
.box2{
width: 100px;
height: 100px;
background: blue;
position: relative;
left: 20px;
top: 20px;
}
.box3{
width: 50px;
height: 50px;
background: green;
position: fixed;
top:50px;
right: 100px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>

效果圖
![三種定位效果圖](http://upload-images.jianshu.io/upload_images/2453980-3d6e661a72e1e222.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***
## 四、z-index 有什么作用? 如何使用?
- z-index的作用是當兩個或多個元素放在一起的時候，其決定哪個元素放在“上層”
- **z-index只有在使用了定位屬性即positon的元素上才可使用；有較高z-index值的元素比z-index值較低的元素離讀者更近；z-index值是正負整數(shù)**，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 500px;
height: 500px;
background: gray;
margin: 100px auto 0 auto;
}
.box1{
width: 50px;
height: 50px;
background: red;
}
.box2{
width: 50px;
height: 50px;
background: blue;
position: relative;
left: 20px;
top: 20px;
z-index: 2px;
}
.box3{
width: 50px;
height: 50px;
background: green;
z-index: 3;
}
</style>
</head>
<body>
<div class="wrapper">
<h3>position:relative</h3>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>

效果圖

![z-index效果圖](http://upload-images.jianshu.io/upload_images/2453980-767fd3cce0913c23.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***
## 五、position:relative和負margin都可以使元素位置發(fā)生偏移，二者有什么區(qū)別？
 - position:relative使元素偏移時，其自身位置并未改變，處在文檔流的原始位置；負margin使元素偏移時，自身位置改變并且會影響周邊元素，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 500px;
height: 500px;
background: gray;
margin: 100px auto 0 auto;
}
.box1{
width: 50px;
height: 50px;
background: red;
}
.box2{
width: 50px;
height: 50px;
background: blue;
position: relative;
left: 100px;
}
.box3{
width: 50px;
height: 50px;
background: green;
}
.box4{
width: 50px;
height: 50px;
background: pink;
margin: -20px;
}
</style>
</head>
<body>
<div class="wrapper">
<h3>position:relative</h3>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box1"></div>
<div class="box4"></div>
<div class="box3"></div>
</div>
</body>
</html>

效果圖

![問題5](http://upload-images.jianshu.io/upload_images/2453980-37ebec78144b769d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***
## 六、如何讓一個固定寬高的元素在頁面上垂直水平居中?
- 可以利用position定位的absolute和負margin使寬高固定的元素在頁面上水平居中，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.box{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
</html>

效果圖
![垂直水平居中](http://upload-images.jianshu.io/upload_images/2453980-f066841d330b3b17.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- **更多垂直居中方法[W3CPLUS](http://www.w3cplus.com/css/vertically-center-content-with-css)**

***
## 七、浮動元素有什么特征？對其他浮動元素、普通元素、文字分別有什么影響?
- 浮動元素的特征如下：
 - **元素浮動之后會從文檔的正常流中刪除**
 - **元素設置浮動后，會盡可能地向左或向右浮動，直到碰到父元素邊框或其余浮動元素**
 - **元素浮動后會生成一個塊級框，而不論這個元素是什么**
 - **浮動元素不會互相重疊**
 - **一個浮動元素的頂端不能比其父元素的內(nèi)頂端更高**
 - **浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高**
 - **如果沒有足夠空間，浮動元素會被擠到新的一行；浮動元素必須盡可能的高**
 - **整理自CSS權威指南**
- 對其它浮動元素的影響：浮動元素會依次排在其之前浮動元素左邊或右邊，直到其父元素不能放下，將會被擠到新的一行，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>浮動元素</title>
<style>
.wrapper{
width: 80%;
height: 500px;
border: 1px solid black;
margin: 0 auto;
color: white;
}
.test1{
width: 200px;
height: 200px;
background: red;
float: left;
}
.test2{
width: 200px;
height: 200px;
background: green;
float: left;
}
.test3{
width: 200px;
height: 200px;
background: blue;
float: left;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="test1">1</div>
<div class="test2">2</div>
<div class="test3">3</div>
</div>
</body>
</html>

效果圖
![對浮動元素的影響效果圖](http://upload-images.jianshu.io/upload_images/2453980-9af179ed9deb1769.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 對普通元素的影響：浮動元素將會浮在頁面上，其后的普通元素將會占據(jù)其原來位置，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>浮動元素</title>
<style>
.wrapper{
width: 80%;
height: 500px;
border: 1px solid black;
margin: 0 auto;
}
.test1{
width: 200px;
height: 100px;
background: red;
color: white;
float: right;
}
.test2{
width: 100%;
height: 100px;
line-height: 100px;
background: pink;
color: white;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="test1">我是浮動元素</div>
<div class="test2">我是普通元素</div>
</div>
</body>
</html>

效果圖
![對普通元素的影響效果圖](http://upload-images.jianshu.io/upload_images/2453980-64fdec477a7307b9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 對文字的影響：塊級元素會忽略浮動元素，但塊級元素內(nèi)的內(nèi)聯(lián)則會留意浮動元素的邊界，環(huán)繞著浮動元素，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>浮動元素</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 80%;
height: 500px;
border: 1px solid black;
margin: 100px auto 0 auto;
}
.test1{
width: 400px;
height: 100px;
background: red;
color: white;
float: right;
}
.test2{
width: 100%;
background: pink;
color: white;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="test1">我是浮動元素</div>
<p class="test2">我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！</p>
</div>
</body>
</html>

效果圖
![文字環(huán)繞著浮動元素效果圖](http://upload-images.jianshu.io/upload_images/2453980-88abc6e38bd1452d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
***
## 八、清除浮動指什么? 如何清除浮動?
 - 清除浮動是指清除浮動所帶來的影響，比如由于浮動，父元素無法撐起高度，影響與父元素同級的元素；與浮動元素同級的非浮動元素會緊隨其后；若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響布局
 - 可以通過**clear**屬性來清除浮動（**清除浮動只能針對元素本身**）其值如下
  - left~在左側不允許浮動元素，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
width: 800px;
height: 800px;
margin: 0 auto;
border: 1px solid black;
}
.box1{
width: 100px;
height: 100px;
background: peachpuff;
float:left;
}
.box2{
clear: left;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了</div>
</div>
</body>
</html>

效果圖
![清除左浮動](http://upload-images.jianshu.io/upload_images/2453980-5fdf453629291e66.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 - right~在右側不允許浮動元素，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
width: 800px;
height: 800px;
margin: 0 auto;
border: 1px solid black;
}
.box1{
width: 100px;
height: 100px;
background: peachpuff;
float:right;
}
.box2{
clear: right;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了</div>
</div>
</body>
</html>

效果圖
![清除右浮動](http://upload-images.jianshu.io/upload_images/2453980-1d5118def78b855c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- both~在左右兩側均不允許浮動元素，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
width: 800px;
height: 800px;
margin: 0 auto;
border: 1px solid black;
}
.box1{
width: 100px;
height: 100px;
background: peachpuff;
float:left;
}
.box2{
width: 100px;
height: 120px;
background: pink;
float: right;
}
.box3{
clear: both;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了我要清除浮動了</div>
</div>
</body>
</html>

效果圖
![both清除左右兩側浮動](http://upload-images.jianshu.io/upload_images/2453980-8a8fb7b7a781115d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)




**版權聲明：本教程版權歸鄧攀和饑人谷所有，轉(zhuǎn)載須說明來源！！！！**
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,800評論 1贊 92
  • 1.在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例 概念：在CSS當...
    饑人谷_任磊閱讀 705評論 0贊 3
  • 各種純css圖標 CSS3可以實現(xiàn)很多漂亮的圖形，我收集了32種圖形，在下面列出。直接用CSS3畫出這些圖形，要比...
    劍殘閱讀 9,688評論 0贊 8
  • 浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響? 特征： 浮動元素會脫離正常的文檔流，元...
    饑人谷_哈嚕嚕閱讀 887評論 0贊 0
  • 戒指掉了 我說出來的時候，他佯怒著讓我回去找 論理加撒嬌，換來“以后別戴戒指” 無論眼睛還是聲音，找不到一絲責備 ...
    simayk閱讀 185評論 0贊 0