周报四布局

原創

2020-03-16 23:46

布局

1.等宽的单列布局

<body>
    <div class="main">
        <div class="header">我是页头部分</div>
        <div class="content">我是中间内容部分</div>
        <div class="footer">我是页脚部分</div>
    </div>
</body>

    <!-- 1.等宽的单列布局 -->
    <style>
        /* 通配符选择器 */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .main {
            width: 800px;
            margin: 0 auto;
            /* 定宽后左右居中 */
        }
        
        .header,
        .content,
        .footer {
            width: 800px;
            text-align: center;
        }
        
        .main .header {
            width: 800px;
            height: 64px;
            background-color: lightskyblue;
            line-height: 64px;
        }
        
        .main .content {
            height: 500px;
            background-color: orange;
            line-height: 500px;
        }
        
        .main .footer {
            height: 64px;
            background-color: grey;
            line-height: 64px;
        }
    </style>

2. 两边略窄的单列布局

<body>
    <div class="header">
        <div class="nav">我是导航栏</div>
    </div>
    <div class="content">
        我是中间的内容部分
    </div>
    <div class="footer">
        <div class="footerCon">
            我是页脚的部分
        </div>
    </div>
</body>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .header {
            width: 100%;
            height: 64px;
            background: #f5f5f5;
        }
        
        .header .nav {
            /* 在header中宽度为header的80% */
            width: 80%;
            height: 100%;
            background: lightskyblue;
            /* 居中 */
            margin: 0 auto;
            text-align: center;
            line-height: 64px;
        }
        
        .content {
            width: 80%;
            height: 590px;
            background: blueviolet;
            margin: 0 auto;
            text-align: center;
            line-height: 590px;
        }
        
        .footer {
            width: 100%;
            height: 64px;
            background: #f5f5f5;
        }
        
        .footer .footerCon {
            width: 80%;
            height: 100%;
            margin: 0 auto;
            background: #ccc;
            text-align: center;
            line-height: 64px;
        }
    </style>

3. 三栏布局 flex

<body>
    <div class="main">
        <div class="left">我是左边</div>
        <div class="middle">我是中间</div>
        <div class="right">我是右边</div>
    </div>
</body>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .main {
            display: flex;
        }
        
        .left {
            width: 300px;
            height: 500px;
            background: salmon;
        }
        
        .middle {
            flex: 1;
            /* /////////////////////////////////////////////// */
            height: 500px;
            background: skyblue;
        }
        
        .right {
            width: 400px;
            height: 500px;
            background: lawngreen;
        }
    </style>

4. 三栏布局 position

<body>
    <div class="main">
        <div class="left">我是左边</div>
        <div class="middle">我是中间
            <div style="background: blueviolet; width: 200px;height: 200px;">

            </div>
        </div>
        <div class="right">我是右边</div>
    </div>
</body>

    <!-- 原理：普通文档流中的块级元素在页面排列时，会忽视脱离文档流的元素 -->

    <!-- position 缺点 会被挤没 -->


    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .main {
            position: relative;
        }
        
        .left {
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 500px;
            background-color: red;
        }
        
        .right {
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 500px;
            background: greenyellow;
        }
        
        .middle {
            height: 500px;
            background: yellow;
            margin-left: 300px;
            margin-right: 200px;
        }
    </style>

5. 三栏布局 table


<body>
    <div class="main">
        <div class="left">我是左边</div>
        <div class="middle">我是中间</div>
        <div class="right">我是右边</div>
    </div>
    </div>
</body>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .main {
            width: 100%;
            display: table;
        }
        
        .left {
            display: table-cell;
            width: 300px;
            height: 500px;
            background: salmon;
        }
        
        .middle {
            height: 500px;
            background: skyblue;
        }
        
        .right {
            display: table-cell;
            width: 400px;
            height: 500px;
            background: lawngreen;
        }
    </style>

6. 三栏布局 float+BFC


<body>
    <div class="main">
        <div class="left">我是左边</div>
        <div class="right">我是右边</div>
        <div class="middle">我是中间</div>
    </div>
</body>
<!-- 页面放大 ctrl+滚轮  bug -->

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .left {
            width: 400px;
            height: 500px;
            background: lightblue;
            float: left;
        }
        
        .right {
            width: 300px;
            height: 500px;
            background: #008c8c;
            float: right;
        }
        
        .middle {
            overflow: hidden;
            height: 500px;
            background: blueviolet;
        }
    </style>

7. 双栏布局 flex

<body>
    <div class="main">
        <div class="left">我是左边的固定宽度的部分</div>
        <div class="right">我是右边自适应的部分</div>
    </div>
</body>

  <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .main {
            display: flex;
            /* ??????????? */
            width: 80%;
            margin: 0 auto;
        }
        
        .left {
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }
        
        .right {
            flex: 1;
            /* ???????? */
            height: 200px;
            background: skyblue;
        }
    </style>

8. 双栏布局 calc

<body>
    <div class="main">
        <div class="left">我是左边的固定宽度的部分</div>
        <div class="right">我是右边自适应的部分</div>
    </div>
</body>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .main {
            width: 80%;
            margin: 0 auto;
        }
        
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background: yellowgreen;
        }
        
        .right {
            float: left;
            width: calc(100% - 200px);
            height: 300px;
            background: skyblue;
        }
    </style>

9. 双栏布局 BFC

<body>
    <div class="main">
        <div class="left">我是左边的固定宽度的部分</div>
        <div class="right">我是右边自适应的部分</div>
    </div>
</body>


    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .main {
            width: 80%;
            margin: 0 auto;
        }
        
        .left {
            float: left;
            width: 400px;
            height: 500px;
            background: greenyellow;
        }
        
        .right {
            /* 不浮动，属于常规流 */
            height: 500px;
            width: auto;
            background: skyblue;
            overflow: hidden;
            /* 开启BFC  */
        }
    </style>

10. 双栏布局 position

<body>
    <div class="main">
        <div class="left">我是左边的固定宽度的部分</div>
        <div class="right">我是右边自适应的部分</div>
    </div>
</body>

    <!-- 通过position实现 -->

    <!-- 原理：普通文档流中的块级元素在页面排列时，会忽视脱离文档流的元素 -->

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .main {
            position: relative;
            width: 80%;
            margin: 0 auto;
        }
        
        .left {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 300px;
            background: greenyellow;
        }
        
        .right {
            margin-left: 200px;
            height: 300px;
            background: skyblue;
        }
    </style>

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

周报四布局

布局

1.等宽的单列布局

2. 两边略窄的单列布局

3. 三栏布局 flex

4. 三栏布局 position

5. 三栏布局 table

6. 三栏布局 float+BFC

7. 双栏布局 flex

8. 双栏布局 calc

9. 双栏布局 BFC

10. 双栏布局 position

CSS3 filter(濾鏡) 屬性的學習

逆序數組

常用的8種排序算法（C語言）

給定一個數組輸入m, 實現從m處的數組翻轉

關於img（前端）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

周报四 布局

布局

1.等宽的单列布局

2. 两边略窄的单列布局

3. 三栏布局 flex

4. 三栏布局 position

5. 三栏布局 table

6. 三栏布局 float+BFC

7. 双栏布局 flex

8. 双栏布局 calc

9. 双栏布局 BFC

10. 双栏布局 position

周报四布局