文档流的概念指什么？有哪种方式可以让元素脱离文档流?
- 文档流：将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流
- position：absolute；position：fixed；
- float：left；float：right；
有几种定位方式，分别是如何实现定位的，使用场景如何？
- position：absolute；生成绝对定位的元素，相对static定位以外的第一个父元素定位。元素的位置通过“left”，“right”，“top”，“bottom”属性设定；使用场景：实现元素在块级元素总居中
- position：relative；生成相对定位的元素，相对于元素本身的位置定位，元素的位置通过“left”，“right”，“top”，“bottom”属性设定，不脱离文档流；使用场景：一般配合绝对定位使用
- position：fixed；生成绝对定位的元素，相对于浏览器窗口定位，元素的位置通过“left”，“right”，“top”，“bottom”属性设定；使用场景：一直显示在窗口中的导航条，广告等
- position：static；默认值，没有定位
absolute, relative, fixed偏移的参考点分别是什么
- absolute：第一个拥有定位的父元素
- relative：元素本身的位置
- fixed：浏览器窗口的位置
z-index 有什么作用? 如何使用?
- z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
- 元素可拥有负的 z-index 属性值
- Z-index 仅能在定位元素上奏效（例如 position:absolute;）
- 示例：
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position：relative；只对元素本身有作用，不影响其它的元素的位置
- margin会增加元素的外边距，相当于改变了元素的大小，会影响周围元素的位置
如何让一个固定宽高的元素在页面上垂直水平居中?
.div1{
position: relative;
}
.div2{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
-margin: 50px;
}
浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
- 浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
- 浮动元素会生成一个块级框，而不论它本身是何种元素
清除浮动指什么? 如何清除浮动?
- 浮动会引起几个问题：
- 父元素的高度无法被撑开，影响与父元素同级的元素
- 与浮动元素同级的非浮动元素会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
- 问题1，可以给父元素添加clearfix样式
- 问题2,3，可以使用clear:both;属性来清除元素的浮动
- clear :left : 不允许左边有浮动对象
- clear :right : 不允许右边有浮动对象
- clear :both : 不允许有浮动对象
- clear :none : 默认值。允许两边都可以有浮动对象
- 清除浮动时，添加clear属性只能对自己有效
overflow
规定当内容溢出元素框时发生的事情
- visible，默认值。内容不会被修剪，会呈现在元素框之外。
- hidden，内容会被修剪，并且其余内容是不可见的。
- scroll，内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- auto，如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
- inherit，规定应该从父元素继承 overflow 属性的值。
本教程版权归饥人谷和作者所有，转载须说明来源。
