创建一个矩形，其中包含根据矩形大小调整大小的圆形按钮

Question

我有一个多部分的问题。 （我正在使用 React）

1) 我正在尝试创建一个看起来像 Mac 应用程序的 HTML/CSS 组件（即一个带圆角的矩形和一个顶部有 3 个圆形按钮的任务栏）

我目前有：

<div className='bash'>
  <div className='taskbar'>
     <div className='close-button button'></div>
     <div className='minimise-button button'></div>
     <div className='maximise-button button'></div>
   </div>
   <div className='main-window'></div>
</div>

使用 CSS：

.bash {
    height: 21%;
    width: 40%;
    background-color: white;
    border-radius: 10px;
}

.bash>.taskbar {
    border-radius: 10px 10px 0 0;
    background-color: #d8d8d8;
    height: 10%;
    width: 100%;
}

.bash>.taskbar>.button {
    background: red;
    width: 10%;
    height: 10%;
    border-radius: 50%;
}

这会创建

当我希望它看起来更像时

也就是说，我希望圆圈与任务栏的大小相关，并且彼此相邻，而不是彼此重叠。我尝试将 % 用于按钮的高度和宽度，但无济于事，那么我怎样才能让它工作呢？

（我在codepen 中复制了类似的内容）

2) 我对前端开发工作相当陌生，因此假设我会使用 HTML 和 CSS 创建形状，但刚刚听说过有关 SVG 的一些信息。我应该使用 SVG 标签来创建这个资产吗？如果是这样，与我这样做的方式相比，为什么推荐它？ （如果您对学习资源有任何建议，那就太好了：D）

感谢您的帮助

Answer 1

1) 使用您当前的代码，这是您实现目标的方式

.bash {
    height: 100px;
    width: 400px;
    background-color: black;
    border-radius: 10px;
}

.bash>.taskbar {
    box-sizing: border-box; /* this is new */
    border-radius: 10px 10px 0 0;
    background-color: #d8d8d8;
    width: 100%;
    display: flex; /* this is new */
    padding: 16px; /* this is new */
}

.bash>.taskbar>.button {
    background: red;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* this is new */
.bash>.taskbar>.button + .button {
    margin-left: 4px;
}

2) 我不知道您从哪里听说过，但 HTML + CSS 是首选方式，SVG 用于可缩放图形

Answer 2

有不同的方法可以做到这一点：flexbox 布局、div 浮动、网格布局。

.bash>.taskbar {
    border-radius: 10px 10px 0 0;
    background-color: #d8d8d8;
    height: 10%;
    width: 100%;
    display: flex; // Add flexbox
}

flexbox guid：link