一、本章概要

1.1、属性长宽的定义方式
1.2、垂直居中
1.3、紧贴底部的页脚

二、属性长宽的定义方式

    定义元素的长宽主要有2种方式，一种是外部定义（下文中我可能用"显式"来代替），一种是由内部定义。
    外部定义主要体现在显式的给定单位，或者继承。也可以说是"静态"。
    内部定义主要是体现在一些关键字上，eg: auto等等; 即没有明确固定元素的宽度和高度，可以说是"动态"。

eg一个例子:

    <! DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style>
                * {
                    margin: 0;
                    padding: 0;
                }
                html, body {
                    width: 100%;
                    height: 100%;
                }
                figure {
                    margin: 0 auto;
                    margin-top: 30px;
                    border: 1px solid steelblue;
                }
            </style>
        </head>
        <body>
            <figure>
                <img src="xxx.jpg" >
                <p>我顶着大太阳只想为你撑伞，气球在我手上，影片在播放，整个世界约好一起逛。到底谁是Q，
                组织 vs 个人？ 正义 vs 邪恶？</p>
            </figure>
        </body>
    </html>

效果图如下:

从上图我们发现因为我们没有显式的定义元素宽度，不仅figure的宽度默认了100%，而且样式还非常的丑陋，那么我们有没有方法去将border缩小一点？答案是有的，该是内部定义上场了，修改如下:

    figure {
        width: min-content;
        margin: 0 auto;
        margin-top: 30px;
        padding: 10px;
        border: 1px solid steelblue;
    }

修改后的效果如下:

二、垂直居中

    这个是老生常谈的话题了，我能想到的大致分为3个方向；
    1、伪元素法。
    2、flex。
    3、（定位 / 视口） + 变形。

2.1、伪元素法

      <! DOCTYPE html>
      <html>
          <head>
              <meta charset="utf-8">
              <title></title>
              <style>
                  * {
                      margin: 0;
                      padding: 0;
                  }
                  html, body {
                      width: 100%;
                      height: 100%;
                  }
                  div {
                      width: 300px;
                      height: 500px;
                      background: pink;
                      color: steelblue;
                      box-sizing: border-box;
                  }
                  div::before {
                      content: "";
                      display: inline-block;
                      height: 100%;
                      vertical-align: middle;
                  }
              </style>
          </head>
          <body>
              <div>text</div>
          </body>
      </html>

2.2、flex布局

    <! DOCTYPE html>
    <html>
        <head>
            * {
                margin: 0;
                padding: 0;
            }
            html, body {
                width: 100%;
                height: 100%;
            }
            div {
                width: 300px;
                height: 200px;
                display: flex;
                align-items: center;
                background: pink;
                color: orange;
            }
        </head>
        <body>
            <div></div>
        </body>
    </html>

2.3、（定位 / 视口）+ 变形

    <! DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                * {
                    margin: 0;
                    padding: 0;
                }
                html, body {
                    width: 100%;
                    height: 100%;
                    position: relative;
                }
                div {
                    width: 300px;
                    height: 200px;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    background: orange;
                }
            </style>
        </head>
        <body>
            <div></div>
        </body>
    </html>

三、紧贴底部的页脚

强大的flex布局在这方面也能派上用场。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        figure {
            padding: 10px;
            box-sizing: border-box;
            width: min-content;
            margin: 0 auto;
            margin-top: 350px;  /* 50px 对应图2 */
            border: 1px solid steelblue;
        }
        div:nth-child(2) {
            width: 100%;
            height: 50px;
            background-color: tan;
        }
    </style>
</head>
<body>
    <figure>
        <img src="D:\studentProject\elementUI-src\图片库\图片6.jpg" alt="图片加载失败">
        <p>我顶着大太阳只想为你撑伞，气球在我手上，影片在播放，整个世界约好一起逛。到底谁是Q，组织 vs 个人？ 正义 vs 邪恶？</p>
    </figure>
    <div></div>
</body>
</html>

图1效果如下：

图2效果如下:

四、其他

这本书上的第七章还有3个案例我没有说是因为我各人觉得没有必要说了，一个table、一个兄弟选择器、最后一个相当于简洁写法，行了就这样吧

《CSS揭秘》第七章 -- 结构与布局

一、本章概要

二、属性长宽的定义方式

二、垂直居中

三、紧贴底部的页脚

四、其他