跳到主要内容

定位

宽度和高度​

宽度​

  • width 属性；
  • 设置标签宽度；
table {
  width: auto;
  width: 75%;
  width: 100px;
}

最大宽度​

  • max-width 属性；
  • 设置标签最大宽度；
table {
  max-width: auto;
  max-width: 75%;
  max-width: 100px;
}

其余属性​

  • min 属性；
  • min-width 属性；
  • min-height 属性；
  • max-height 属性；

百分比​

  • 高度和宽度的百分比根据其 containing block 计算；

溢出​

溢出问题​

  • context box 无法包括其文本；

溢出

文字溢出样式​

文字溢出设置​
  • overflow 属性；
  • 设置文字溢出样式；
p {
  /* 文字不会被裁剪 */
  overflow: visible;
  /* 文字被裁剪, 无滚动条, 可通过 js 滚动 */
  overflow: hidden;
  /* 文字被裁剪, 无滚动条, 不可通过 js 滚动 */
  overflow: clip;
  /* 文字被裁剪, 具有滚动条 */
  overflow: scroll;
  /* 文字被裁剪, 按需设置滚动条 */
  overflow: auto;
}
成分属性​
  • overflow-x；
  • overflow-y；
多值属性​
  • 1 value；
  • 2 value：x + y；

定位​

top/bottom/left/right 属性​

作用​
  • 用于定位元素位置；
  • 见 [[040-类型-变量]] ；
positioned {
  position: absolute;
  top: 40px;
  left: 40px;
}

定位样式​

  • position 属性；
  • 设置 position 样式；
positioned {
  position: static;
  position: relative;
  position: absolute;
  position: fixed;
  position: sticky;
}

static positioning​

  • static 属性；
  • normal flow 默认值；
  • top/right/bottom/left/z-index 无效；
positioned {
  position: static;
  background: yellow;
}

relative positioning​

relative positioning​
  • relative 属性；
  • 设置为 relative positioning 类型；
positioned {
  position: relative;
  background: yellow;
}
定位机制​
  • 根据其 normal position 定位；
  • 再根据 top/bottom/left/right 偏移；

absolute positioning​

absolute positioning​
  • absolute 属性；
  • 设置为 absolute positioning 类型；
positioned {
  position: absolute;
  background: yellow;
}
隔离机制​
  • 脱离 normal flow，与其隔离；
定位机制​
  • 根据其 containing block 计算；

fixed positioning​

fixed positioning​
  • fixed 属性；
  • 设置为 fixed positioning 类型；
positioned {
  position: fixed;
  background: yellow;
}
定位机制​
  • 根据 viewport 计算；

sticky positioning​

sticky positioning​
  • sticky 属性；
  • 设置为 sticky positioning 类型；
positioned {
  position: sticky;
  background: yellow;
}
机制​
  • 像是 relative 和 fixed 的混合体；
  • 默认根据 relative 定位；
  • 当其滚动到 fixed 定位生效的定位时，转换成 fixed；
定位机制​
  • 根据 containing block 计算；
scrolling index 机制​
  • 当存在多个 position 属性值为 sticky 的元素时；
  • 按照其次序一层层覆盖叠加；
失效问题​
  • 父元素高度必须大于子元素；
  • 父元素 overflow 不能设置为 hidden 或 auto；

positioning context​

containing block​
  • static/relative/sticky；
    • 最近的祖先元素，且是 block container；
  • absolute；
    • 最近的祖先元素，且其 position 属性值不是 static；
  • fixed：
    • viewport；
initial containing block​
  • 具有 viewport 的尺寸；
  • 包含 html 标签；
创建 positioning context​
  • position 属性值非 static 即可；
  • 推荐使用 relative；
.positioned {
  position: relative;
}

z-index​

作用​
  • z-index 属性；
  • 设置对应标签的 stack level；
  • z-index 属性值越大，其 stack level 越高；
  • 当元素重叠时，stack level 高者优先被显示；
dashed-box {
  position: relative;
  z-index: 1;
}