CSS浮动、定位

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

• 指将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
• 两种。浮动与定位(其中position：relative不会导致元素脱离文档流)。

有几种定位方式，分别是如何实现定位的，使用场景如何？

值	描述	使用场景
absolute	生成绝对定位的元素，相对于** static 定位以外的第一个父元素**进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。	广告窗口
relative	生成相对定位的元素，相对于其正常位置进行定位。占用空间，相当于原元素的位置移动，不会脱离文档流。left:20会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。	没用

  
  
  


    

      
1
      
2
      
3
      
4
    

代码

效果

absolute, relative, fixed 偏移的参考点分别是什么

• absolute：相对于** static 定位以外的第一个父元素**进行定位。
• relative：相对于自身
• fixed：现对于浏览器

z-index 有什么作用? 如何使用?

• 显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。
• z-index值较大的元素将叠加在z-index值较小的元素之上。
• 只对定位元素有效
• z-index值相同
• 如果两个元素都没有定位或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。
• 如果两个元素都没有设置z-index（使用默认值），一个定位一个没有定位，那么定位元素覆盖未定位元素。

未加入z-index

未加入z-index.png

box1加入z-index

box1加入z-index

详细资料http://kejian.jirengu.com/web-fe3

position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

• margin设置负值，改变了周围其他元素的空间布置。
• position: relative其元素位移的同时，其原本的空间布局并没有变化；

效果

如何让一个固定宽高的元素在页面上垂直水平居中?

• 先让元素position: absolute; top: 50%; left: 50%;再使用负向marginmargin:-元素高度的一半 0px 0px -元素长度的一半;注意此处不可以使用left与top代替margin功能
  代码

效果

浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

• 特征
• 浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
• 浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样（即浮动元素不占用空间）。
• 浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间（即文字会受到浮动元素的影响）。
• 元素设为浮动元素之后，会导致其丢失高度，父元素检测不到，导致父元素高度无法撑开。

01.png

02.png

03.png

04.png

05.png

元素设为浮动元素之后，会导致其丢失高度，父元素检测不到，导致父元素高度无法撑开。使得有了后面的浮动清除。

06

清除浮动指什么? 如何清除浮动?

• 清除浮动指通过clear属性将之前浮动元素的影响消除。
• 浮动元素引起的问题：

1. 父元素的高度无法被撑开，影响与父元素同级的元素

• 与浮动元素同级的非浮动元素会跟随其后
• 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

1.png

对box2设置清除右浮动。元素3不受影响。

2.png

对box2设置清除左浮动。由于box2左边并没有浮动元素，所以无效。

3

clear属性用于清除浮动，浮动元素在左用left，在右用right，both属性皆生效；
清除浮动是针对元素本身的，只能对自己有效果，不能够影响到别的元素。

---

本文版权归本人和饥人谷所有，转载请注明来源。