通过 position 可以对正常的文档流产生影响。

child 用 absolute，parent 就需要 relative

使用 absolute 时，是相对于父级元素而言；对于 fixed ，则相对于视窗（viewport）

position 属性不是默认继承的，color 是；inherit 可以让 position 变得可继承

static 是默认情况，left/right/top/bottom/z-index 不起作用

relative 可以使得 z-index 起作用，根据 left/right/top/bottom 属性，将元素从默认位置推走

absolute 从正常文档流移除，left/right/top/bottom/z-index 起作用

fixed 像 absolute 同样从文档流中移除，但滚动页面并不移动元素，仅相对于整个页面变化位置

sticky ，先是 relative，直到滚动到 viewport 的指定位置，此时的行为更像 fixed

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

1@media media-type and (media-feature-rule) {
2  /* CSS rules go here */
3}
4
5/* media-type 是可以省略的，如果省略，该样式默认适用于 screen, print */

而 meida-feature-rule 最常用于创建响应式的是宽度，高度更少见。有 max-width, min-width, width, max-height, min-height, height。width、height 几乎不用。

还有 orientation(portrait or landscape 纵向/横向)；hover

一、逻辑

and、or、not 逻辑： and , , , not

二、选择断点

两种方式进行响应式设计：一种是从宽屏到窄屏，一种是从窄屏到宽屏。后者被称为 mobile first。

https://css-tricks.com/centering-css-complete-guide/ https://www.w3schools.com/csS/css_align.asp

1. 水平居中

    1elem {
    2  margin-left: auto;
    3  margin-right: auto;
    4  width: 50%;
    5}
    6
    7elem {
    8  margin: 0 auto;
    9  width: 50%;
   10}
   11
   12/* inline, inline-* 元素 */
   13.text {
   14  text-align: center;
   15}
   16
   17/* 块级元素 需要指定宽度，前2个也是块级元素居中样式 */
   18img {
   19  display: block;
   20  margin: 0 auto;
   21}
   22/* 多个块级元素排成一列横排 需要水平居中
   23main > div
   24.inline-block-center(main), .flex-center(main)
   251. 设置好标准的 div 元素样式
   26,*/
   27.inline-block-center {
   28  text-align: center;
   29  div {
   30    display: inline-block;
   31    text-align: left;
   32  }
   33}
   34.flex-center {
   35  display: flex;
   36  justify-content: center;
   37}
   38/* 多个块级元素排成一列竖排
   39main > div
   40,*/
   41main div {
   42  margin: 5px auto;
   43}
   44/* 之后一定要指定每个 div 元素的宽度 */

2. 垂直居中

    1/* inline, inline-*, 文本、链接等 */
    2  /* single line */
    3  .center-single-line-vertically {
    4    padding: 50px 0;
    5  }
    6  .center-single-line-vertically {
    7    height: 100px;
    8    line-height: 100px;
    9    white-space: nowrap;
   10  }
   11  /* multiple lines */
   12  .center-multiple-lines-vertically {
   13    padding: 50px 0;
   14  }
   15    /* 如果对多行设置 padding 无效，使用以下办法 */
   16  .center-multiple-lines-vertically {
   17    display: table;
   18    height: 350px; /* 大于文字高度*/
   19    p {
   20      display: table-cell;
   21      margin: 0;
   22      vertical-align: middle;
   23    }
   24  }
   25  .center-multiple-lines-vertically {
   26    display: flex;
   27    justify-center: center;
   28    flex-direction: column;
   29    height: 300px; /* 大于文字高度 */
   30  }
   31  .center-multiple-lines-vertically {
   32    position: relative;
   33    &::before {
   34      content: " ";
   35      display: inline-block;
   36      height: 100%;
   37      width: 1%;
   38      vertical-align: middle;
   39    }
   40    p {
   41      display: inline-block;
   42      vertical-align: middle;
   43    }
   44  }
   45/* 块级元素的垂直居中 */
   46  /* height 已知 */
   47  /* https://codepen.io/chriscoyier/pen/GRBVOj */
   48  .center-vertically {
   49    position: relative;
   50    .child {
   51      position: absolute;
   52      top: 50%;
   53      height: 100px;
   54      margin-top: -70px; /* box-sizing 非 border-box 的解决办法 */
   55    }
   56  }
   57  /* height 未知 */
   58  .center-vertically {
   59    position: relative;
   60    .child {
   61      position: absolute;
   62      top: 50%;
   63      transform: translateY(-50%);
   64    }
   65  }
   66  /* 元素高度拉伸到父元素 */
   67  .center-vertically {
   68    display: table;
   69    height: 300px;
   70    div {
   71      display: table-cell;
   72      vertical-align: middle;
   73    }
   74  }
   75  /* 与前文多行居中相同，使用 Flexbox */
   76  .center-vertically {
   77    display: flex;
   78    flex-direction: column;
   79    justify-content: center;
   80  }
   81    /* 或者这样写 */
   82    .center-vertically {
   83      display: flex;
   84      .child {
   85        margin: auto 0;
   86      }
   87    }

https://www.w3schools.com/csS/css_align.asp https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats#clearing_boxes_wrapped_around_a_float 当使用 float 时，有时内部图片会溢出到父元素之外，这时就需要一些 hack