CSS 定位与浮动

文档流的概念指什么？有哪种方式可以让元素脱离文档流?

• 文档流：将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流
• 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. 父元素的高度无法被撑开，影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素会跟随其后
3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

• 问题1，可以给父元素添加clearfix样式
• 问题2,3，可以使用clear:both;属性来清除元素的浮动
• clear :left : 不允许左边有浮动对象
• clear :right : 不允许右边有浮动对象
• clear :both : 不允许有浮动对象
• clear :none : 默认值。允许两边都可以有浮动对象
• 清除浮动时，添加clear属性只能对自己有效

overflow

规定当内容溢出元素框时发生的事情

• visible，默认值。内容不会被修剪，会呈现在元素框之外。
• hidden，内容会被修剪，并且其余内容是不可见的。
• scroll，内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto，如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
• inherit，规定应该从父元素继承 overflow 属性的值。

本教程版权归饥人谷和作者所有，转载须说明来源。