CSS中的Position概念及网页常用的布局技巧

Position：

Static：静态定位

Relative：相对定位，相对自己原来的位置偏移，原来位置还是会保留在自然流/常规流中，心系家乡。（老家有套房子，想回来的时候随时可以回来）

Absolute: 绝对定位, 脱离文档流定位，如果没有父容器，会认body为父元素，同样利用lrtb属性来控制偏移，原来位置不会保留在自然流中。（把老家房子卖了...）　　

　　　　　　变异特性：父容器设置relative（相对定位），子元素设置absolute（绝对定位）

- - 子元素没有设置宽高，将lrtb设置为0，子元素会填充满整个父元素。
  - 子元素设置宽高，不设置左右偏移，只设置上下偏移为0，并将margin上下设置为0，左右auto，子元素会水平居中父元素
  - 子元素设置宽高，不设置上下偏移，只设置左右偏移为0，并将margin左右设置为0，上下auto，子元素会垂直居中父元素
  - 子元素设置宽高，设置上下左右偏移都为0，并将margin设置为上下auto，左右auto，子元素会水平垂直居中父元素

fixed：固定定位，不会随着视口的滚动而滚动，和absolute的性质是一样的，在没有relative的情况下，都是脱离常规流，相对于body定位。

sticky：磁铁定位/粘性定位/吸附定位，是relavtive和fixed的完美结合，制造出吸附效果。

比如：导航栏需要随着用户的滑动固定在顶部，而不会离开用户的视口，方便用户操作就需要用到这个sticky定位。
用法：设置position：sticky 设置top：0 。（吸附在顶部）左右同理。

常用网页布局：行布局、列布局、圣杯布局、双飞翼布局

经典的行布局：

<!--此代码是水平居中并自适应的-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            color:#fff;
            text-align:center;
        }

        .container{
            width:90%;
            max-width:1000px;
            height:1000px;
            background:#4c77f2;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        页面布局-----行布局
    </div>
</body>
</html>

<!--此代码是水平居中并且垂直居中自适应的 

注意：因为没有考虑自身的长度和高度，所以效果并不是垂直水平居中，我们只需要设置一下外边距，上外边距为高的负一半，左外边距宽的负一半即可。
　　　设置容器元素div为absolute，top：50%；left:50%, margin-left: -width/2 , marigin-top:-height/2 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            color:#fff;
            text-align:center;
        }

        .container{
            position:absolute;
            width:800px;
            height:200px;
            background:#4c77f2;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-400px;
        }

    </style>
</head>
<body>
    <div class="container">
        页面布局-----行布局(垂直水平居中)
    </div>
</body>
</html>


<!--此代码是多行布局，顶部导航固定-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            color:#fff;
            text-align:center;
        }

        .header{
           width:100%;
           height:50px;
           background:#333;
           margin:0 auto;
           line-height:50px;
           position:fixed;
        }
        .banner{
           width:800px;
           height:300px;
           background:#30a457;
           margin:0 auto;
           padding-top:50px;
           line-height:300px;
        }
        .container{
           width:800px;
           height:1000px;
           background:#4c77f2;
           margin:0 auto;
        }
        .footer{
           width:800px;
           height:100px;
           background:#333;
           margin:0 auto;
           line-height:100px;
        }

    </style>
</head>
<body>
    <div class="header">这是页面的头部</div>
    <div class="banner">这是页面的banner</div>
    <div class="container">这是页面的内容</div>
    <div class="footer">这是页面的底部</div>
</body>
</html>

经典的列布局

<!--两列布局自适应-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            color:#fff;
            text-align:center;
        }

       .container{
        width:90%;height:1000px;margin:0 auto;
       }
       .left{
            width:60%;
            height:1000px;
            background:#1a5acd;
            float:left;
       }
       .right{
            width:40%;
            height:1000px;
            background:#5880f9;
            float:right;
       }

    </style>
</head>
<body>
    <div class="container">
        <div class="left">这是页面的左侧</div>
        <div class="right">这是页面的右侧</div>
    </div>
</body>
</html>

圣杯布局：

1.给父容器设定padding值上下0 左右自己随意。

2.定义父容器里面子元素的宽度，左右元素固定宽度，中间内容区域自适应设置为百分比

3.最重要的就是给内容区域的元素，例如：左、右、内容等子元素同时设定相对定位，浮动

4.调整左边元素margin-left为-100%；左边会自动上移父元素的最左边，相距浏览器有留白，因为父元素padding值，只要设置一下子元素的左边距为负的padding值即可

5.调整右边元素margin-left为负父元素的padding值。会上移到父元素的右侧。相距浏览器有留白，设置一下子元素的右边距为负的padding值即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{margin:0px;padding:0px;}

        body{min-width:700px}

        .header,.footer{
            float:left;
            width:100%;
            background:#ddd;
            line-height:40px;
            height:40px;
            text-align:center;
        }

        .container{
            padding: 0 220px 0 200px;
        }

        .middle,.left,.right{
            position:relative;
            float:left;
            min-height:300px;
        }

        .middle{
            width:100%;
            background:#1a5acd;
        }
        .left{
            width:200px;
            background:#f00;
            margin-left:-100%;
            left:-200px;
        }
        .right{
            width:220px;
            background:#30a457;
            margin-left:-220px;
            right:-220px;
        }
    </style>
</head>
<body>

    <div class="header">这是头部</div>
    <div class="container">
        <div class="middle">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</div>
        <div class="left">这是左侧</div>
        <div class="right">这是右侧</div>
    </div>
    <div class="footer">这是底部</div>

</body>
</html>

双飞翼布局：

相比圣杯布局就是在main的内层多增加了一个div，sub替换，extra附属，分别为左侧右侧，不设置父容器相对定位，而是来设置浮动，

头部、底部、main、左侧、右侧、全部左浮动，内容子元素设置左右外边距，左侧右侧元素设置负外边距从而实现float到最左边个最右边。

-100%和-当前元素的width。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        min-width: 700px;
    }

    .header,
    .footer {
        width: 100%;
        float: left;
        height: 40px;
        background: #ddd;
        text-align: center;
        line-height: 40px;
    }

    .sub,
    .main,
    .extra {
        float: left;
        min-height: 300px;
    }

    .main {
        width: 100%;
        min-height: 300px;
    }

    .main-inner {
        margin-left: 200px;
        margin-right: 220px;
        background: #30a457;
        min-height: 300px;
    }

    .sub {
        width: 200px;
        background: #f00;
        margin-left: -100%;
    }

    .extra {
        width: 220px;
        background: #1a5acd;
        margin-left: -220px;
    }
    </style>
</head>

<body>
    <div class="header">
        <h4>header</h4>
    </div>
    <div class="main">
        <div class="main-inner">
            <h4>main</h4>
            <p>这是页面中间内容</p>
        </div>
    </div>
    <div class="sub">
        <h4>sub</h4>
        <p>这是左侧内容</p>
    </div>
    <div class="extra">
        <h4>extra</h4>
        <p>这是页面的右侧内容</p>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div>
</body>

</html>

posted @ 2019-11-21 17:06 Courage.Kiven 阅读(645) 评论(0) 编辑收藏举报

刷新页面返回顶部

Courage.Kiven

此博客仅为记录总结所学知识。