1.文档流的概念指什么？有哪种方式可以让元素脱离文档流?
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)。
通过float（浮动）或position（定位）来使元素脱离文档流。将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
2.有几种定位方式，分别是如何实现定位的，使用场景如何？
4 种不同类型的定位。
<li>static：默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
<li>relative：生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。元素不会脱离文档流，其偏移的参考点为自身原本所在的位置。
<li>fixed：固定定位，元素框的表现类似于将 position 设置为 absolute。其参考点为浏览器。
<li>absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。元素将脱离文档流，参考位置为页面。
z-index 层叠： 值越大，元素就会在外层，覆盖较小值的元素。默认值为零，但如果不设置的话，后面会自动挡住前面。
img {
position:absolute;
left:0px;
top:0px;
z-index:1;
}```
fixed和absolute表面上看起来没什么区别，都是固定定位，其实两者的区别就是所面对的参考系不同，举例说明：
<html>
<head>
<meta charset="utf-8">
<title>定位</title>
<style type="text/css">
div{
width:50px;
height:50px;
background:red;
}
left{
left:0px;
top:100px;
position:absolute;
}
right{
right:0px;
top:100px;
position:fixed;
}
</style>
</head>
<body style="height:1000px;">
<div id="left">absolute</div>
<div id="right">fixed</div>
</body>
</html>```
随着拉动浏览器滚动条，absolute会随之上下滚动，而fixed则固定在此位置不动。
position:relative日常应用的时候一般是设置给position:absolute;的父层的,父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素。
3.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
<li>position: relative仅仅是定位自身元素位置，不会对其他元素造成影响。
<li>负margin则是改变了此元素的外部参考线，当有其他元素与之相邻时，会受到此参考线影响，从而受到影响。
4.如何让一个固定宽高的元素在页面上垂直水平居中?
<li>定位+负margin
<html>
<head>
<meta charset="utf-8">
<title>定位+负margin</title>
<style>
.position {
height: 50px;
width: 50px;
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
}
</style>
</head>
<body>
<div class="position">position</div>
</body>
</html>
5.浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
浮动最初是为了解决文字环绕的问题，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
<li>元素浮动后，就会默认在浏览器中不占用位置。所以才会产生“覆盖”的情况。
<li>若两个元素都设置为左浮，则会并列，因为此时都为浮动元素：
6.清除浮动指什么? 如何清除浮动?
<li>清除浮动指通过clear属性将之前浮动元素的影响消除。
<li>清除浮动只能用于其本身，加在需要达到清除浮动效果的元素上。
取值：
1.none : 默认值。允许两边都可以有浮动对象
2.left : 不允许左边有浮动对象
3.right : 不允许右边有浮动对象
4.both : 不允许有浮动对象
eg:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
.container {
width: 400px;
height: 400px;
border: 1px solid;
margin: 0 auto;
}
.box {
width: 80px;
height: 80px;
}
.box1 {
background: red;
border: 1px solid;
float: left;
}
.box2 {
background: yellow;
border: 1px solid;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box1 box">1</div>
<div class="box2 box">2</div>
</div>
</body>
</html>```
两个都为浮动元素，所以两个区块并列在一行。此时清除浮动 ，因为 1 在 2 的左边，所以对 2 加上“ float: left"，就可以得到：
``` .box2 {
background: yellow;
border: 1px solid;
float: left;
clear: left;
}```
此时虽然 1 还是浮动元素，但是相对于 2 来说，被“清除浮动”，那么就是一个块级元素，所以 2 在 1 的下边。
***
**本文版权归本人和饥人谷所有，转载请注明来源**
网友评论