前端开发必会的HTML/CSS硬知识 （三）

小白特菜
384 阅读2分钟

                                                                                                                                              文/小魔女

本文简介

  • 前端开发HTML/CSS系列最后一篇文章
  • 本文将会讲述各种经典布局题目，涉及圣杯布局、双飞翼布局等……
  • 布局学得好，面试没烦恼

三栏布局

要求：背景色分别为red、green、blue；左右各定宽200px；中间随屏幕大小变化；内容互不遮挡；

简易版

<!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:

<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:

<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

  1. calc

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

  2. 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%;

魔女有话说

月是故乡明，你偶尔想念故乡，故乡一直在想你。在评论区为故乡送上最真挚的祝福吧~

![](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 排版

avatar
文章
阅读
粉丝