css布局

flexBox布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexBox布局</title>
    <style type="text/css">
        .father {
            width: 800px;
            height: 400px;
            border: 1px solid #888888;
            display: flex;
        }

        .child1, .child2, .child3, .child4, .child5, .child6 {
            margin: 2px;
            background-color: #FF808E;
        }

        .child1 {
            flex: 4;
        }

        .child2, .child3, .child4, .child6 {
            flex: 1;
        }

        .child5 {
            width: 100px;
            flex: none;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="child1">flex1</div>
    <div class="child2">flex2</div>
    <div class="child3">flex3</div>
    <div class="child4">flex4</div>
    <div class="child5">flex5</div>
    <div class="child6">flex6</div>
</div>
</body>
</html>

float布局

1.使用float布局实现两栏布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float布局</title>
    <style type="text/css">
        .father_box{
            overflow: auto;
        }
        .left,.right,.left2,.right2{
            height: 200px;
            width: 200px;
        }
        .left,.left2{
            float: left;
            background-color: #888888;
        }
        .right{
            margin-left: 200px;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
<div class="father_box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
</body>
</html>

2.使用float布局实现三栏布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float布局</title>
    <style type="text/css">
        .father_box2::after{
            content: '';
            clear: both;
            display: block;
            visibility: hidden;
            height: 0;
        }
        .left,.right,.left2,.right2{
            height: 200px;
            width: 200px;
        }
        .left,.left2{
            float: left;
            background-color: #888888;
        }
        .right2{
            float: right;
            background-color: crimson;
        }
        .center{
            margin-left: 200px;
            margin-right: 200px;
        }
    </style>
</head>
<body>
<div class="father_box2">
    <div class="left2">左边</div>
    <div class="right2">右边</div>
    <div class="center">中间</div>
</div>
</body>
</html>

 inline-block布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block</title>
    <style>
        .container{
            width: 800px;
            height: 200px;
        }

        .left{
            background-color: pink;
            width: 200px;
            height: 200px;
            display: inline-block;
        }
        .right{
            background-color: #bbbbbb;
            width: 500px;
            height: 200px;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
</body>
</html>

页面效果：

虽然并排在一起了，可是中间有间隙

解决方式：

第一种：

将其父元素字体大小设为零，并将他俩字体大小设置为相同大小。

    <style>
        .container{
            width: 800px;
            height: 200px;
            font-size: 0;
        }

        .left{
            background-color: pink;
            width: 200px;
            height: 200px;
            display: inline-block;
            font-size: 14px;
        }
        .right{
            background-color: #bbbbbb;
            width: 500px;
            height: 200px;
            display: inline-block;
            font-size: 14px;
        }
    </style>

第二种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block</title>
    <style>
        .container{
            width: 800px;
            height: 200px;
            /*font-size: 0;*/
        }

        .left{
            background-color: pink;
            width: 200px;
            height: 200px;
            display: inline-block;
            /*font-size: 14px;*/
        }
        .right{
            background-color: #bbbbbb;
            width: 500px;
            height: 200px;
            display: inline-block;
            /*font-size: 14px;*/
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">左边</div><div class="right">右边</div>
</div>
</body>
</html>

第三种和第二种类似：

<body>
<div class="container">
    <div class="left">左边</div><!--
    --><div class="right">右边</div>
</div>
</body>

缺点：

如果要做一些自适应的设置有一些困难，对于定宽的东西比较适合用inline-block进行布局。

需要处理间隙

posted @ 2018-08-06 15:37  爱喝酸奶的吃货  阅读(207)  评论(0)  编辑  收藏  举报