CSS布局技巧 | 青训营

研君
166 阅读4分钟

1. 弹性盒子布局

弹性盒子布局（Flexbox）是CSS3中新增的一种布局模式。通过设置容器元素的display属性为flex，可以实现灵活的、自适应的布局。

应用场景：

  1. 等高布局：当需要让多个元素在同一行中等高显示时，可以使用弹性盒子布局。通过将容器元素设置为display: flex;，以及子元素设置flex-grow: 1;，可以让它们平分父容器的高度。
  2. 自适应布局：弹性盒子布局可以根据容器的尺寸和内容量进行自适应调整，非常适用于响应式设计。

实操实践：

示例一：
<style>
  .float {
    float: left;
    width: 200px;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
  }
</style>
<div class="float">Column 1</div>
<div class="float">Column 2</div>
<div class="float">Column 3</div>
​

在上述示例中，我们创建了一个三列浮动布局。每个列的宽度为200px，带有一些边距、内边距和边框。

示例二：

image.png

5c3063b58cdc725c192ae77a2d0f107.png

image.png 在这里我们以淘宝网为例，这个<container>就相当一个容器，图示的方框里为该网页的主要内容，在这里我们可以设置它的宽高，放置各种格子，图示中格内放置了各种商品的封面信息。

2. 定位布局

定位布局是基于CSS的定位属性实现元素定位和层叠的技术。通过设置元素的position属性，可以将元素相对于其父级容器或文档进行定位。

应用场景：

  1. 固定定位：当需要将某个元素固定在页面的某个位置，不随滚动而移动时，可以使用固定定位（position: fixed;）。
  2. 绝对定位：当需要将某个元素相对于其最近的非静态定位的父级元素进行定位时，可以使用绝对定位（position: absolute;）。
  3. 相对定位：relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
  4. 层叠效果：通过设置元素的层叠顺序（z-index属性），可以创建层叠效果，使得某些元素覆盖其他元素。

实操实践：

示例一：
.container {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

上述示例代码将会创建一个绝对定位的盒子，距离其父容器顶部50px，距离左侧50px。

示例二：
<style>
  .container {
    position: relative;
    width: 400px;
    height: 300px;
  }
  .box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 100px;
    background-color: #f00;
  }
</style>
<div class="container">
  <div class="box"></div>
</div>
​

上述示例代码创建了一个相对定位的容器，并在其内部创建了一个绝对定位的盒子。盒子相对于容器顶部和左侧各偏移50px，并具有宽度为200px和高度为100px。

示例三：

image.png

以上淘宝网的例子也可看出。



3.浮动布局

浮动布局是CSS中最经典的布局技巧之一。通过将元素设置为浮动（float: left;或float: right;），可以使其脱离文档流，并根据浮动方向相对于父级元素进行定位。

应用场景：

  1. 多列布局：当需要在页面中实现多栏布局时，可以使用浮动布局。通过将每个栏目的容器元素设为float: left;，可以让它们横向排列。
  2. 图文混排布局：在文章内容中，经常需要将图片与文本同行显示，这时可以将图片设置为浮动，使得文本环绕在图片周围。

实操实践：

示例一：
<style>
  .float {
    float: left;
    width: 200px;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
  }
</style>
<div class="float">Column 1</div>
<div class="float">Column 2</div>
<div class="float">Column 3</div>
​

在上述示例中，我们创建了一个三列浮动布局。每个列的宽度为200px，带有一些边距、内边距和边框。

示例二：

1693410140063.png 1693409919836.png
这里编写的代码，可以通过改变各种参数实现格子在<container>里面的浮动，以此实现板块色彩搭配、同行板块大小统一等以调节界面的美观程度。

总结

不同的CSS布局技巧在不同的场景下有着各自的优势和应用。
浮动布局适用于传统的多列布局和图文混排布局，但需要注意清除浮动以避免影响其他元素。
定位布局可以实现精准的定位效果和层叠效果，适用于一些特殊的布局需求。
弹性盒子布局则更加灵活和自适应，适合用于响应式设计和等高布局。
注意事项：
首先，对于浮动布局，使用clearfix来清除浮动是常见的做法。
其次，在使用定位布局时，要确保设置了父容器的position属性为非静态定位（如relative），以使得绝对定位生效。
最后，在使用弹性盒子布局时，要注意兼容性问题，在某些旧版本的浏览器中可能需要添加特定的前缀。
结合实际、实事求是以高效实现页面布局、增加用户体验。

avatar
文章
阅读
粉丝