• 前端 CSS 经典：flex + margin 布局

    前言：如今我们布局大多时候都是用的 flex 布局，但是有时我们也可以使用 margin 小技巧去完成布局。在弹性盒中当我们把 margin 某一个方向上设置为 auto，他的含义是用 margin 吃掉这个方向的剩余空间。

    1. 元素垂直和水平居中

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta
    7.       name="viewport"
    8.       content="initial-scale=1.0, user-scalable=no, width=device-width"
    9.     />
    10.     <title>documenttitle>
    11.     <style>
    12.       .box {
    13.         width: 500px;
    14.         height: 500px;
    15.         border: 1px solid;
    16.         display: flex;
    17.       }
    18.       .item {
    19.         width: 100px;
    20.         height: 100px;
    21.         background: blue;
    22.         margin: auto;
    23.       }
    24.     style>
    25.   head>
    26.   <body>
    27.     <div class="box">
    28.       <div class="item">div>
    29.     div>
    30.     <script>script>
    31.   body>
    32. html>

    2. 三个子元素，两个居左一个居右 

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta
    7.       name="viewport"
    8.       content="initial-scale=1.0, user-scalable=no, width=device-width"
    9.     />
    10.     <title>documenttitle>
    11.     <style>
    12.       .box {
    13.         width: 500px;
    14.         height: 500px;
    15.         border: 1px solid;
    16.         display: flex;
    17.       }
    18.       .item {
    19.         width: 100px;
    20.         height: 100px;
    21.         background: blue;
    22.       }
    23.     style>
    24.   head>
    25.   <body>
    26.     <div class="box">
    27.       <div class="item">div>
    28.       <div class="item">div>
    29.       <div class="item" style="margin-left: auto">div>
    30.     div>
    31.     <script>script>
    32.   body>
    33. html>

     

  • 相关阅读:
    Rust中的数据抓取：代理和scraper的协同工作
    Unity Mono和.Net平台浮点算法的区别
    2.2 常量
    互联网、政务外网、政务专网、政务内网的区别
    C++ Qt开发：Tab与Tree组件实现分页菜单
    Spring 事务相关
    【从0到1设计一个网关】自研网关的架构搭建
    Openssl
    C++ 字符串string
    idea插件开发-UAST
  • 原文地址：https://blog.csdn.net/weixin_64684095/article/details/139845274