前端开发之布局和定位

ゞ浴缸里的玫瑰 2022-06-16 14:29 216阅读 0赞

在实际开发过程中，我们一般使用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 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

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

![这里写图片描述][SouthEast]

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

![这里写图片描述][SouthEast 1]

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

![这里写图片描述][SouthEast 2]

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

![这里写图片描述][SouthEast 3]

此时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; }

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;}

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>

[SouthEast]: /images/20220616/77491f6136b24ce7a99b277fde1753f0.png
[SouthEast 1]: /images/20220616/00958cbc1adc4f07a4e8b5a3206bc912.png
[SouthEast 2]: /images/20220616/c791fb3ca75d401590752f2023341535.png
[SouthEast 3]: /images/20220616/d0c7bf965df8453a997a49a595ffb0d8.png