代码干燥计划

# 视觉格式化基础

# 元素框基础

不管什么元素，CSS 都假定每个元素生成一个或多个矩形框。

元素框中心是内容区域，四周有可选（可为0）的内边距（padding）、边框（border）、外边距（margin）。

默认，内容区的背景出现在padding范围内。

margin 始终是透明的，因此透过 margin 能看到父元素。

margin 可以为负值，padding 不可以。

# 调整元素的显示方式 display

可选值：[<display-outside> || <display-inside>] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

初始值：inline

是否继承：否

  • <display-outside>：block | inline | run-in
  • <display-inside>：flow | flow-root | table | flex | grid | ruby
  • <display-listitem>：list-item&&<display-outside>?&&[ flow | flow-root ]?
  • <display-internal>：table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
  • <display-box>：contents | none
  • <display-legacy>：inline-block | inline-list-item | inine-table | inline-flex | inline-grid

display: block; 将元素显示方式设置为 块级元素。 display: inline; 将元素的显示方式设置为行内元素。

注意：此属性仅仅是改变元素的显示方式，而不会改变元素本身的性质。通常，行内元素可以作为块级元素的后代，但块级元素不应该作为行内元素的后代，即便将行内元素设置了 display: block; 也不应该包裹块级元素在其中。

# 块级框 box-sizing

可选值：content-box | padding-box | border-box

初始值：content-box

是否继承：否

盒模型（以横向为例，纵向同理）：margin-left + border-left + padding-left + content + padding-right + border-right + margin-right

默认情况（content-box）下，设定的块级框的宽度（width）仅等于 content 的宽度，其他宽度都不包含在其中。

box-sizing 用来改变 width 和 height 的具体意义（定义元素边界范围）。

  • content-box 设定的宽高仅为元素 content 使用，padding / border / margin 均在设定宽高之外增加。

  • border-box 设定的宽高包含 border 及以内的所占位置

  • padding-box 设定的宽高包含 padding 及以内的所占位置

# 横向格式化属性

margin-left, border-left, padding-left, width, padding-right, border-right, margin-right 这七个属性控制元素框的横向布局。

其中，只有 margin-left, width, margin-right 这三个值可以设为 auto。

只有 margin 可以为负值。

div {
  width: 500px;
}
p {
  width: 100px;
  margin-left: auto; /* 将会得到剩余的 300px */
  margin-right: 100px;
}
1
2
3
4
5
6
7
8
div {
  width: 500px;
}
p {
  width: 100px;
  margin-left: 100px;
  margin-right: 100px; /* margin-right 会被强制重置为 auto，将得到剩下的 300px */
}
1
2
3
4
5
6
7
8
p {
  margin-left: 100px;
  margin-right: 100px;
  width: auto;
}

/* 上下两种写法完全等效 */

p {
  margin-left: 100px;
  margin-right: 100px;
}
1
2
3
4
5
6
7
8
9
10
11
12
div {
  width: 500px;
}

/* margin-left 和 margin-right都设置为 auto，将会得到相同的值 (500 - 300) / 2 = 100*/
/* 元素相当于会横向居中显示 */
p {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}
1
2
3
4
5
6
7
8
9
10
11
div {
  width: 500px;
}
p {
  width: auto; /* width 值将为 400px */
  margin-left: auto; /* 值将为 0 */
  margin-right: 100px;
}
1
2
3
4
5
6
7
8
div {
  width: 500px;
}
p {
  width: auto; /* width 值将为 500px */
  margin-left: auto; /* 值将为 0 */
  margin-right: auto; /* 值将为 0 */
}
1
2
3
4
5
6
7
8

当元素出现过约束的情况时，margin-right 将会被自动重置为满足需要的值，如果语言书写方向是从右向左，那则是 margin-left 被重置。

# 纵向格式化

大致和横向相同，但常规流动模式下，margin-top 和 margin-bottom 设为 auto 会被自动重置为 0。也就是无法依靠这样来设置纵向居中。

相邻的纵向 margin 会发生合并，最终取较大值。

# 行内元素

# 改变断行行为 box-decoration-break

可选值：slice | clone

初始值：slice

是否继承：否

  • slice，把一个行内非置换元素分成多行显示时，浏览器将其视为断成多块的一长行，每换一行就多一块。比如设置边框，每一行的边框不会是独立完整的，而是在断行处接续下一行的边框。
  • clone，把元素多行的各片段视作单独的框，如果设置边框，则每一行都会有完整独立的边框。边框，内边距，背景等都会在每一行单独应用。各行之间不互相影响。

后文略

（完）

← padding border margin outline →