1. 文档流的概念指什么？有哪种方式可以让元素脱离文档流?
- 元素自上而下排列，将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
- 脱离文档流的方法有两种：定位和浮动。
2. 有几种定位方式，分别是如何实现定位的，使用场景如何？
CSS 有三种定位机制：普通流、浮动和定位
- 普通流：正常情况下，所有元素都在普通流中定位。块级框从上到下一个接一个地排列。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。行内框的最高位和最低位的差就是行高，行高即为行框高。
- 定位：position属性。
| 属性值 | 描述 |
|---|---|
| static | 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 |
| relative | 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 |
| absolute | 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 |
| fixed | 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。 |
demo：
- position: static;
position: static;
可以看出，static属性值是正常的普通流布局，块级元素从上到下，从左到右依次显示。 - position: relative;
position: relative;
可以看出，当position属性值设置为relative时，可以对元素的位置定位，left: 200px; bottom: 80px;使元素向右移动200像素;向上移动80像素；而box2原有位置占用空间仍然保留，不影响其他元素布局。
补充：关于left,bottom设置问题：
左上角为(0,0)原点，向右向下为正方向的一个坐标系，如图：
设置距离
-
position: absolute;
① 父元素不是定位元素：
position: absolute
② 父元素是定位元素：
父元素是定位元素
可以看出，由两幅图可以看出position: absolute;的用法，即将元素脱离文档流，然后相对于父元素进行定位，前提是父元素是定位元素，如果父元素不是定位元素，那么就按照嵌套关系逐级向上寻找，直到根节点（视窗）进行定位。
PS： 父元素的position属性值为：absolute,relative,fixed才能定位，static不可以。
- position: fixed;
position: fixed;
如图所示，fixed属性值相对于浏览器视窗进行定位，而无论进度条拖到什么位置，box2元素始终相对于视窗固定。
3. absolute, relative, fixed偏移的参考点分别是什么？
fixed是相对于视窗定位。
relative是根据本身原位置定位。
absolute是根据根节点或者有position属性的父元素定位。
偏移的参考原点是父元素或者视窗的最左上角。
左上角为(0,0)原点，向右向下为正方向的一个坐标系，如图：
设置距离
4. z-index 有什么作用? 如何使用?
- z-index是设置元素的堆叠顺序的属性。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面；
- 元素可拥有负的 z-index 属性值；
- z-index属性仅在定位元素上奏效；
- 如果为正数，则离用户更近，为负数则表示离用户更远。
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
img {
position: absolute; /* 设置定位属性，从而触发z-index属性 */
z-index: -1; /* 设置z轴为-1，元素显示在下面 */
}
</style>
</head>
<body>
<div class="cat-1">
<h1>任务10的大标题</h1>
<h2>任务10 阿拉路，阿拉啦，我在东北玩泥巴</h2>
<h2>任务10 阿拉路，阿拉啦，我在东北玩泥巴</h2>
<h2>任务10 阿拉路，阿拉啦，我在东北玩泥巴</h2>
<h2>任务10 阿拉路，阿拉啦，我在东北玩泥巴</h2>
<h2>任务10 阿拉路，阿拉啦，我在东北玩泥巴</h2>
</div>
</div>
</body>
</html>
效果图：
z-index: -1
如图所示，图片元素position为absolute，所以从文档流脱离，此时h1和h2向上流动占用图片原位置，然后设置z-index为-1，使图片位于元素下面。
如果将z-index改为1，则：
img {
position: absolute;
z-index: 1;
}
z-index: 1
5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别?
- 而给margin设置负值，不但改变了元素本身，还改变了周围其他元素的布。
margin: -10px;
- position: relative;是单独对元素本身进行渲染，不影响其他元素的布局；
Paste_Image.png
6. 如何让一个固定宽高的元素在页面上垂直水平居中?
可以利用position: absolute;将元素脱离文本流，然后设置left: 50%; top: 50%;从而使元素的左上角点位于页面中点，最后通过调节元素的margin值（左上各负一半）将元素居中。
元素垂直水平居中
可以看出，这种方法确实可以将元素放置于父元素的中心，而如果不设置margin,继续调节left和top值可不可以呢？为此做如下改动：
.container1 .box:nth-child(1) {
width: 80px;
height: 80px;
background: rgba(0,255,0,0.3);
position: absolute;
left: 50%;
top: 50%;
left: -40px; /* 会覆盖上面属性 */
top: -40px;
}
错误演示图
事实证明！是不可以叠加效果的，元素是一次性渲染成最终结果，而不是先定位一次再定位下一次，只有覆盖没有叠加，这是CSS样式表语言的特性。
7. 浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
在 CSS 中，我们通过 float 属性实现元素的浮动。
- 浮动元素脱离文档流，原位置不继续占用空间；
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止；
- 浮动元素表现类似于有不同的z-index值，即“浮”在页面，使得其他块框元素不受其影响。
- 虽然块框不受其影响，但是浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框，造成文字环绕浮动元素显示。
具体如下：
float: right;
如图所示，box2向右浮动，box3向上填补位置；
float: left;
如图，float:left;将box2元素向左浮动，而此时box3向上占据位置，所以重叠，由于box2脱离文档流，z-index值高，所以在box3的上面显示。
float: left;
如图所示，将三个box元素均设置为float: left;按照渲染顺序依次排列。
文字避让
如图可以看出，box2向右浮动，而box3向上占据位置，显然，从图中的透明重叠部分可以看出，box3块框无影响，而box3里面的段落内容则避让box2布局，这就是浮动元素改变行框的现象。
8. 清除浮动指什么? 如何清除浮动?
- 清除浮动指通过clear属性将之前浮动元素的影响消除。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
.container {
width: 280px;
height: 280px;
border: 1px solid;
margin: 0 auto;
}
.box {
width: 80px;
height: 80px;
}
.box1 {
background: rgba(255, 255, 0, 0.7);
border: 1px solid;
float: right;
}
.box2 {
background: rgba(0, 255, 255, 0.7);
border: 1px solid;
margin: 20px;
float: right;
}
.box3 {
background: rgba(255, 0, 255, 0.7);
border: 1px solid;
/*clear: both;*/
}
</style>
</head>
<body>
<div class="container">
<div class="box1 box">1</div>
<div class="box2 box">2</div>
<div class="box3 box">3</div>
</div>
</body>
</html>
效果图：
未使用clear属性
如图所示，当我未使用clear属性时，box1和box2均向右浮动，而box3受到两个浮动元素的影响，向上占据位置。
- 如果对box3使用clear: both属性，那么得到的效果是：
clear: both;
可以看出，box3使用clear: both;时，位置相对于box2未发生改变；
- 如果对浮动元素box2用clear属性，即：
.box2 {
background: rgba(0, 255, 255, 0.7);
border: 1px solid;
/*margin: 20px;*/
clear: both;
float: right;
}
则效果为：
clear-box2
可以看出，box2相对box1的位置未改变，只是box2本身向右浮动，而box3由于也使用了clear: both;，所以位置未发生改变。
- 再来试试clear的另外两个值left和right：
.box1 {
background: rgba(255, 255, 0, 0.7);
border: 1px solid;
float: right;
}
.box2 {
background: rgba(0, 255, 255, 0.7);
border: 1px solid;
clear: right;
float: right;
}
.box3 {
background: rgba(255, 0, 255, 0.7);
border: 1px solid;
float: right;
clear: left;
}
.box4 {
background: rgba(238, 217, 255, 0.7);
border: 1px solid;
clear: both;
}
clear: left(right);
如图，我们为元素添加一个box4，box4处于最后位置，并且clear: both;，所以选box4为参考；当对box2使用clear: right;时，元素不受box1的影响，而当我对box3使用clear: left;时，元素受到浮动影响；
所以可以看出：
clear的left和right只对上一个浮动元素的方向有效，即浮动元素在左，用left值，反之用right。
综上所述：
- clear属性用于清除浮动，浮动元素在左用left，在右用right，both属性皆生效；
- 布局中，分大小区块，使用float属性和clear属性情况各有不同，各大区块使用clear可以更好地区分。
- 浮动元素存在margin，并且无法合并，但无法撑开父元素；
- 无论元素未使用定位和浮动前是什么元素，定位或者浮动后，都会按块级元素处理。
本文版权归本人和饥人谷所有，转载请注明来源，谢谢
网友评论