盒模型的特性以及定位属性

盒模型

在 css 中所有元素都被盒子包围着。
盒子从里到外：content(内容)、padding(内边距)、border(边框)、margin(外边距)

  • 盒模型中 padding 值不能为负，margin 可以为负，负数时盒子四周会向内收缩。(叠加)
  • 边框实际上是覆盖在盒子上方的，盒子中被覆盖的部分仍然沿用盒子设置的背景颜色。(可通过 rgba 设置透明观察)
  • margin-top 方向设置的值会在嵌套的盒子中传递，从而影响外层盒子。(通过对父盒子设置边框可以避免)
  • 相邻元素对向的 margin 值只会生效较大的那个。(第一个元素 margin-bottom:40,第二个元素 margin-top:30，生效的就是 margin-bottom)

块级元素

  • 块级元素默认独占一行。
  • 支持所有样式。
  • 不写宽度时使用父元素宽度(自适应)。
  • 占据的区域为矩形。

行内元素

  • 行内元素默认不会换行。
  • 不支持部分样式如：width 和 height，对 margin 和 padding 的上下设置也有些问题。
  • 不写宽度时宽度由内容决定。
  • 占据的区域不一定是矩形(换行)。
  • 在标签没有连续的情况下行内元素之间存在空隙。

标准盒模型

box-sizing:content-box

盒子实际宽高 = content 的 width/height + padding + border + margin

怪异盒模型

box-sizing:border-box

盒子实际宽高 = width/height = content + padding + border + margin。

可以节省部分计算、处理使用百分比的场景

浮动

当元素被设置成浮动时会脱离文档流(按元素出现的顺序排列)根据 float 的方向进行浮动，直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止。

在文档流中所有元素都浮动时，文档流的高度就会塌陷(没有元素)

解决高度塌陷

  • 空标签：在空标签上清除浮动
  • 伪类空标签:
1
2
3
4
5
clearFloat::after {
  clear: both;
  display: block;
  content: "";
}

浮动的特性

  • 只会影响后续元素。
  • 具备块级元素的特性：支持全部样式。
  • 具备行内元素的特性：宽度由内容决定。
  • 具备行内元素的特性：行内填满时会自动换行。
  • 浮动元素不会遮挡文字。(浮动就是为图文混排设计的)

定位

设置定位属性后可以使用 top、right、bottom、left 来进行定位，以这种方式进行的定位不会影响其他元素的布局。

  • 定位的元素会脱离文档流。
  • 具备块级元素的特性：支持全部样式。
  • 具备行内元素的特性：宽度由内容决定。

相对定位

position:relative

  • 相对于自身进行偏移。
  • 相对正常文档流中的元素进行定位。

绝对定位

position:absolute

  • 绝对定位元素相对于最近的非 static 祖先元素定位。当这样的元素不存在时则相对于可视区域进行定位。

固定定位

position:fixed

  • 固定在可视区域进行定位

粘性定位

position:sticky

粘性定位的表现类似于相对定位和固定定位。

在没超过阈值(可为 top、right、bottom、left)的情况下表现与相对定位相同，超过后表现形式与固定定位相同。

Block Formatting Context

即 BFC，Css2.1 中的一个概念。他是页面中的一组渲染区域，有一套自己的渲染规则，他决定了子元素如何定位，以及和其他元素的关系和相互作用。

具有 BFC 的元素可以被看做是隔离在一块单独的容器中，里面的元素不会影响外边的元素，并且 BFC 也拥有一些独特的特性。

BFC 触发条件

  • float 的值不是 none
  • position 的的值不是 static 或 relative
  • display 的值不是 inline-block、table-cell、flex、table-caption 或 inline-flex
  • overflow 的值不是 visible

解决的问题

  • 解决 marin-top 传递的问题。
  • 解决 float 高度塌陷的问题。

现代布局(flex 和 grid)都具有 BFC 特性。