问答
一、文档流的概念指什么？有哪种方式可以让元素脱离文档流?
- 文档流即指普通流。将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)，这是传统HTML文档的文本布局。
- 文本流和文档流的区别：
文档流是相对于盒子模型讲的
文本流是相对于文子段落讲的
元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。
但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。
当然也可以使用 index-z 来让底部的元素到上面来，类似于一个图层的概念。 - 脱离文档流的方式
- position:absolute;
- position:fixed;
- display:none;
- float:left/fight.
实例
二、几种定位方式，分别是如何实现定位的，使用场景如何？
-
position:static 当我们有两个页面同时需要对某个元素进行绝对定位，另外一个不需要时。
0_1479047619672_upload-5ff5d3e9-6574-4baa-ac1e-7f8d5f9dd6c7
0_1479047653904_upload-a05d9d54-09ec-486c-ba52-72e1923a5ee3
- position:relative
- 带有此项属性的父元素常作为具有绝对定位属性的子元素的参照物。
- 有left right top bottom四个属性，值表示相对于元素文档流中的位置的位移大小
- 包括IE6以内，全部支持
- position:fixed
- 网页两侧浮动窗口(播放器,置顶按钮,浮动广告，功能按钮等)
- 隐藏div实现弹窗功能(通过设置div的定位和z-index控制div的位置和出现隐藏)
- 有left right top bottom四个属性，值是相对于浏览器页面窗口边框的位移。
- position:sticky 在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。常用于侧边栏的部分区域。值和
同上。
实例
三、absolute, relative, fixed 偏移的参考点
- absolute：详情见简书实例
相对于非static定位以外的第一个祖先元素（根据用户代理的不同，最初的包含块可能是画布或 HTML 元素）进行定位。 - relative：相对于元素本身正常位置进行定位
- fixed：相对于浏览器窗口进行定位
实例
四、z-index的作用？如何使用？
- 作用：z-index数学指定了一个元素及其子元素的z-order.当元素之间重叠时，z-index决定哪一个元素覆盖在其余元素的上方显示。通常来说z-index较大的元素会覆盖较小的那一个。
- 使用对象：定位元素
- 使用方式：z-index:值（此自定义值建议为1、2、3、4等简易数字可以较为明显的看出谁能在堆叠上下文中最上面显示）
实例
五、position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative使元素位置偏移，但是本来的位置还保存在那，不影响其他和本元素并列的元素。负margin反之。
六、如何让一个固定宽高的元素在页面上垂直水平居中?
例子
七、浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
- 特征：浮动元素脱离文档流。
- 其他浮动元素碰到浮动元素的边框就会停住不继续往那个方向浮动。一排可能会有多个浮动元素，满了之后在下一排排列。
- 会覆盖在普通元素上面。
- 文字会围绕浮动元素。
八、清除浮动指什么? 如何清除浮动?
- 对于浮动元素引起的问题：
- 浮动元素不会影响父元素的高度。这样做会让父元素塌陷，从而使父元素的高度为“0”，以及忽略其他的属性。
- 与浮动元素同级的非浮动元素会跟随其后。
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
我们给予清除浮动的办法。clear: nono|left|right|both
对元素清理实际上为前面的浮动元素留出了垂直空间，且清除浮动时，添加clear属性只能对自己有效。
- 较为典型的三种方法
网友评论