浮动与定位
1.文档流的概念指什么？有哪种方式可以让元素脱离文档流?
文档流是指由块状元素和内联元素按照其在 HTML 中的位置顺序决定排布的过程。
- 有三种情况回事元素脱离文档流：
- 浮动：float。
- 绝对定位：
position: absolute - 固定定位：
position: fixed
脱离文档流
2.有几种定位方式，分别是如何实现定位的，使用场景如何？
用position属性来实现定位。
| 定位方式 | 效果 | 使用场景 |
|---|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 | 按钮，logo位置 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 | 比如角上的小广告 |
| relative | 生成相对定位的元素，相对于其本来再文档流中的位置进行定位。 | 同absolute |
| static | 默认值。没有定位，元素出现在正常的流中。 | |
| inherit | 规定应该从父元素继承 position 属性的值。 | 与父元素重叠 |
| sticky | 这是CSS3新属性，表现类似position:relative和position:fixed的合体。当在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。 | 搜索框，设置栏 |
3.absolute, relative, fixed偏移的参考点分别是什么？
a.参考点是父元素的位置，如果找不到就一直往上找，没有就是根元素
r.参考点是自身再文档流初始的位置 原来的位置进行偏移
f.根据浏览器窗口的位置进行定位
4.z-index 有什么作用? 如何使用?
z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。
z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。
举个例子：
z-index例子
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别？
- 负边距就是把margin属性的值设为负数，当把
margin-bottom、margin-right设为负数的时候，元素本身并不会发生偏移，但是后面的元素会进行上移、左移。
- 当把元素的
margin-top、margin-left设为负数的时候，不仅元素本身会上移、左移，也会影响到后面的元素发生位置偏移；但是position: relative的元素设置top、left之后，只有元素本身会发生偏移，它还占据着原来的位置，后面的元素不会受到影响。
6.如何让一个固定宽高的元素在页面上垂直水平居中?
使用绝对定位和负margin可以使固定宽高的元素在页面上垂直水平居中。先对元素设置position: absolute; top: 50%; left: 50%;，此时元素的左上角在正中心的位置。再利用负margin偏移它宽高的一半。
全屏垂直水平居中
7.浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
1.浮动的元素会脱离文档流直到碰到边框或者碰到另外一个浮动元素才会停下来
2.下一个普通元素会占据浮动元素原来的位置
3.覆盖元素后会把普通元素的文字挤到下一个元素中
浮动
- 列举几个浮动元素的特性：
1.元素具有了浮动属性，它就成为了一个块级元素。
2.浮动元素永远不会重叠。
3.后浮动元素不会超过先浮动元素的顶端，除非设置了负margin。
4.浮动元素不会超过容器的上padding，除非设置了负margin。
5.浮动元素的下边界没有要求，因此当容器不足以容下浮动元素时，浮动元素会向下延伸。浮动元素向下延伸时，不会影响正常文本的显示，文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住。
6.浮动重叠规则：行内框(如strong)与浮动元素重叠时，其边框、背景、内容均位于浮动元素之上；块框与浮动元素重叠时，其边框、背景在浮动元素之下，而内容在浮动元素之上。
8.清除浮动指什么? 如何清除浮动?
1.父元素的高度无法被撑开,父容器无法包裹浮动元素
2.与浮动元素同级的非浮动元素会跟随其后
3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
- clear:left/right/both只能针对本元素，只在本元素产生效果
| left | 左边不允许有浮动 |
|---|---|
| right | 右边不允许有浮动 |
| both | 两边都不允许有浮动 |
举例:clear:left
- 在所有浮动元素下面加一个清除浮动
.clear{clear:both;}
- 利用:after和:before来在元素内部插入元素块，从而达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而这是利用伪类clear:after在元素内部增加一个类似于div.clear的效果。
.outer :after {clear:both;content:'.';display:block;}
代码问题
本文版权归作者饥人谷_Josh和饥人谷所有，转载请注明来源
