CSS布局总结（二）

前言：今天实训课依旧很水，继续总结，今天主要补了一下布局的知识。响应式的作业还没做完...

一、两列布局

html部分

    <div class="parent">
        <div class="left">left</div>
        <div class="right">
            <p>right</p>
            <p>right</p>
            <p>right</p>
            <p>right</p>
            <p>right</p>
        </div>
    </div>

总体样式（为啥粘上去这么乱的...）

div{
      border:1px solid #444;
   }
 .parent{
      background-color: #eee;
   }
 .left{
        background-color: yellow;
   }
 .right{
        background-color: pink;
   }

 

• 一列定宽，另一列自适应,两列的高度不会同时增加 

.left{
            float: left;
            width:100px;
        }

        .right{
            margin-left:120px;
        }

.parent{
            position: relative;
        }
        .left{
            position: absolute;
            width:100px;
        }
        .right{
            margin-left: 100px;
        }

 

• 其中一列定宽或者不定宽都可以,另一列自适应，两列的高度不会同时增加

.left{
            float: left;
            margin-right:20px;
        }

        .right{
            overflow: hidden;
        }

• 表格布局，父元素为table,子元素为table-cell,可以同时增加高度，如果不设置宽度，两者宽度相等

.parent{
            display: table;
            width:100%;
        }
        .left,.right{
            display: table-cell;
        }

        .left{
            width:100px;
        }

• flex 两边高度会同时增加

.parent{
            display: flex;
        }
        .left{
            width: 100px;
        }
        .right{
            flex: 1;
        }

• 表格布局,高度会同时增加

.parent{
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

 

二、三列布局

这里主要记录两个经典布局

主要样式

div{
            border:1px solid #ccc;
            box-sizing: border-box;
        }

        .middle{
            background-color:#eee;
        }

        .content{
            background-color: purple;
        }

        .left{
            background-color: yellow;
        }

        .right{
            background-color: pink;
        }

• 双飞翼布局

<div class="container">
        <div class="middle">
            <div class="content">
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
            </div>
        </div>
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>right</p>
            <p>right</p>
        </div>
    </div>
<!--1. 注意div的顺序 -->
<!--2. .middle设置width:100%; .middle,.left,.right都为float:left，此时它们将分别占据1、2、2 行 -->
<!--3. 为了让.left回到第一行的最左边，则需要设置margin-left:-100%; 为了让.right回到第一行的末尾，则需要设置margin-right:-自身的宽度 -->
<!--4. 此时三者在同一行，但是middle的内容会被遮挡住，故此时应该设置middle里面的content内容，则content设置:margin:0 right的宽度 0 left的宽度 -->

<!--p.s. 三列布局不等高 -->

.container{
            width:100%;
        }
        .middle{
            float: left;
            width:100%;
        }
        .left{
            width:200px;
            float: left;
            margin-left: -100%;
        }

        .right{
            width:300px;
            float: left;
            margin-left: -300px;
        }
        
        .content{
            margin: 0 300px 0 200px;
        }

• 圣杯布局

<div class="container">
        <div class="middle">
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
        </div>
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>right</p>
            <p>right</p>
        </div>
    </div>

<!--p.s. 一开始跟双飞翼布局有点像 -->
<!--1. 注意div的顺序 -->
<!--2. .middle设置width:100%; .middle,.left,.right都为float:left，此时它们将分别占据1、2、2 行 -->
<!--3. 为了让.left回到第一行的最左边，则需要设置margin-left:-100%; 为了让.right回到第一行的末尾，则需要设置margin-right:-自身的宽度 -->


<!--4. 由于middle的内容被遮挡，此时是 设置container的padding:0 right的宽度 0 left的宽度-->
<!--5 此时内部直接往中间缩，则需要这是.left{position:relative;left:-自身的宽度；}    .right{position:relative;right:-自身的宽度；-->

.container{
            width:100%;
            padding:0 300px 0 200px;
            background-color: #7e7e7e;
        }
        .middle{
            float: left;
            width:100%;

        }
        .left{
            width:200px;
            float: left;
            margin-left: -100%;
            position: relative;
            left:-200px;
        }

        .right{
            width:300px;
            float: left;
            margin-left: -300px;
            position: relative;
            right:-300px;
        }