前端開發必會的HTML/CSS硬知識（三）

文/小魔女css

本文簡介

前端開發HTML/CSS系列最後一篇文章
本文將會講述各類經典佈局題目，涉及聖盃佈局、雙飛翼佈局等……
佈局學得好，面試沒煩惱

三欄佈局

要求：背景色分別爲red、green、blue；左右各定寬200px；中間隨屏幕大小變化；內容互不遮擋；html

簡易版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            font-size: 0px;
        }
        .left{
            display: inline-block;
            width: 200px;
            height: 100%;
            background-color: red;
        }
        .main{
            display: inline-block;
            width: calc(100% - 400px);
            height: 100%;
            background-color: green;
        }
        .right{
            display: inline-block;
            width: 200px;
            height: 100%;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
</html>
複製代碼

Flex佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
    }
    .left{
        width: 200px;
        background-color: red;
    }
    .main{
        flex: 1;
        background-color: green;
    }
    .right{
        width: 200px;
        background-color: blue;
    }
  </style>
</head>
<body>
    <!-- 
flex:1的含義
flex-grow : 1; // 這意味着div將以與窗口大小相同的比例增加
flex-shrink : 1; // 這意味着div將以與窗口大小相同的比例縮小
flex-basis : 0; // 這意味着div沒有這樣的起始值，而且將根據可用的屏幕大小佔用屏幕。例如： - 若是包裝器中有3個div，則每一個div將佔用33％。 -->
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
</html>
複製代碼

利用BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
      .container{
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
      }
      .left{
          float: left;
          width: 200px;
          height: 100%;
          background-color: red;
      }
      .right{
          float: right;
          width: 200px;
          height: 100%;
          background-color: blue;
      }
      .main{
          width: auto;
          height: 100%;
          overflow: hidden;
          background-color: green;
      }
  </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
</html>
複製代碼

table\table-cell

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container{
            width: 100%;
            height: 400px;
            display: table;
        }
        .left{
            width: 200px;
            height: 100%;
            background-color: red;
            display: table-cell;
        }
        .right{
            width: 200px;
            height: 100%;
            background-color: blue;
            display: table-cell;
        }
        .main{
            width: auto;
            height: 100%;
            background-color: green;
            display: table-cell;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
</html>
複製代碼

三欄佈局，且實現中間部分最早加載？

基礎前端

「面試

margin和padding的百分比都是相對父元素的寬度來設置的。

absolute和float兩個元素，默認絕對定位覆蓋在浮動元素上面。設置z-index:-1後，浮動元素在絕對定位元素的上面。

設置position:relative後，元素相對於自身進行定位。（相對於元素在文檔中的初始位置）

↑注意：使用相對定位，不管是否移動，元素仍然佔據原來的空間。所以，移動元素會致使它覆蓋其餘框。

position:absolute，若是沒有已定位的元素，就會找到body。

↑注意：absolute和float不能寫在同一個元素（relative和float能夠），absolute或者float會隱式改變display的類型（display:none除外）。設置position:absolute,float:left,float:right任意一個值，都會使元素變成display:inline-block。即便設置display:inline,display:block也無效。

float在IE6下的雙邊距bug就是用display:inline來解決的。position：relative不會隱式改變display。**

聖盃佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            width: 100%;
            height: 500px;
            padding: 0 300px 0 200px;
            box-sizing: border-box;
            /* box-sizing差點忘了 border-box的寬度是內容+border+padding 而content-box的寬度只是內容 */
        }

        .container>div {
            float: left;
            height: 100%;
        }

        .main {
            width: 100%;
            background-color: green;
        }

        .left {
            width: 200px;
            margin-left: -100%;
            position: relative;
            left: -200px;
            background-color: red;
        }

        .right {
            width: 300px;
            margin-left: -300px;
            position: relative;
            left: 300px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
複製代碼

雙飛翼佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    .container {
        width: 100%;
        height: 500px;
    }

    .container>div {
        float: left;
        height: 100%;
    }

    .main {
        width: 100%;
    }

    .submain {
        height: 100%;
        /* 浮動元素的子元素不給高度，至關於高度爲0 */
        background-color: green;
        margin: 0 300px 0 200px;
    }

    .left {
        width: 200px;
        margin-left: -100%;
        background-color: red;
    }

    .right {
        width: 300px;
        margin-left: -300px;
        background-color: blue;
    }
</style>
</head>

<body>
  <div class="container">
      <div class="main">
          <div class="submain"></div>
      </div>
      <div class="left"></div>
      <div class="right"></div>
  </div>
</body>
</html>
複製代碼

最簡易的佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
      .container {
          width: 100%;
          height: 500px;
      }

      .container>div {
          height: 100%;
      }

      .main {
          margin: 0 300px 0 200px;
          background-color: green;
      }

      .left {
          width: 200px;
          float: left;
          background-color: red;
      }

      .right {
          width: 300px;
          float: right;
          position: relative;
          top: -500px;
          /* 添加上面兩行的緣由是，main是塊級元素，獨佔一行，right元素會在第二行顯示。 */
          background-color: blue;
      }
  </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
</html>
複製代碼

三列等高，並隨着最高的一列變化

html:markdown

<div class="container">
    <div class="left">
        <p>aaa</p>
    </div>
    <div class="main">
        <p>bbb</p>
        <p>bbb</p>
        <p>bbb</p>
    </div>
    <div class="right">
        <p>ccc</p>
        <p>ccc</p>
    </div>
</div>
複製代碼

table、table-cell（父元素的display爲table,子元素爲table-cell）

<style type="text/css">
    .container {
        display: table;
        margin: 0 auto;
        border: 1px solid black;
    }

    .container>div {
        width: 200px;
        display: table-cell;
    }

    .left {
        background-color: red;
    }

    .main {
        background-color: orange;
    }

    .right {
        background-color: yellow;
    }
</style>
複製代碼

Flex佈局（父元素設置display:flex; 子元素設置flex:1;）

<style type="text/css">
    .container {
        display: flex;
        width: 600px;
        margin: 0 auto;
        border: 1px solid black;
    }

    .container>div {
        flex: 1;
        /* flex-grow:1; flex-shrink 1;flex-basis:0; 
            div與窗口大小相同的比例增加、縮小，div沒有起始值，而且將根據可用屏幕大小佔用屏幕
        */
    }
</style>
複製代碼

margin/padding互補（子元素的margin設爲-999em,padding設爲999em）

<style type="text/css">
    .container {
        width: 600px;
        margin: 0 auto;
        border: 1px solid black;
        overflow: hidden;
    }

    .container>div {
        float: left;
        width: 200px;
        margin-bottom: -999em;
        padding-bottom: 999em;
    }
</style>
複製代碼

垂直居中（經典考題）

一個220x220的元素A，一個20x20的元素B，B中有一個文字「C」，字體大小15px。要求，A在屏幕中央，B在A中央，文字「C」在B中央，中央即爲水平垂直都居中。 html:oop

<div class="container">
    <div class="a">
        <div class="b">C</div>
    </div>
</div>
複製代碼

flex

<style type="text/css">
        .container {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .a {
            width: 200px;
            height: 200px;
            background-color: red;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .b {
            width: 20px;
            height: 20px;
            font-size: 15px;
            background-color: yellow;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
複製代碼

定位（left:50%; top:50%； transform: translateX(-50%) translateY(-50%)）

<style>
.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.a,
.b {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.a {
    width: 200px;
    height: 200px;
    background-color: red;
}

.b {
    width: 20px;
    height: 20px;
    font-size: 15px;
    background-color: yellow;

}
</style>
複製代碼

小題目

A的寬度隨屏幕寬度變化，並知足左右邊距各20px

calc

.a{ width: calc(100% - 40px); }佈局
margin

.container { margin: 0 20px; } .a { width: 100%; }字體

若A的高度等於A寬度的50%，如何實現？

.a {
    width: calc(100vw - 40px);
    height: calc((100vw - 40px)/2);
}
複製代碼

寬度不必定，可是想讓box爲正方形

好比width:50%; 以後設置該box爲正方形設置height:0; padding-bottom:50%;flex

魔女有話說

月是故鄉明，你偶爾想念故鄉，故鄉一直在想你。在評論區爲故鄉送上最真摯的祝福吧~spa

![](https://imgkr2.cn-bj.ufileos.com/0016c7e6-e345-4acf-aad8-3233455a0206.jpg?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=1BpNZdeSs%252Fa%252FWXIL8y95PjWVJ%252Fk%253D&Expires=1601566737)

![](https://imgkr2.cn-bj.ufileos.com/c4ecfcd1-4f6d-4765-8dd3-efe79713bba4.jpg?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=vEbt5Ty20w3l7SzcrqRXUG8cFG8%253D&Expires=1601566743)

本文使用 mdnice 排版

前端開發必會的HTML/CSS硬知識 （三）