前端基础（浮动、定位）十
2016-09-20 本文已影响0人
nineSean
问答
1. 文档流的概念指什么？有哪种方式可以让元素脱离文档流?
文档流（normal flow）指按照从左到右、从上到下的布局方式，又称普通流、正常流、标准文档流。
让元素脱离文档流的方式有：
- float——浮动
float: left;
或
float: right;
浮动的元素脱离文档流，向左或者向右移动至包含块内边缘或者同样浮动的元素外边缘。
- position——定位
- 绝对定位
position: absolute;
绝对定位的元素脱离文档流，在原位置上方直至设置了定位值，以最近已定位的祖先元素内边框为参照。
* 固定定位
position: fixed;
固定定位的元素脱离文档流，在原位置上方直至设置了定位值，参照物为浏览器可视区。
2. 有几种定位方式，分别是如何实现定位的，使用场景如何？
css的定位机制分为三种：文档流、浮动、定位。
- 文档流
文档流是所有元素布局的基础，作为从左到右、从上到下的布局方式，这是最常用的一种排版布局方式。 - 浮动
实现语法和特性见题1，浮动最初是为了实现文字环绕图片，后来慢慢用于实现多列布局。 - 定位
如下表：
| 定位 | 属性值 | 描述 | 适用范围 |
|---|---|---|---|
| 静态定位 | static | 与文档流类似 | 默认 |
| 相对定位 | relative | 未脱离文档流，相对原来的位置定位，仍然占据原来位置 | 适用于层叠效果 |
| 绝对定位 | absolute | 脱离文档流 | 小区块的布局使用频繁 |
| 固定定位 | fixed | 脱离文档流 | 用于广告等意图一直出现在用户眼前的信息 |
3. absolute, relative, fixed 偏移的参考点分别是什么
如下表：
| 定位属性值 | 参考点 |
|---|---|
| absolute | 参考点为最近已定位的祖先元素的内边框 |
| relative | 参考点为内边框 |
| fixed | 参考点为浏览器可视区内边框 |
4. z-index 有什么作用? 如何使用?
z-index定义了z方向（与显示屏垂直的方向，值越大者堆叠显示在前面）的级别从而使元素有序堆叠显示。
ps:该属性值只对已定位的元素有效。
- 堆叠顺序
- 不对元素设position时，文档流后面的元素覆盖前面的元素。
- 将元素设置的position设置为relative ，absolute 或者 fixed，元素会覆盖没有设置 position 属性或者属性值为 static 的元素。
- 一般情况下z-index值越大者在前面。
- 子元素继承元素的堆叠关系，不论子元素的z-index值比父元素的兄弟元素大或者小，都继承父元素与其兄弟元素的堆叠关系。
5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative不论偏移到何处只是占据原来的位置，而margin比较霸道——偏移的位置都要被自己占据。
6. 如何让一个固定宽高的元素在页面上垂直水平居中?
如下：
垂直水平居中
7. 浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素特征：
- 文字环绕图片。
- 脱离文档流、不占位置。
- 浮动的元素，一定程度上可以理解为带方向的inline-block元素，一样可以同行排列，可以设置元素宽高、边距，只是排列顺序可以从右到左。
- 浮动的影响：
- 对其他浮动元素
兄弟之间从左到右，从上到下排列。 - 对普通元素
脱离文档流，不占位置。 - 对文字
浮动创造的目的就是为了文字环绕图片，所以文字会环绕、包裹浮动元素。
- 对其他浮动元素
8. 清除浮动指什么? 如何清除浮动?
- 清除浮动
清除浮动指的是清除浮动对其他元素造成的影响。 - 如何清除浮动
清除浮动的方法有很多，概括如下：- 运用clear:both/left/right清除浮动
可以在浮动元素末尾添加一个空内容带clear样式属性的标签，最常用、最有的方式是添加一个带clear的伪元素，如下代码：
.clearfix:after{ content: ""; display: block; clear: both; } .clear{*zoom: 1;} /*兼容IE6*/- 触发BFC清除浮动
触发BFC的方式有很多，如下：- 清除子元素浮动，父元素也浮动或者绝对定位触发BFC。
- overflow属性值非visiable。
- display成非块级盒子。
- 运用clear:both/left/right清除浮动
代码
参考
本文章著作权归饥人谷_九霄和饥人谷所有，转载须说明来源
