一、文檔流的概念指什么氢妈?有哪些方式可以讓元素脫離文檔流?
文檔里指元素在文檔中的位置由元素在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枷佟休建!**