前端开发之布局和定位-蒲公英云

在实际开发过程中，我们一般使用display，float，position来构建页面布局。

定位

static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

静态定位(static)

static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的。

相对定位(relative)

相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道relative定位也是遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的，最重要的是它还占有文档空间，而且占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动，也就是说它后面的元素是依据位置( top / left / right / bottom 等属性生效之前)进行的定位，这点一定要理解。

绝对定位(absoulte)

absoulte定位，也称为绝对定位，虽然它的名字号曰“绝对”，但是它的功能却更接近于”相对”一词，为什么这么讲呢？原来，使用absoult定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的，举个例子，a元素使用absoulte定位，它会从父类开始找起，寻找以position非static方式定位的祖先类元素(注意，一定要是直系祖先才算哦~），直到标签为止，这里还需要注意的是，relative和static方式在最外层时是以标签为定位原点的，而absoulte方式在无父级是position非static定位时是以作为原点定位。和元素相差9px左右。我们来看下效果：

<html>  
<style type="text/css"> html{ border:1px dashed green;} body{ border:1px dashed purple;} #first{ width: 200px;height: 100px;border: 1px solid red;position: relative;} #second{ width: 200px;height: 100px;border: 1px solid blue;position: absolute;top :0;left : 0;} </style>  
<body>  
  <div id="first">relative</div>  
  <div id="second">absoult</div>  
</body>  
</html>

固定定位(fixed)

fixed定位，又称为固定定位，它和absoult定位一样，都脱离了文档流，并且能够根据top、right、left、bottom属性进行定位，但不同的是fixed是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。

浮动

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注意：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

这里写图片描述

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

这里写图片描述

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

这里写图片描述

在实际开发中我们还可能遇到这样子的情况，假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下：

这里写图片描述

此时div1、div2都浮动，根据规则，div2会跟随在div1后边，但我们仍然希望div2能排列在div1下边，就像div1没有浮动，div2左浮动那样。

这时候就要用到清除浮动（clear），如果单纯根据官方定义，读者可能会尝试这样写：在div1的CSS样式中添加clear:right;，理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则。

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

布局是css中的重要部分，我们常会用到水平居中，垂直居中。

水平居中

1.定宽块状元素：margin和width实现水平居中最常见的是给一个元素一个宽度，然后加上margin左右值为auto。但是必须给元素指定的一宽度。

.center { width: 960px; margin-left: auto; margin-right: auto; }
<div class="center">水平居中</div>

2.不定宽块状元素：设置子元素为display:inline,然后在父元素上设置text-align:center;

.parent { text-align: center; }
.child { display: inline; }
<div class="parent">
  <div class="child">我要水平居中</div>
</div>

3.浮动居中：position:relative 和 left:50%;

.container{ float:left; position:relative; left:50% }
.container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; }
.container li{ float:left;display:inline;margin-right:8px;}
<body>
  <div class="container">
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </div>
</body>

4.flex居中：对父元素设置display:flex;justify-content:center;
5.绝对定位。
6.fit-content居中：

垂直居中

1.父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height。

.vertical { height: 100px; line-height: 100px; }
<div class="vertical">我垂直居中</div>

2.父元素高度确定的单行文本（内联元素）设置 height = line-height； 3.父元素高度确定的多行文本（内联元素） a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle； b:先设置 display:table-cell 再设置 vertical-align:middle； 4.块状元素:设置子元素position:fixed（absolute），然后设置margin:auto;

.box {
    position: absolute;或fixed
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
}

3.使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;

.box { position:absolute;/*或fixed*/ top:50%; left:50%; margin-top:-100px; margin-left:-200px; }

4.利用display:table-cell属性使内容垂直居中,这个方法在多行文字居中的时候用的比较多;

.box { display:table-cell; vertical-align:middle; text-align:center; width:100px; height:120px; background:purple; }
.box span { display: inline-block; vertical-align: middle; }
<div class="box">
    <span>多行文字，此处居中设置</span>
</div>