1. 文档流的概念指什么？有哪种方式可以让元素脱离文档流?
文档流（normal flow）元素由上到下、由左到右依次排版布局。
浮动和绝对定位机制都可使元素脱离文档流。
2. 有几种定位方式，分别是如何实现定位的，使用场景如何？
- 文档流：元素由上到下、由左到右依次排版布局
- 浮动：浮动本来是为实现文字环绕而诞生的，但是后来开发者常将它用于页面的布局
- 定位（position )
分为static、absolute、relative和fixed- absolute是绝对定位，参考点是以已经定位的父元素的左上顶点
- relative是相对定位，参考点是以元素所在的原来位置的左上顶点
- fixed，参考点是浏览器的页面视窗的左上顶点
3. absolute, relative, fixed 偏移的参考点分别是什么?
- absolute 是绝对定位，参考点是以已经定位的父元素的左上顶点
- relative是相对定位，参考点是以元素所在的原来位置的左上顶点
- fixed，参考点是浏览器的页面视窗的左上顶点
4. z-index 有什么作用? 如何使用?
z-index是设置元素的堆叠顺序，拥有高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
- 普通规则：不对元素设position(或者设置为static)时，文档流后面的元素覆盖前面的元素；
- 定位规则：将元素设置的position设置为relative ，absolute 或者 fixed，元素会覆盖没有设置 position 属性或者属性值为 static 的元素;
- 参与规则： z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.
- 从夫规则：如果所有节点都定义了 position:relative, A 节点的 z-index 和 B 节点一样大, 但因为顺序规则, B 节点覆盖在 A 节点前面. 就算 A 的子节点 z-index 值比 B 的子节点大, B 的子节点还是会覆盖在 A 的子节点前面.
Paste_Image.png
很多人将 z-index 设得很大, 9999 什么的都出来了, 如果不考虑父节点的影响, 设得再大也没用, 那是无法逾越的层级.
5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别？
position:relative和负margin都可以使元素位置发生偏移，二者的区别表现在：
-
负margin会使元素在文档流中的位置发生偏移，它会放弃偏移之前占据的空间，紧挨其后的元素会填充这部分空间；
Paste_Image.png
- 相对定位后元素位置发生偏移，它仍会坚守原来占据的空间，不会让文档流的其他元素流入
Paste_Image.png
6. 如何让一个固定宽高的元素在页面上垂直水平居中?
.box {
background:lightgreen;
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}
/* 左外边距和上外边距分别设置成宽高的一半 */
7. 浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素将脱离文档流，内联元素支持宽高;
- 无论是块元素还是内联元素，没有宽度时默认内容撑开宽度;
- 浮动元素对其他元素的影响：
- 对其他浮动元素的影响
- 对普通元素的影响，普通元素会占据浮动元素原来所在的文档位置
- 对文字而言，除了自身的文字外，其他元素中的文字一律环绕浮动元素周围；
<body>
<div>这是一段长长的句子这是一段长长的句子这是一段长长的句子这是一段长长的句子这是一段长长的句子这是一段长长的句子这是一段长</div>
<div>some-content.......</div>
</body>
Paste_Image.png
8. 清除浮动指什么? 如何清除浮动?
- 同级元素的清除浮动;
浮动元素使得同级的非浮动元素紧随其后
解决办法：可以在非浮动元素中添加clear：left|right|both达到清除浮动,即不允许浮动元素的左侧、右侧或两侧出现其他非浮动元素 -
父级元素的清楚浮动；
如果子元素是包裹在自适应宽高的父元素中，那么一旦该子元素浮动，父元素的高度会“塌陷”，因为父元素的高度就是子元素的高度，浮动使得子元素脱离文档流，让父元素认为子元素“不存在”了
Paste_Image.png
Paste_Image.png
解决办法：
设计思想就是在父元素前或后加入一个内容为空的盒子，并设置这个盒子具有clear属性，从而使得前面的浮动元素“无处可逃”
具体代码如下：
.clearfix {
overflow:hidden; /* 或者clear: both; */
*zoom:1; /* for ie 6*/
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
height: 0;
font-size: 0;
}
网友评论