课程目标
- 掌握定位的几种方式
- 掌握浮动的原理及应用
- 理解文档流的概念
- 使用定位、浮动实现常见布局
学习建议
定位、浮动是 CSS 核心知识点
课程任务
1. 文档流的概念是什么？有哪些方式可以让元素脱离文档流？
文档流（normal flow），指语言文本从左到右，从上到下显示，这是传统 HTML 文档的文本布局。
浮动（float）、绝对定位（absolute）、固定定位（fixed）这 3 种定位方式会让元素脱离文档流。
文档流是相对于盒子模型讲的。
文本流是相对于文子段落讲的。
元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本。
但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。
当然你可以使用 index-z 来让底部的元素到上面来，类似于一个图层的概念。
拓展阅读：
2. 有几种定位方式，分别是如何实现定位的，使用场景如何？
定位
CSS 定位 (Positioning) 属性允许你对元素进行定位。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素，另一个元素甚至浏览器窗口本身的位置。
CSS 有 3 种基本的定位机制：普通流（文档流）、浮动和绝对定位。
static，默认值。没有定位，元素出现在正常的流中。（忽略 top, bottom, left, right 或者 z-index 声明）。
relative 生成相对定位的元素，相对于其本来正常位置进行定位。且没有脱离文档流
fixed 是相对于浏览器窗口定位，即使窗口滚动，它也不会移动。且脱离文档流(因此，不占据空间。)
absolute 绝对定位的元素的位置相对于 最近的已定位父元素 (即已用 relative、absolute 或者 fixed 定位过的)，如果元素没有已定位的父元素，那么它的位置相对于<html>。且让元素脱离文档流。
tips：
- 默认 z-index 是 0，所以如果设置 z-index 为负值，就会在“整个”的下面。
- 浮动和绝对定位可以让元素脱离文档流。
- 所以元素如果没有设置 position: relative, absolute, 或者 fixed。那么设置的 top, bottom, left, right, z-index 都是没有用的。
- 相对定位元素 (relative) ，经常被用来作为绝对定位元素（absolute）的容器块。
3. absulute，relative，fixed 偏移的参考点分别是什么？
absolute 的参考点是最近已定位的父元素或者根节点。
relative 的参考点是其本来的原位置。
fixed 的参考点是浏览器窗口。
4. z-index 有什么作用？如何使用？
z-index 指定一个元素的堆叠顺序。数值大的元素处于数值小的元素上面（可以为负数）。数值越大，离你越近。
注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style media="screen">
img {
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<img src="goutou.jpg" alt="dog" />
<h1>测试 z-index测试 z-index测试 z-index测试 z-index</h1>
<h1>测试 z-index测试 z-index测试 z-index测试 z-index</h1>
<h1>测试 z-index测试 z-index测试 z-index测试 z-index</h1>
<h1>测试 z-index测试 z-index测试 z-index测试 z-index</h1>
<h1>测试 z-index测试 z-index测试 z-index测试 z-index</h1>
<h1>测试 z-index测试 z-index测试 z-index测试 z-index</h1>
</body>
</html>
z-index1.png
position: absolute;使图片脱离普通流。且z-index: -1;令图片在文字下面(默认 z-index 为 0)。
若改为：
img {
position: absolute;
z-index: 1;
}
()
则图片 z-index 大于文字默认的 z-index，令图片在文字上面。
5. position:relative 和负 margin 都可以使元素位置发生偏移？二者有什么区别？
position: relative;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Relative 与 负margin</title>
<style media="screen">
.container {
width: 200px;
height: 200px;
border: 1px solid;
}
.box1 {
width: 50px;
height: 50px;
background-color: red;
position: relative;
top: 10px;
left: 30px;
}
.box2 {
width: 50px;
height: 50px;
background-color: blue;
}
.box3 {
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
relative.png
红色 box1 脱离本来的位置，但是原本占据的空间并没有被其他 box 占据。
负 margin
.box2 {
width: 50px;
height: 50px;
background-color: blue;
/*margin-left: -20px;*/
/*margin-right: -200px;*/
/*margin-bottom: -30px;*/
margin-top: -30px;
}
负margin.png
蓝色box2直接顶上去了，而且接着的绿色box3也跟着一起往上移。
拓展阅读：
6. 如何让一个固定宽高的元素在页面上垂直水平居中？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何让一个固定宽高的元素在页面上垂直水平居中</title>
<style media="screen">
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
div垂直水平居中.png
思路：绝对定位，left: 50%; + top: 50%;（这是，只是左上角的点居中了）再加上 margin-left: -50px; + margin-top: -50px; （移动半边长的距离，令 div 的“中心”移动到外面父元素的“中心”）。
7. 浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响？
浮动，浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以，文档的普通流中的块框表现得就像浮动框不存在一样。
特征：
- 内联元素支持宽高
- 无论是块元素还是内联元素，没有宽度时默认内容撑开宽度
- 脱离文档流
对其他浮动元素的影响：
后浮动的元素永远不会超过先浮动的元素
对普通元素的影响：
浮动元素会脱离普通流，使得周围的元素发生偏移
对文字的影响：
浮动元素不会影响到文字的显示，文字会相对于浮动元素发生偏移
tips：
- 文字可以围绕在浮动框周围（类似于 office 的“围绕图片的文字”）
- 浮动只有向左或者向右，而没有自动向上一说。
- 块元素浮动，占据的空间就变为“行内元素”，不占据一整行。浮动元素占据的空间（如果没有设置 width ），会按本身内容而定，就像“行内元素”一样。absolute 也会有类似的效果
8. 清除浮动指什么？如何清除浮动？
元素在浮动之前，是在标准流的，是竖向排列的。而浮动之后，可以理解为横向排列。
清除浮动可以理解为打破横向排列。
demo1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
.box1 {
width: 200px;
height: 100px;
background-color: red;
float: left;
clear: right;
}
.box2 {
width: 500px;
height: 300px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
清除浮动1.png
.box1 用了clear: right;，但是 .box2 仍然在 .box1 的右边。可见，并没有清除浮动。
demo2
.box1 {
width: 200px;
height: 100px;
background-color: red;
float: left;
/*clear: right;*/
}
.box2 {
width: 500px;
height: 300px;
background-color: blue;
float: left;
clear: left;
}
清除浮动2.png
.box2 用了 clear: left;，由图可知，已清除浮动。
综合2个 demo，得知，对于 清除浮动（clear），这个规则只能影响使用清除的元素本身，不能影响其他元素。
网友评论