1.文档流的概念指什么？有哪种方式可以让元素脱离文档流？
浏览器逐行渲染html文档中的代码，也就是说元素按照在网页源代码中出现的顺序从上至下，从做左至右输出到显示器上。
有浮动float和定位position可使元素脱离文档流（position:static情况除外）。
2.有几种定位方式，分别是如何实现定位的，使用场景如何？
| 值 | 效果 |
|---|---|
| inhert | 规定应该从父元素继承 position 属性的值 |
| static | 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） |
| relative | 生成相对定位的元素，相对于元素本身正常位置进行定位, 因此，left:20px会向元素的 left 位置添加20px |
| absolute | 生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位，元素的位置通过left, top, right以及bottom属性进行规定 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left, top, right以及bottom属性进行规定 |
| sticky | CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative;而当页面滚动超出目标区域时，它的表现就像position:fixed;，它会固定在目标位置 |
3.absolute, relative, fixed偏移的参考点分别是什么？
-
position:absolute;的参考点是元素的除了static定位意外的第一个祖先元素； -
position:relative;的参考点是元素本身的正常位置； -
position:fixed;是相对于浏览器窗口进行定位的。
4.z-index 有什么作用？如何使用？
-
z-index属性设置元素堆叠顺序。z-index值大的元素显示在最前面。z-index只能在非position:static;元素上实现
5.position:relative和负margin都可以使元素位置发生偏移？二者有什么区别？
-
position:relative元素在文档流中的空间位置不变，如例中div4； - 负margin元素所占空间随元素本身移动。如例中
div2.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task10</title>
<style type="text/css">
div {
width:100px;
height:100px;
border:1px solid;
}
.div1 {
background:yellow;
}
.div2 {
background:red;
margin-top:-20px;
margin-left:20px;
}
.div3 {
background:green;
}
.div4 {
background:pink;
position:relative;
top:-20px;
left:20px;
}
.div5 {
background:#ccc;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="div5">div5</div>
</html>```
Paste_Image.png
6.如何让一个固定宽高的元素在页面上垂直水平居中？
i. 给要居中元素添加position:absolute;top:50%;left:50%;属性，同时添加负边距margin-top:-51px;margin-left:-51px;：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task10</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
.div1 {
width:100px;
height:100px;
border:1px solid;
background:red;
position:absolute;
top:50%;
left:50%;
margin-top:-51px;
margin-left:-51px;
}
</style>
</head>
<body>
<div class="div1">垂直水平居中</div>
</html>```
实现效果：
Paste_Image.png
ii.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task10</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
.div1 {
background:red;
width:100px;
height:100px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
</style>
</head>
<body>
<div class="div1">
该元素垂直水平居中
</div>
</html>```
实现效果：
###7.浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响？
- 浮动元素脱离正常文档流，并根据float属性值进行排列。其他非浮动元素重新按照正常文档流排列。
- 浮动元素与其之后的非浮动元素会产生重叠的情况，但非浮动元素中的文字等内容不会与浮动元素发生重叠，将被挤出浮动元素区域。
###8.清除浮动指什么？如何清除浮动？
- 清除浮动指的是改变元素位置，使其在指定方向上没有浮动元素。
- 通过```clear```属性来实现清除浮动，清除浮动的结果会使添加了```clear```属性的元素移动合适位置，而不是其他元素避开。
***
*本教程版权归本人和饥人谷所有，转载请注明来源。*
网友评论