一、5个常用的 CSS 单位

  • px，和当前操作系统视窗分辨率有关
  • em，和父级元素的字体大小有关，即父级元素的字体大小的x倍的意思，如果父级元素没有设置，一直找到html顶级元素为止
  • rem，是 html 字体大小的倍数，与父级元素无关
  • vh/vw，和浏览器当前尺寸有关，即浏览器当前长宽的百分比
  • vmin/vmax，和设备当前分辨率有关，v 的意思同 vh/vw，即百分比
    百分比，和父级元素的 size 有关，而 vh/vw 是同浏览器的 size 有关，二者均为百分比只不过参考不同

二、Block, Inline 与 Inline-Block

  • Block 父级大小
  • **Inline **内容所定
  • Inline-Block 内容块与其他之间的上下距离

三、position（绝对定位）

  • static（默认）

    正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

  • relative

    在原本的位置上移动

    （比 static 多具备 top, right, bottom, left 的设定，可以让 absolute 子元素根据他的位置去定位）

  • absolute

    元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。（当前页面的定位）

  • sticky(小弹窗)

    元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和包含块（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。 该值总是创建一个新的层叠上下文（stacking context）。注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。

四、盒子模型

  • Border 边框

  • padding 内边距区域。

    /* 应用于所有边 */
    padding: 1em;

    /* 上边下边 | 左边右边 */
    padding: 5% 10%;

    /* 上边 | 左边右边 | 下边 */
    padding: 1em 2em 2em;

    /* 上边 | 右边 | 下边 | 左边 */
    padding: 5px 1em 0 2em;

  • margin 外边距属性

  • /* 应用于所有边 */
margin: 1em;
margin: -3px;

/* 上边下边 | 左边右边 */
margin: 5% auto;

/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;

/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;

  • padding 、margin

    • padding：框线与内容之间的距离，margin：框线与其他元素之间的距离
    • padding 的部分会有背景颜色，margin 不会
    • padding 会纳入点击范围，margin 不会
    • 对与 Inline 上下无用
    • 对于 block： margin auto 自动对齐
    • margin top 与 margin bottom 会选取最大边（解决方法：中间加有高度的元素）

  • box-sizing ：border-box ：限制 padding 变化

五、Flexbox （弹性布局）