- 文档流的概念指什么？有哪种方式可以让元素脱离文档流?
- 文档流就是浏览器在页面上摆放HTML元素所用的方法。浏览器从HTML文件最上面开始，从上到下沿着元素流逐个显示所遇到的各个元素。
- 文档流中的块元素：块元素会在每个块元素之间加一个换行。浏览器首先会显示文档中的第一个元素，然后是一个换行，然后是第二个元素，接下来又是一个换行，如此继续，从文件最上面一直到文件末尾逐个显示。
- 文档流中的行内元素：在浏览器中行内元素在水平方向上会互相挨着，总体上回从左上方流向右下。
- 使元素脱离文档流的方式有：
浮动：
float: left;
float: right;
定位：
position: relative;
position: absolute;
position: fixed;
- 有几种定位方式，分别是如何实现定位的，使用场景如何？
- 相对定位：“相对于”元素在文档流中的初始位置。
position:relative;
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后可以通过设置垂直或者水平位置，让这个元素“相对于”它的起点移动。如果将top设置为40px，那么框将出现在原位置顶部下面40px的地方。如果将left设置为40px，那么会在元素左边创建40px的空间，也就是将元素向右移动。
.box {
position: relative;
left: 40px;
top: 40px;
}
span标签仍然认为相对定位的元素在原来的位置
在使用相对定位是，无论是否移动，元素仍然占据原来的空间。移动元素会导致它覆盖其他框。
- 绝对定位：“相对于”距离它最近的已定位的祖先元素，如果不存在已定位的祖先元素，那么相对于初始包含块,一般是<body>。
position: absolute;
相对于最近的已定位祖先元素来定位绝对定位的元素，可以假设让一个文本段落对准一个大框的右下角，只需对包含框进行相对定位，然后相对于这个框对段落进行绝对定位。
#warp {
width:450px;
height:450px;
position: relative;
border: 1px solid;
}
#warp .num {
position:absolute;
right: 10px;
bottom: 10px;
text-align: right;
}
- 固定定位：固定定位是绝对定位的一种，差别是固定定位是相对于浏览器窗口(viewport)来定位的。在页面中位置是不变的。
position: fixed;
absolute, relative, fixed 偏移的参考点分别是什么
absolute绝对定位的元素的位置相对于距离它最近的那个已定位的祖先元素确定的。如果元素没有已定位的祖先元素，那么它的位置是相对于初始包含块定位。
relative相对定位的元素相对于元素本身在文档流中的初始位置。
fixed固定定位的元素是相对于浏览器窗口(viewport)来定位的。
z-index 有什么作用? 如何使用?
-
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。绝对定位的元素可以通过设置z-index属性来控制这些框的叠放次序。z-index值越高，框在栈中的位置就越高。
z-index z-index仅对定位元素有效
z-index只可比较同级元素
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
-
position:relative,元素偏移后脱离的文档流，但元素原来的位置仍然占据文档流中，不会影响之前的文档流，其之后的元素仍然会认为定位元素在文档流中而跟随在后面。
position:relative -
负margin：元素偏移后并没有脱离文档流，位置变化影响了文档流，之后的元素按文档流的排列特征也会跟着偏移
负margin 如何让一个固定宽高的元素在页面上垂直水平居中?
-
使用绝对定位定位元素的left、top为50%,再设置元素left、top的负外边距为元素宽高的一半。
绝对定位与负外边距 浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
1 浮动元素会从文档正常流中删除，但它仍会影响布局。
2 浮动如果没有设置固定width，设置浮动后块元素宽度为内容的宽度，没内容就会显示不全。
3 一旦行内元素具有了浮动属性，它便具有块级元素的特性，可以设置宽高。
4 浮动元素的左右外边界不能超出包含块的左右内边界。
5 浮动元素永不会重叠。
6 浮动元素不会超过容器的上padding。
7 后浮动的元素永不会超过先浮动元素的顶端。
8 浮动元素会尽可能高地放置，便这个高受限于规则6和规则7。
9 浮动元素的下边界没有要求，因此当容器不足以容下浮动元素时，浮动元素会向下延伸。但部分浏览器会采取增大容器高度以容下浮动元素，而对于符合CSS2.1规范的浏览器要想让容器容下浮动元素的一个可行方法是：让容器也浮动。
10 浮动元素向下延伸时，不会影响正常文本的显示，文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住。
11 如果浮动元素设置了负的外边距、这将破坏规则4、6、7。
12 当浮动元素的width>容器的width时，这会使得浮动元素超出容器的左右边界(超左超右依浮动方向而定）。
-
下面是浮动的几种效果
box1浮动后脱离文档流，box2开始的块元素占据了box1的位置，但是box2的文本被挤出
box1设置右浮动脱离文档流，box2等元素按顺序开始占据文档流最起始的位置
这里box2,box3,box4设置了左浮动，但是因为容器宽度不够导致box4并未跟随box3之后而是向下排列
当容器有足够宽度时候，浮动元素将会跟随排列 上述两种情况我们发现容器.ct没有设置高度，父容器会出现高度不能覆盖浮动元素的情况。可以用overflow属性来解决。或者在父容器最后增加块级空元素并设置clear属性。
清除浮动指什么? 如何清除浮动?
-
浮动会让元素脱离文档流，如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现的像浮动根本不存在一样。但是框的文本内容会受到浮动元素的影响，会移动并流出空间，形成围绕浮动元素的情况。
在文档流中的元素被浮动元素遮盖但是文本却留出个空间围绕在浮动元素周围
设置margin属性给浮动元素留出空间
使用clear属性阻止元素内容围绕在浮动元素的外边
当父容器里的元素开始浮动时，父容器会出现不覆盖浮动元素的情况
解决方法1，在父容器最后增加一个空元素设置clear属性
解决方法2，给父容器设置overflow属性
代码
1 写出如下两栏布局, 其中中间区块宽度900px, 居中,左侧边栏宽度200px, 右侧边栏宽度700px做完可参考范例
ps: 图片左浮动，导航栏整体右浮动，导航栏里面的li元素左浮动。
ps: aside左浮动，main左浮动
凡是有浮动的地方，其直接父元素必须清除浮动
代码1
2 不适用背景图片实现如下效果
代码2
本博客版权归 本人和饥人谷所有，转载需说明来源
