CSS 流体布局下的宽度分离原则: 百分比、视窗vw vh、媒体查询、flex等。
在 CSS 流体布局中，“宽度分离原则”通常是指一种设计模式，它建议我们将布局中的宽度定义为相对单位（如百分比 % 或者视窗单位 vw/vh），以便布局能够随着视口大小的变化而自动调整。然而，“宽度分离原则”并不是一个标准术语，因此在这个上下文中，我们可以理解为一种将宽度定义与具体的像素值相分离的设计理念。
在响应式设计中，流体布局（Fluid Layout）是一种布局方式，它允许页面元素根据容器或视口的大小按比例伸缩。与固定宽度布局相比，流体布局更具有灵活性，可以更好地适应不同设备和屏幕尺寸。
改变 width/height 作用细节的 box-sizing:
box-sizing 属性在 CSS 中用于控制元素的盒模型如何计算宽度和高度。这个属性有两个主要的值：content-box 和 border-box。在 Vue 或其他前端框架中，我们可以通过设置 box-sizing 来决定元素的尺寸是如何确定的。
content-box（默认值）
当 box-sizing 设置为 content-box 时，元素的总宽度和高度是由 width 和 height 定义的，加上内边距（padding）和边框（border）的宽度。也就是说，元素的实际宽度和高度会大于设定的 width 和 height。
border-box
当 box-sizing 设置为 border-box 时，元素的总宽度和高度包括了内边距（padding）和边框（border）的宽度。换句话说，元素的 width 和 height 包括了 padding 和 border 的尺寸，因此增加 padding 或 border 的尺寸不会增加元素的总宽度或高度。何时使用 border-box？在许多情况下，使用 border-box 更加直观，因为它允许开发者设定元素的总宽度和高度，而不必考虑内边距和边框的影响。这对于创建响应式布局尤其有用，因为可以更容易地控制元素在不同屏幕尺寸上的表现。
CSS min-width/max-width和min-height/max-height:
min-width, max-width, min-height, 和 max-height 是 CSS 中用于限制元素宽度和高度的属性。它们可以用来创建响应式布局，确保元素在不同屏幕尺寸和分辨率下都能正确显示。
min-width 和 max-width
这两个属性分别用于设置元素的最小宽度和最大宽度。
min-width: 设置元素的最小宽度。当元素的可用空间小于 min-width 定义的宽度时，元素的宽度将扩展至 min-width 的值。
内联元素：
在 CSS 和 HTML 中，内联元素（inline elements）指的是那些默认不会独占一行，且与其他内联元素在同一行显示的元素。内联元素的特点是它们不会影响页面的垂直布局，即它们的前后元素仍然在同一行内显示，除非有换行符或足够的内容迫使它们换行。
内联元素的特点：
不会独占一行：内联元素不会强制换行，多个内联元素可以出现在同一行。
宽度和高度由内容决定：内联元素的宽度和高度由其内部的内容决定，而不是由外部容器指定。
垂直对齐方式：内联元素默认按照基线（baseline）对齐，这是为了确保文字的底部对齐。
无法设置宽度和高度：由于内联元素的宽度和高度由内容决定，因此不能直接设置 width 和 height 属性。