週報四佈局

原創

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

linux安裝cuda和cudnn

模擬手機設備：使用 Playwright 實現移動端自動化測試

Mellanox網卡開啓SR-IOV

測試人員都是畫畫大神，讓我看看誰還不會用代碼圖？

Object.values()對象遍歷

我拍了拍Redis，被移出了羣聊···

網絡現代化通向雲原生應用的高速公路

面試官：說說你對序列化的理解

我宣佈，這是我找到的史上AI最全論文體系！

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

週報四佈局