display(布局)

  • block: 有宽高, 不在同一行;
  • inline-block: 有宽高,在同一行;(父节点上使用 inline-block 会自动获取子节点的宽度)
  • inline: 无宽高, 在同一行;

position(位置)

  • relative: 元素根据正常的文档流相进行定位;
  • absolute: 脱离当前文档流, 相对其最近的 position 属性值为非 static 祖先元素进行定位, 直到 body;
  • fixed: 脱离当前文档流, 相对视窗定位。注意: 当父元素上有这几个属性时, transform, perspective, filter 时, fixed 定位会失效;
  • sticky: relative 与 fixed 的结合;

使用 sticky 布局有一些限制:

<div>
  <div style="position: sticky; top: 20px; background: pink; margin-top: 50px;">Header</div>
  <div style="height: 1000px">Content</div> // 比如这一行不可或缺
</div>

margin

margin 的百分比值是以父元素的宽度作为解析基准的。

自适应内部元素宽度

精确控制表格列宽

.demo {
  table-layout: fixed; /* 固定表格布局算法 */
  width: 100%;
}

背景占屏幕全宽,内容的长度定宽

.footer {
  padding: 1em calc(100% - 450px); /* 暗藏内容宽度为 900 px */
  background: #ccc;
}