Question

将框转换为以同心圆为中心（彼此共用同一个中心的圆圈）。外圈应为黑色，尺寸为300px，内圈应为白色，尺寸为200px。

HTML：

git ls-remote --symref <repository> <refs>

的CSS：

<div id="p10">
    <div id="outer">
        <div class="rectangle" id="inner"></div>
    </div>

只有当#p10 #outer { border-radius: 100%; background-color: #000; width: 300px; height: 300px; border-color: #000; position: absolute; } #p10 #inner { background-color: #fff; border-color: #fff; border-radius: 100%; width: 200px; height: 200px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }位置绝对时，css才有效。我有点困惑为什么会这样。这是否意味着只要我想要一个子元素位置是绝对的，所有父母的位置都必须是绝对的？

Answer 1

position:absolute元素的位置相对于最接近的容器，该位置设置为absolute，relative或fixed，否则它是相对的到视口。

如果没有指定top，right，bottom或left偏移值，它也可以相对于初始包含块。

可能会有更多可能性，您可以在W3C和MDN上了解详情。

Answer 2

只需改变父div的相对位置

 #p10 #outer {
    border-radius: 100%;
    background-color: #000;
    width: 300px;
    height: 300px;
    border-color: #000;
    position: relative;
  }

Answer 3

我建议使用position：absolute作为外部和position：relative作为内部。然后，将border-radius属性设置为宽度的一半（以像素为单位）。 border-radius的百分比可能会导致一些问题。当然，你需要将内心集中，所以给它们这些属性。

#inner {
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
position:relative;
width:200px;
border-radius:100px;
}

Answer 4

绝对/亲戚可能不在这里，至少相对于内在内容。

你也可以在填充和心灵box-sizing上传递：

＆＃13;

#p10 #outer {
  border-radius: 100%;
  background-color: #000;
  width: 200px;
  height: 200px;
  padding:50px;
  border-color: #000;
  /*position: absolute;*//* did you need it ? it will work the same for the child; */
  box-sizing:content-box; /*make sure padding is not included in size calculation*/
}
#p10 #inner {
  background-color: #fff;
  border-color: #fff;
  border-radius: 100%;
  width: 200px;
  height: 200px;
}

＆＃13;

<div id="p10">
  <div id="outer">
    <div class="rectangle" id="inner"></div>
  </div>

＆＃13;

你也可以继续关注游戏和心灵collapsing margins：

＆＃13;

#p10 #outer {
  border-radius: 100%;
  background-color: #000;
  width: 300px;
  height: 300px;
  border-color: #000;
  /*position: absolute;*//* did you need it ? it will work the same for the child; */
  padding:1px; /* mind [collapsing margins][1] */
}
#p10 #inner {
  background-color: #fff;
  border-color: #fff;
  border-radius: 100%;
  width: 200px;
  height: 200px;
  margin:50px;
}

＆＃13;

<div id="p10">
  <div id="outer">
    <div class="rectangle" id="inner"></div>
  </div>

＆＃13;

您也可以使用flex：

＆＃13;

#p10 #outer {
  border-radius: 100%;
  background-color: #000;
  width: 300px;
  height: 300px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-color: #000;
  /*position: absolute;*//* did you need it ? it will work the same for the child; */
}
#p10 #inner {
  background-color: #fff;
  border-color: #fff;
  border-radius: 100%;
  width: 200px;
  height: 200px;
}

＆＃13;

<div id="p10">
  <div id="outer">
    <div class="rectangle" id="inner"></div>
  </div>

＆＃13;

您也可以使用一个方框

＆＃13;

.circle {
  /* diplay, float, position, .. whatever is needed to be inserted mong the rest of your document styles*/
  margin:55px;
  height:200px;
  width:200px;
  border:solid;
  box-shadow:0 0 0 50px gray, 0 0 0 53px;
  border-radius:50%;

＆＃13;

<div class="circle"></div>

＆＃13;

父/子的HTML / CSS位置绝对

4 个答案: