• 完成flex布局与float布局

    当涉及到布局时，Flex布局和Float布局是两种不同的方法，它们分别用于实现不同的布局需求。下面我将为你展示如何使用这两种方法来完成布局。

    1. 使用Flex布局：

    Flex布局是一种强大的布局方法，特别适用于创建响应式和灵活的布局。以下是一个简单的例子，演示如何使用Flex布局来创建一个水平居中的页面内容：

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <style>
    5.     .container {
    6.       display: flex;
    7.       justify-content: center;
    8.       align-items: center;
    9.       height: 100vh; /* 让容器占据整个视口高度 */
    10.     }
    11.   </style>
    12. </head>
    13. <body>
    14.   <div class="container">
    15.     <p>This is centered using Flexbox.</p>
    16.   </div>
    17. </body>
    18. </html>

    2. 使用Float布局：

    Float布局在过去常用于创建复杂的多栏布局，但它不如Flex布局强大和灵活。以下是一个使用Float布局创建两栏布局的示例：

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <style>
    5.     .container {
    6.       width: 100%;
    7.     }
    8.  
    9.     .column {
    10.       float: left;
    11.       width: 50%;
    12.     }
    13.  
    14.     .clear {
    15.       clear: both;
    16.     }
    17.   </style>
    18. </head>
    19. <body>
    20.   <div class="container">
    21.     <div class="column">
    22.       <p>This is column 1.</p>
    23.     </div>
    24.     <div class="column">
    25.       <p>This is column 2.</p>
    26.     </div>
    27.     <div class="clear"></div>
    28.   </div>
    29. </body>
    30. </html>

    我们创建了两个具有50%宽度的列，通过使用float: left;来实现。最后，我们添加了一个清除元素来确保容器的高度适应内容。

    Flex布局通常比Float布局更适合现代网页布局，因为它提供了更多的控制和更好的响应性支持。但在某些情况下，Float布局仍然可能有用，尤其是在需要支持古老浏览器的情况下。推荐在新项目中使用Flex布局或CSS Grid布局来实现更灵活和现代的布局。

  • 相关阅读:
    全链路压测的步骤及重要性
    Leetcode 第 367 场周赛题解
    idea 全局maven 设置
    TiDB Dashboard 实例性能分析 - 手动分析页面
    Ubuntu：apt软件包管理工具
    编写汽车零部件开发问题分析报告培训与报告内容检查单
    教你一招，轻松实现heic转换
    最短路问题之Dijkstra算法 洛谷 单源最短路径
    狂神说之redis笔记
    SIMULIA-Simpack 2022x新功能介绍
  • 原文地址：https://blog.csdn.net/weixin_62304542/article/details/133185689