5.浮动布局与定位布局

浮动布局与定位布局

1.布局方式

传统布局方式
1. 文档流布局：网页元素从上往下，从左到右进行布局，主要用在块元素布局，块元素独占一行 –>通过margin padding display line-height等属性来布局
2. 浮动布局：让一个元素可以在父级容器的范围内，向左/右浮动一直到边界/其他浮动元素为止。
3. 定位布局:让一个元素在一个指定的位置显示
  1. 相对定位：基于自身原来的位置进行移动
  2. 绝对定位：基于父类坐标进行移动。
  目前比较主流的布局方式是flex(弹性盒布局模型)
  
  flex ->把内容基于两条轴进行分割排版。

2.浮动偏（float）

浮动一开始是用来实现图文环绕效果的

后续衍生出布局的作用 - - >主要是水平布局

两种属性：
- float：left - ->向左浮动
- float：right- ->向右浮动
tips：
1. 元素在浮动的时候会从原来的布局范围脱离，在文档中不再站位。
2. 浮动会一直到边界/遭到其他浮动元素为止。
3. 溢出处理：overflow：hidden

浮动特性：

浮动元素会脱离标准流
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的属性

3.定位篇（position）

通过定位来指定元素在网页中出现的位置。
理论上来说可以用定位实现一个网页里的所有布局- -不推荐，性能低
绝对够定位(absolute):让元素基于父级，在一个指定的位置出现，让一个标签，出现在距离父级上下左右xx。
- 绝对定位在移动后会脱离文档流，在文档中不再站位。
- 绝对定位的参照对象是基于父类进行移动的，如果没有专门父类，默认为body。

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            background-color: green;
            position: absolute;
            right: 20px;
            bottom: 20px;
        }
        .water{
            position: absolute;
            left: 30px;
            top: 40px;
        }

    </style>
    
</head>
<body>
    <div class="box">
        <p class="water">我喜欢你</p>
    </div>
    <p class="water">没爹的</p>
</body>
</html>

相对定位：relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            background-color: green;
            margin: 20px auto;
            position: relative;
            left: 30px;
            top: 40px;
        }
        .water{
            position: relative;
            left: 30px;
        }

    </style>
    
</head>
<body>
    <div class="box">
        <p class="water">我喜欢你</p>
    </div>
</body>
</html>

z-index
- 当元素产生上下堆叠的时候，可以通过设置z-index的值来调整谁在上面。
- 谁的值大，谁在上面。

4.拓展补充

定位特殊特性

绝对定位和固定定位（fixed）也和浮动类似
1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
2. 块级元素添加绝对或固定定位，如果不给宽度和高度，默认为内容大小
3. 绝对定位和固定定位不可以用margin居中，但是相对定位(relative)可以用margin进行居中对齐。
浮动的盒子不会压住文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div{
        float:left;
        width: 200px;
        height: 400px;
        background-color: pink;
        
    }
    </style>
</head>
<body>
    <div></div>
    <p>我喜欢你</p>
</body>
</html>

绝对定位的盒子会压住下面的文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div{
        position:absolute;
        width: 200px;
        height: 400px;
        background-color: pink;
        
    }
    </style>
</head>
<body>
    <div></div>
    <p>我喜欢你</p>
</body>
</html>