任務(wù)十~浮動捷绑、定位

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

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

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

    • 浮動厕怜,通過設(shè)置float屬性
    • 絕對定位,通過設(shè)置position:absolute
    • 固定定位蕾总,通過設(shè)置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)

***
## 二粥航、有幾種定位方式,分別是如何實(shí)現(xiàn)定位的生百,使用場景如何递雀?
positon的定位方式有三種(整理自CSS權(quán)威指南)
- **position:relative**~元素框偏移某個(gè)位置,元素仍保持其未定位前的形狀蚀浆,它原本所占的空間仍保留缀程;
- **position:ablosute**~元素框從文檔流中完全刪除,并相對于其包含塊定位市俊,包含塊可能是文檔中的另一個(gè)元素或初始包含塊杨凑;元素原先在正常文檔流中所占的空間會關(guān)閉,就好像該元素不存在一樣
- **position:fixed**~元素框的表現(xiàn)類似于將position設(shè)置為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 偏移的參考點(diǎn)分別是什么?
- absolute的參考點(diǎn)是離其最近設(shè)置了fixed绅你、relative的父級(祖先)元素伺帘,如果父級元素沒有,則一層一層往上找忌锯,最終到body元素
- relative的參考點(diǎn)是其原來自身的位置
- fixed的參考點(diǎn)是瀏覽器的窗口

<!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的作用是當(dāng)兩個(gè)或多個(gè)元素放在一起的時(shí)候,其決定哪個(gè)元素放在“上層”
- **z-index只有在使用了定位屬性即positon的元素上才可使用偶垮;有較高z-index值的元素比z-index值較低的元素離讀者更近张咳;z-index值是正負(fù)整數(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和負(fù)margin都可以使元素位置發(fā)生偏移脚猾,二者有什么區(qū)別?
 - position:relative使元素偏移時(shí)啄枕,其自身位置并未改變婚陪,處在文檔流的原始位置;負(fù)margin使元素偏移時(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: 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)

***
## 六脆淹、如何讓一個(gè)固定寬高的元素在頁面上垂直水平居中?
- 可以利用position定位的absolute和負(fù)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)**

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

<!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">我是文字文字文字!屯曹!我是文字文字文字S印!我是文字文字文字J抢巍僵井!我是文字文字文字!驳棱!我是文字文字文字!农曲!我是文字文字文字I缃痢!我是文字文字文字H楣妗形葬!我是文字文字文字!暮的!我是文字文字文字s弦浴!我是文字文字文字6潮纭猖腕!我是文字文字文字2鹌怼!我是文字文字文字L雀小放坏!我是文字文字文字!老玛!我是文字文字文字S倌辍!我是文字文字文字@麸粮!我是文字文字文字!镜廉!我是文字文字文字E濉!我是文字文字文字=暗酢威根!我是文字文字文字!视乐!我是文字文字文字B宀蟆!我是文字文字文字S拥怼留美!我是文字文字文字!伸刃!我是文字文字文字;牙!我是文字文字文字E趼景图!我是文字文字文字!碉哑!我是文字文字文字V勘摇!我是文字文字文字?鄣洹妆毕!我是文字文字文字!贮尖!我是文字文字文字5颜场!我是文字文字文字!薪前!我是文字文字文字H笈!我是文字文字文字P蛄任连!我是文字文字文字!例诀!</p>
</div>
</body>
</html>

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

<!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~在右側(cè)不允許浮動元素唬复,比如

<!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~在左右兩側(cè)均不允許浮動元素,比如

<!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清除左右兩側(cè)浮動](http://upload-images.jianshu.io/upload_images/2453980-8a8fb7b7a781115d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)




**版權(quán)聲明:本教程版權(quán)歸鄧攀和饑人谷所有全肮,轉(zhuǎn)載須說明來源3ㄟ帧!9枷佟休建!**
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市评疗,隨后出現(xiàn)的幾起案子测砂,更是在濱河造成了極大的恐慌,老刑警劉巖百匆,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件砌些,死亡現(xiàn)場離奇詭異,居然都是意外死亡加匈,警方通過查閱死者的電腦和手機(jī)寄症,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來矩动,“玉大人,你說我怎么就攤上這事释漆”唬” “怎么了?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長示姿。 經(jīng)常有香客問我甜橱,道長,這世上最難降的妖魔是什么栈戳? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任岂傲,我火速辦了婚禮,結(jié)果婚禮上子檀,老公的妹妹穿的比我還像新娘镊掖。我一直安慰自己,他們只是感情好褂痰,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布亩进。 她就那樣靜靜地躺著,像睡著了一般缩歪。 火紅的嫁衣襯著肌膚如雪归薛。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天匪蝙,我揣著相機(jī)與錄音主籍,去河邊找鬼。 笑死逛球,一個(gè)胖子當(dāng)著我的面吹牛千元,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播需忿,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼诅炉,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了屋厘?” 一聲冷哼從身側(cè)響起涕烧,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎汗洒,沒想到半個(gè)月后议纯,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡溢谤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年瞻凤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片世杀。...
    茶點(diǎn)故事閱讀 38,039評論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡阀参,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出瞻坝,到底是詐尸還是另有隱情蛛壳,我是刑警寧澤,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站衙荐,受9級特大地震影響捞挥,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜忧吟,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一砌函、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧溜族,春花似錦讹俊、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至摧玫,卻和暖如春耳奕,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背诬像。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工屋群, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人坏挠。 一個(gè)月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓芍躏,卻偏偏與公主長得像,于是被迫代替她去往敵國和親降狠。 傳聞我的和親對象是個(gè)殘疾皇子对竣,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評論 2 345

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,728評論 1 92
  • 1.在什么場景下會出現(xiàn)外邊距合并临燃?如何合并?如何不讓相鄰元素外邊距合并烙心?給個(gè)父子外邊距合并的范例 概念:在CSS當(dāng)...
    饑人谷_任磊閱讀 643評論 0 3
  • 各種純css圖標(biāo) CSS3可以實(shí)現(xiàn)很多漂亮的圖形膜廊,我收集了32種圖形,在下面列出淫茵。直接用CSS3畫出這些圖形爪瓜,要比...
    劍殘閱讀 9,474評論 0 8
  • 浮動元素有什么特征?對父容器匙瘪、其他浮動元素钥勋、普通元素炬转、文字分別有什么影響? 特征: 浮動元素會脫離正常的文檔流,元...
    饑人谷_哈嚕嚕閱讀 868評論 0 0
  • 戒指掉了 我說出來的時(shí)候算灸,他佯怒著讓我回去找 論理加撒嬌,換來“以后別戴戒指” 無論眼睛還是聲音驻啤,找不到一絲責(zé)備 ...
    simayk閱讀 175評論 0 0