浮动、定位
2016-07-26 本文已影响27人
ahong_吴
一、文档流的概念指什么？有哪种方式可以让元素脱离文档流?
文档流：就像一股溪水在页面自左向右，自上而下的流淌，在html的溪水中有各种元素。
脱离文档流：就像把元素从溪水中浮了起来，放到你想放到的位置。
通过float（浮动）或position（定位）来使元素脱离文档流。
二、有几种定位方式，分别是如何实现定位的，使用场景如何？
- 绝对定位：
position:absolute相对父元素进行定位。前提是具有定位属性的父元素（如position:relative），如果没有的话，就相对html的根元素进行定位。 - 相对定位：
position:relative根据自身的位置进行偏移，偏移后原来的位置仍然占据空间。 - 固定定位：
position:fixed根据浏览区窗口进行定位。就算滚动条上下滚动，他的位置也不会改变。他常常会被用于页面上的广告窗口、对话框，回到顶部等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三大定位</title>
<style>
.wrap1{
display: inline-block;
width: 500px;
height: 500px;
border: 1px solid;
float: left;
}
.absolute{
position:absolute;/*绝对定位*/
width: 80px;
height: 80px;
border: 1px solid;
background-color: pink;
left: 210px;
top: 210px;
}
.wrap2{
display: inline-block;
width: 500px;
height: 500px;
border: 1px solid;
float: left;
}
.relative{
width: 80px;
height: 80px;
border: 1px solid;
background-color: green;
float: left;
}
.relative:nth-child(2){
position: relative;/*相对定位*/
top: 20px;
left: 20px;
}
.wrap3{
display: inline-block;
width: 500px;
height: 500px;
border: 1px solid;
}
.fixed{
width: 120px;
height: 80px;
border: 1px solid;
background-color: yellow;
position: fixed;/*固定定位*/
right: -20px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap1">
<div class="absolute">绝对定位</div>
</div>
<div class="wrap2">
<div class="relative">相对定位</div>
<div class="relative">相对定位</div>
<div class="relative">相对定位</div>
</div>
<div class="wrap3">
<div class="fixed">固定定位</div>
</div>
</div>
</body>
</html>
Paste_Image.png
三、absolute, relative, fixed 偏移的参考点分别是什么
-
relative:相对定位相对的是它原本在文档流中的位置而进行的偏移。
-
absolute:使用absoult定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的。如果没有这样的父元素，就相对html的根元素进行定位。
-
fixed：固定定位它和absoult定位一样，都脱离了文档流，并且能够根据top、right、left、bottom属性进行定位，但不同的是fixed是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。
四、z-index 有什么作用? 如何使用?
当你定义的CSS中有position属性值为absolute、relative或fixed，用z-index此取值方可生效。此属性参数值越大，则被层叠在最上面。
五、position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative只是本身元素会发生偏移，不会影响到其他元素，因为之前占据的空间还在。
负margin的时候，设置负top，负left是让自己位移，而负right、负bottom是让周围的元素位移。负margin会影响周围元素的位置和布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>偏移</title>
<style>
.wrap3{
display: inline-block;
width: 500px;
height: 500px;
border: 1px solid;
float: left;
}
.relative{
width: 80px;
height: 80px;
border: 1px solid;
background-color: green;
float: left;
}
.relative:nth-child(2){
position: relative;/*相对定位*/
top: 20px;
left: 20px;
}
.margin{
width: 80px;
height: 80px;
border: 1px solid;
background-color: green;
}
.three{
margin-right: -40px;
margin-bottom: -40px;
}
.two{
margin-top: -20px;
margin-left: -20px;
}
</style>
</head>
<body>
<div class="wrap3">
<div class="relative">相对定位</div>
<div class="relative">相对定位</div>
<div class="relative">相对定位</div>
</div>
<div class="wrap3">
<div class="margin">margin</div>
<div class="margin two">margin-t-l</div>
<div class="margin">margin</div>
</div>
<div class="wrap3">
<div class="margin">margin</div>
<div class="margin three">margin-r-b</div>
<div class="margin">margin</div>
</div>
</body>
</html>
Paste_Image.png
六、如何让一个固定宽高的元素在页面上垂直水平居中?
使用绝对定位（position: absolute）。上下边距各百分之50，然后用负margin修正位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
.wrap{
position: relative;
width: 500px;
height: 500px;
background: #ccc;
}
.block{
width: 50px;
height: 50px;
background: pink;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="block"></div>
</div>
</body>
</html>
Paste_Image.png
七、浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素：就是让元素脱离文档流，向左或者向右浮动，而且其他元素认为它是不存在的，会占据他的空间。
- 其他浮动元素：会跟在浮动元素后面浮动，直到它的外边缘碰到包含框或另一个浮动元素的边框为止。
Paste_Image.png
- 对于普通元素：块元素会在浮动元素的下面,行内元素和块元素中的行内内容会考虑浮动元素的边界,因此会围绕着浮动元素。
Paste_Image.png
- 文字：文字会围绕着浮动元素。
Paste_Image.png
八、清除浮动指什么? 如何清除浮动?
因为浮动元素会跟随上一个浮动元素后面，所以在我们不希望它跟随的时候，我们就需要清除浮动，强迫它到移到下一行。
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style>
.div1{
width: 100px;
height: 50px;
background: green;
float: left;
}
.div2{
width: 80px;
height: 60px;
background: red;
float: left;
clear: left;/*不允许左边有浮动元素*/
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>
Paste_Image.png
