你真的知道CSS布局方式吗-8种基础CSS布局方式

你真的知道CSS布局方式吗?

最近写文章用到了一些CSS布局方式，突然想到CSS布局方式基本到底有多少种呢？平常现在我用到的最多的就是弹性布局display:flex，然后对于一些指定行列的会采用网格布局(格栅布局)display:gird,在接触这两个之前，就是普通的简单布局和浮动布局、定位布局、和表格布局。后来又接触到了响应式布局,在实现瀑布流的时候接触了多列布局column。

我这里就先浅聊几个比较常用的布局。

浮动布局

浮动布局是一种常用的网页布局方式，通过使用CSS的float属性，可以让元素向左或向右“浮动”，实现页面元素的排列。在浮动布局中，通常需要注意以下几点：

1. 清除浮动：当一个元素浮动后，可能会影响后面的元素排列。为了解决这个问题，可以使用CSS的clear属性清除浮动。

2. 父元素高度塌陷：当子元素浮动后，父元素可能会因为高度被子元素“挤压”而导致高度塌陷。为了解决这个问题，可以使用CSS的overflow属性，或使用伪元素清除浮动。

3. 元素宽度：当元素浮动后，宽度可能会变得不确定。为了解决这个问题，可以使用CSS的width属性设置元素宽度。

需要注意的是，浮动布局在处理大量内容时可能会出现问题，因为它不是自适应的。此外，如果过度使用浮动布局，可能会导致代码难以维护。因此，在使用浮动布局时，需要仔细权衡其优缺点。

这里有一个用浮动布局实现的导航栏,使用float属性将导航栏中的链接元素浮动到左侧，实现导航栏的排列。同时，通过设置margin和padding属性，控制导航栏中元素之间的间距和内边距。需要注意的是，在最后一个元素中，需要将margin-right设置为0，以避免多余的间距。

弹性布局

弹性布局（Flexbox）是一种用于页面布局的 CSS 技术，它可以让容器内的元素自适应布局，实现更加灵活的页面布局效果。弹性布局主要通过设置容器的属性来控制内部元素的排列方式、对齐方式和空间分配等，具有较强的可控性和可扩展性。 以下是弹性布局的注意要点：

1. 使用flex容器包裹子元素，即设置父元素的display属性为flex。
2. 使用flex-direction属性来控制子元素排列方向，可选值包括row（默认值，表示水平排列）、row-reverse（反向水平排列）、column（垂直排列）和column-reverse（反向垂直排列）。
3. 使用justify-content属性来控制子元素在主轴方向上的对齐方式，可选值包括flex-start（左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，子元素之间间隔相等）和space-around（子元素之间间隔相等，且子元素与容器边缘的间隔相等）。
4. 使用align-items属性来控制子元素在交叉轴方向上的对齐方式，可选值包括flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）和stretch（拉伸对齐，子元素高度自适应容器高度）。
5. 使用flex属性来控制子元素在主轴方向上的占比，可设置为一个非负整数，表示占据主轴方向上的比例。默认值为0，表示不占据空间。
6. 使用align-self属性来控制单个子元素在交叉轴方向上的对齐方式，可选值和align-items属性相同，但只对当前元素生效。
7. 使用flex-wrap属性来控制子元素的换行方式，可选值包括nowrap（不换行）、wrap（换行）和wrap-reverse（反向换行）。
8. 使用flex-flow属性来同时设置flex-direction和flex-wrap属性，可简化代码。
9. 使用order属性来控制子元素的排列顺序，可设置为一个整数，数值越小越靠前。默认值为0。
10. 使用flex-grow属性来控制子元素在空间有剩余时的放大比例，可设置为一个非负数。默认值为0，表示不放大。
11. 使用flex-shrink属性来控制子元素在空间不足时的缩小比例，可设置为一个非负数。默认值为1，表示等比例缩小。
12. 使用flex-basis属性来控制子元素在主轴方向上的初始尺寸，可设置为一个长度值或百分比。默认值为auto，表示根据内容自适应。
13. 使用flex-wrap属性和align-content属性来控制多行子元素在交叉轴方向上的对齐方式，可选值和justify-content属性相同，但只对多行子元素生效。

定位布局

定位布局是一种将元素放置到页面上的方法，它可以让我们精确地控制元素的位置和大小，常见的定位布局有相对定位、绝对定位和固定定位等。

相对定位是指元素相对于其原始位置进行定位，使用 position: relative; 属性来实现。相对定位不会改变元素在页面上的布局，只会影响元素的定位。

绝对定位是指元素相对于其最近的已定位的祖先元素进行定位，使用 position: absolute; 属性来实现。如果祖先元素没有定位，则相对于文档进行定位。绝对定位会改变元素在页面上的布局。

固定定位是指元素相对于浏览器窗口进行定位，使用 position: fixed; 属性来实现。固定定位不会随着页面滚动而改变元素位置，常用于实现悬浮导航栏等效果。

定位布局需要注意以下几点：

• 定位元素需要设置宽度和高度，否则可能会出现意想不到的效果。
• 绝对定位的元素会脱离文档流，可能会影响其他元素的布局。
• 固定定位的元素需要谨慎使用，避免遮挡其他重要内容。
• 定位元素的层级关系可以使用 z-index 属性来控制。

总之，定位布局可以让我们更加灵活地控制元素的位置和大小，但需要注意其影响范围和使用方法。

我这里举了一个定位布局的例子，1、2、3盒子都是我们正常排版，如果没有使用定位的话，那么4、5、6盒子也应该跟在他们后面这样。但是这里明显不是。我将4，6盒子进行了绝对定位，那么他们两个便会根据container进行布局，为了不让6将4挡住，于是我将4设置了一个层级关系。而5是进行了相对定位，只是会根据原本正常排序的位置进行布局。

box4 采用了绝对定位，位于父元素的底部和右侧，宽高为 30px，背景颜色为 aqua，z-index 为 100。box5 采用了相对定位，位于其原本位置的下方 20px 和左侧 20px，宽高为 50px，背景颜色为 yellow。box6 也采用了绝对定位，位于父元素的底部和右侧，宽高为 100px，背景颜色为 pink。