div+css简单布局

最新推荐文章于 2019-11-10 21:27:07 发布

shenmill

最新推荐文章于 2019-11-10 21:27:07 发布

阅读量510

点赞数 1

分类专栏： css布局文章标签： css 布局

本文链接：https://blog.csdn.net/shenmill/article/details/51931775

版权

css布局专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简单布局

随着学习深度的加深，往往一些小的细节知识会被忽略，譬如学习完js就想要完成一些项目，这就会把一些css布局抛在脑后，但是基础往往是重要的，所以我来回顾一些简单布局。

div块的垂直居中
两列布局
三列布局（bfc 双飞翼）
圣杯布局

垂直居中

方式1

<!DOCTYPE html>
<html>
<head>
    <title>竖直水平居中1</title>
    <meta charset = "utf-8">
    <style type="text/css">
    div{
        position: absolute;
        top: 50%;
        left: 50%;
        height: 200px;
        width: 200px;
        margin-left: -100px;
        margin-top: -100px;
        background-color: #ccc;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

这个方法就是经典的用position定位的方法，用top，left设置位置，再用margin改变位置。

方式2

<!DOCTYPE html>
<html>
<head>
    <title>垂直居中2</title>
    <meta charset = "utf-8">
    <style type="text/css">
    div{
        height: 200px;
        width: 200px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: #ccc;
    }
    </style>
</head>
<body>
     <div></div>
</body>
</html>

绝对定位的布局取决于三个因素，一个是元素的位置，一个是元素的尺寸，一个是元素的margin值。而没有设置尺寸和 margin 的元素会自适应剩余空间，位置固定则分配尺寸，尺寸固定边会分配 margin，都是自适应的。

方式3

<!DOCTYPE html>
<html>
<head>
    <title>垂直居中3</title>
    <meta charset = "utf-8">
    <style type="text/css">
    div{
        position: absolute;
        top: 50%;
        left:50%;
        height: 200px;
        width: 200px;
        background-color: #ccc;
        transform:translate(-50%,-50%);
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

translate是移动属性，两个-50%代表着像原始位置向左、向上各移动50%。（该方式原理与方式1一致）

方式4

<!DOCTYPE html>
<html>
<head>
    <title>垂直居中4</title>
    <meta charset = "utf-8">
    <style type="text/css">
    .box1{
         display: flex;
         width: 100%;
         height: 600px;
         align-items:center;
         justify-content:center;
    }
    .box2{
        width: 200px;
        height: 200px;
        background: #ccc;
    }
    </style>
</head>
<body class="box1">
    <div class="box2"></div>
</body>
</html>

这个方式用到了flex弹性布局，其中 align-items， justify-content分别指出水平竖直的相对位置。

两列布局

方式1

<!DOCTYPE html>
<html>
<head>
    <title>两列布局1(两侧自适应)</title>
    <meta charset = "utf-8">
    <style type="text/css">
    body{
       width: 100%;
       height: 600px;
    }
    .box1{
       width: 50%;
       height: 100%;
       float: left;
       background-color: red;
    }
    .box2{
        width: 50%;
        height: 100%;
        float: right;
        background-color: yellow;
    }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

简单的浮动布局，将body设置为两个浮动box的container，两列宽度自适应。

方式2

<!DOCTYPE html>
<html>
<head>
    <title>两列布局2(一侧固定一侧自适应)</title>
    <meta charset = "utf-8">
    <style type="text/css">
    .div1{
        background-color: red;
        width: 120px;
        height: 600px;
        float: left;
    }
    .div2{
        background-color: yellow;
        width: 70%;
        height: 600px;
        margin-left: 120px;
    }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

一列宽度固定，一列宽度自适应。

方式3

<!DOCTYPE html>
<html>
<head>
    <title>两列布局3(两列浮动一致)</title>
    <meta charset = "utf-8">
    <style type="text/css">
       .div1{
        background-color: red;
        height: 600px;
        width: 50%;
        float: left;
       }
       .div2{
        background-color: yellow;
        height: 600px;
        width: 50%;
        float: left;
       }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

两列浮动一致。

方式4

<!DOCTYPE html>
<html>
<head>
    <title>两列布局(bfc)</title>
    <meta charset = "utf-8">
    <style type="text/css">
     .div1{
        height: 600px;
        width: 150px;
        background-color: red;
        float: left;
     }
     .div2{
        height: 600px;
        background-color: yellow;
        overflow: hidden;
        margin-left: 150px;
     }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

浮动一个块级元素，用margin固定另一块的位置。

三列布局

<!DOCTYPE html>
<html>
<head>
    <title>三列布局(bfc 双飞翼)</title>
    <meta charset = "utf-8">
    <style type="text/css">
     .div1{
        height: 600px;
        width: 20%;
        background-color: red;
        float: left;
     }
     .div3{
        height: 600px;
        width: 20%;
        background-color: yellow;
        float: right;
     }
     .div2{
        height: 600px;
        width: 60%;
        background-color: blue;
        overflow: hidden;
     }
    </style>
</head>
<body>
        <div class="div1"></div>
        <div class="div3"></div>
        <div class="div2"></div>
</body>
</html>

两侧块级元素因为浮动脱离文档流，中间块级元素自适应，注意html的写法。

圣杯布局

<!DOCTYPE html>
<html>
<head>
    <title>圣杯布局</title>
    <meta charset = "utf-8">
    <style type="text/css">
      .head{
         background-color: #666666;
         height: 100px;
         width: 100%;
      }
      .bottom{
         background-color: #666666;
         height: 100px;
         width: 100%;
         clear: both;
      }
      .container{
         height: 500px;
         width: 100%;
      }
      .left{
         width: 20%;
         background-color: red;
         height: 100%;
         float: left;
      }
      .right{
         width: 20%;
         background-color: yellow;
         height: 100%;
         float: right;
      }
      .center{
        width: 60%;
        background-color: blue;
        height: 100%;
        overflow: hidden;
      }
    </style>
</head>
<body>
    <div class="head"></div>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>