跳到主要内容

内边距边框与外边距

padding 的多值语法如何解析？​

  • 1 值: 四个边;
  • 2 值: 竖直 + 水平;
  • 3 值: top + 水平 + bottom;
  • 4 值: top + right + bottom + left;
h3 {
  padding: 110px 50px 50px 110px;
}
  • 成分属性: padding-top、padding-right、padding-bottom、padding-left;

padding 百分比以什么为基准？​

  • 基准: 父容器的 inline size;
  • 注意: 四向百分比都用这一基准, 与高度方向无关;

border 简写如何书写？​

  • 顺序不固定, 由类别关键字决定含义;
div {
  border: 0rem outset pink; /* width style color */
}
  • 成分属性: border-color、border-style、border-width;
  • 四向: 每类都有 -top/-right/-bottom/-left 变体;

border-style 与 border-width 有哪些取值？​

b1 {
  border-style: solid;
  border-style: dashed;
  border-style: dotted;
  border-style: double;
  border-style: none;
  border-style: hidden;
}

margin 与 padding 有何异同？​

  • 相同: 多值语法、成分属性、百分比基准都类似;
  • 不同: margin 可负、可 auto; padding 不可负;

margin collapsing 如何合并相邻外边距？​

  • 条件: 普通流中 block-level box 相邻的 block-axis margin;
  • 场景: 相邻兄弟块、父子块、空块自身上下;
  • 正值取最大值, 负值取最小值, 一正一负两者相加;
.a {
  margin-bottom: 20px;
}
.b {
  margin-top: 30px; /* 合并后间距为 30px, 不是 50px */
}