CSS-布局模式

前言

css在布局上有这么几种模式：

• Position
• Flexbox
• Grid
• Table
• Flow

今天就来聊聊不同布局模式的特点。

Flow

遵循的是传统的流式布局模式，类似于一些文档处理软件。他的一个特点就是没有对 z-index 属性的响应。

在流式布局中，可见元素的display属性值无非这三种：block、inline、inline-block。

• inline元素：它始终包裹着内容，你无法设置它的width和height属性（<img />、<video />、<canvas />、<button />元素除外）。

当用 div 包裹一个img元素的时候，div 的高度会略微大于 img 元素的高度，这是因为 img 元素的 vertical-align 属性默认值是 baseline。可以通过两种方式来消除，1、将 img元素的display属性设置为block。2、line-height属性设置为0。

在有换行的情况下，对行内元素设置内边距，它只能应用到元素的首尾两端。但是我们可以通过 box-decoration-break: clone 来将内边距应用到每个换行的两端。

• block元素：默认是要占满父元素的宽度的。不管如何一行只能有一个block元素。对于width属性，有一个不常用的值：fit-content。它是根据内容自动调整宽度。

• inline-block元素：没有换行了，相对于inline元素，他可以设置width和height属性。

Position

其中有四个属性，relative, absolute, fixed, or sticky，他们每个都有自己不同的布局算法。

Relative

有两点：

• top、right、bottom、left属性，只有在position属性设置为relative时才有效。
• 约束某些子元素

在移动元素的时候，绝对不会改变元素的大小。

Absolute

将元素移出了文档流.

居中定位小技巧：

• margin: auto
• 四个方向上的数值要相同，一般都设置为 0px
• 要有确定的宽高，否则宽高会动态变化

Fixed

将元素移除了文档流，默认它只根据viewport来定位。 但如果他的父元素中有 transform 或者 will-change: transform 属性，那么它会根据父元素来定位。

sticky

不会脱离文档流 始终是在父元素中

常见的几种失效原因：

• 设置了sticky元素，的祖先元素中，有overflow属性设置为hidden、scroll、auto。这时他的粘黏上下文是这个祖先元素。
• 父元素的高度不够大，因为sticky元素的活动范围是在父元素中。

还有一点，sticky元素的在谷歌浏览器中，会有1px的误差。

默认的层级关系

1、 在流式布局中，通过margin负值造成的层叠，只有背景是层叠的，其中的内容总是浮在最前面。 2、 position布局的层叠要比流式布局的高 3、都是position的话，DOM的顺序决定谁在上面

z-index

如果我们不想要默认的层级关系，可以通过 z-index 来改变。

他只作用于position布局的元素。其中默认值都是 auto，相当于 0

isolation: isolate 的主要作用是创建一个新的堆叠上下文，从而隔离元素及其子元素的层叠关系，使其不受外部元素层叠顺序的影响。

Flexbox

flex中有两个不忽视的尺寸概念：最小内容尺寸和假设尺寸（针对子元素）。

最小内容尺寸： 指的是元素内容在没有溢出的情况下的最小尺寸。 假设尺寸： flex-basis或width。

在flex容器中，子元素的height和width属性不再是硬性规定(主轴方向)，他更像是一种建议值。

flex-basis和width起的作用大致相同，

flex属性是flex-grow、flex-shrink、flex-basis的简写。flex:1 等价于 flex:1 1 0%。(多个字元素设置：flex-grow:1 并不会将他们的宽度设为相等，需要flex-basis: 0%才行)

min-width和max-width可以限制 flex-grow/flex-shrink的伸缩范围。

在flex布局中，margin 不会有塌陷

• align-items: baseline;文字基线对齐有一个特点：即使有多层级的盒子，依然可以起作用。