CSS浮动、定位

2016-07-24 本文已影响67人 Nicklzy

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

指将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
两种。浮动与定位(其中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 声明）。	没用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
      .container{
        width:400px;
        height:400px;
        border:1px solid ;
        position:fixed;
        margin:0px;
        left:8px;/*浏览器默认值，不设置也为8px*/
        top:8px;/*浏览器默认值，不设置也为8px*/
      }
      .box{
        width:100px;
        height:100px;
        border:1px solid black;
      }
      .box:nth-child(1){
        background:red;
        position:fixed;
        left:0px;
        top:0px;
      }
      .box:nth-child(2){
        background:blue;
        position:absolute;
        left:20px;
        top:20px;
      }
      .box:nth-child(3){
        background:green;
        position:relative;
        left:50px;
        top:50px
      }
      .box:nth-child(4){
        background:yellow;
        position:relative;
        left:50px;
        top:50px
      }
  </style>
</head>
<body>
    <div class="container">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
    </div>
</body>
</html>

代码

效果

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

详细资料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属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样（即浮动元素不占用空间）。
浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间（即文字会受到浮动元素的影响）。
元素设为浮动元素之后，会导致其丢失高度，父元素检测不到，导致父元素高度无法撑开。