box-sizing大盒子里面装两个小盒子

参考代码，可直接运行：

<!--
 * @Author: baiyf
 * @Date: 2022-12-04 14:28:08
 * @LastEditTime: 2022-12-07 22:49:55
 * @Description: file content
-->

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .content {
            width: 500px;
            height: 200px;
            border: 3px solid red;
            display: flex;
            justify-content: space-between;
            padding: 20px;
            margin: 40px;
        }

        .box {
            border: 3px solid red;
            width: 45%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>

<body>

    <div class="content">

        <div class="box">子元素1</div>
        <div class="box">子元素2</div>
    </div>
</body>

</html>

box-sizing大盒子里面装两个小盒子关于box-sizing 可以参考菜鸟教程中的文章
具体文章连接
https://www.runoob.com/cssref/css3-pr-box-sizing.html
实现效果

如果对效果不满意，可以菜鸟教程提供在线网页进行编辑调整
同类遇到其他标签属性不会，可以直接搜索查看相关使用方法例子

代码如下，有帮助的话采纳一下哦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 200px;
            border: 3px solid red;
            box-sizing: border-box;
        }
        .item{
            width: 210px;
            height: 170px;
            margin: 9px;
            border: 3px solid red;
            font-weight: 800;
            font-family:Verdana, Geneva, Tahoma, sans-serif;
            font-size: 40px;
            text-align: center;
            line-height: 170px;
        }
        .item1{
            float: left;
        }
        .item2{
            float:right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">子元素1</div>
        <div class="item item2">子元素2</div>
    </div>
</body>
</html>

如有帮助，望采纳

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* div {
        width: 300px;
        border: solid 30px blue;
        padding: 30px;
        border-color: #ccc;
        margin: 20px auto;
      }
      div#div1 {
        box-sizing: content-box;
      }
      div#div2 {
        box-sizing: border-box;
      } */
      * {
        margin: 0;
        padding: 0;
        font-size: 0;
      }
      /* body {
      } */
      div {
        display: inline-block;
        width: 50%;
        box-sizing: border-box;
        border: solid 10px blue;
      }
    </style>
  </head>
  <body>
    <div id="div1">content</div>
    <div id="div2">border</div>
  </body>
</html>

分两种情况：
1.大盒子内部确实包含两个盒子，div包两个div，然后大div设置为flex，紧接着将两个盒子space-between分布两侧，调整间距即可
2.视觉上的大盒子包含两个小盒子，小盒子设置fixed或者absolute定位，通过top，left调整位置



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .odiv {
            width: 500px;
            height: 200px;
            border: 1px solid #9B5B5E;
            padding: 10px;
            box-sizing: border-box;
        }

        .odiv-left,
        .odiv-right {
            width: 200px;
            height: 180px;
            display: inline-block;
            border: 1px solid #9B5B5E;
            text-align: center;
            line-height: 180px;

        }

        .odiv-right {
            float: right;
        }
    </style>
</head>

<body>
    <div class="odiv">
        <div class="odiv-left">子元素1</div>
        <div class="odiv-right">子元素2</div>
    </div>
</body>

</html>

子元素1

子元素2

大盒子用box-sizing属性，目的应该是想在大盒子上加padding后不影响大盒子的整体大小。以下是我的运行结果以及参考代码，可直接运行。
运行结果：

参考代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .bigBox {
        width: 500px;
        height: 200px;
        border: 2px solid #f00;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        box-sizing: border-box;
      }
      .smallBox {
        width: 45%;
        height: 100%;
        border: 2px solid #f00;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="bigBox">
      <div class="smallBox">子元素1</div>
      <div class="smallBox">子元素2</div>
    </div>
  </body>
</html>