如何使用css重新创建此图像_Css_Html

如何使用css重新创建此图像

css html

如何使用css重新创建此图像,css,html,Css,Html,我想重新创建此图像以用于练习为此，我将嵌套divs，并在其中添加一个填充，如下所示（节选）： div{ 宽度：150px；高度：150像素；边框：1px纯黑；右侧填充：1em；垫底：1米；左：1米； } ... 内容但这似乎不太管用。这真的是一条路吗？我能想到的最好办法是： html: 为此，我将嵌套divs，并为它们添加一个填充…但这似乎不太管用。这真的是要走的路吗我认为这是唯一的方法，因为图像描述了不同组件之间的层次关系，我能想到的唯一选择是使用大量的位置：绝对divs

我想重新创建此图像以用于练习

为此，我将嵌套

div

s，并在其中添加一个填充，如下所示（节选）：

div{
宽度：150px；
高度：150像素；
边框：1px纯黑；
右侧填充：1em；
垫底：1米；
左：1米；
}
...
内容

但这似乎不太管用。这真的是一条路吗？

我能想到的最好办法是：

html:

为此，我将嵌套

div

s，并为它们添加一个填充…但这似乎不太管用。这真的是要走的路吗

我认为这是唯一的方法，因为图像描述了不同组件之间的层次关系，我能想到的唯一选择是使用大量的

位置：绝对div
s，这不会传达或暗示，各个部分之间的任何关系。
我能想到的最好办法是：
html:

为此，我将嵌套div
s，并为它们添加一个填充…但这似乎不太管用。这真的是要走的路吗
我认为这是唯一的方法，因为图像描述了不同组件之间的层次关系，我能想到的唯一选择是使用大量的位置：绝对div
s，这不会传达或暗示，不同部分之间的任何类型的关系。
像这样的东西？
像这样的东西？
对文本使用比只在文本中嵌入文本更好？我很想问，但我是个该死的笨蛋。真的吗？我不认为这有什么大不了的，我使用p
的唯一原因是它给了文本一个CSS“钩子”（允许在以后应用进一步的风格选择。它可能还会为包含的文本添加语义/上下文，但我不确定这是否必要。使用是否比只在？Sry中嵌入文本更好？我是一个该死的css noob^^^。老实说，我认为这两种方式都没有什么大不了的=）我使用p的唯一原因是它为文本提供了一个CSS“挂钩”（允许以后应用进一步的风格选择）。它还可能为包含的文本添加语义/上下文，但我不确定这是否必要。
div {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  padding-right: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
}

...

<body>
  <div>
    Content
    <div></div>
  </div>
</body>

<div id="margin">
    <p>Margin</p>
    <div id="border">
        <p>Border</p>
        <div id="padding">
            <p>Padding</p>
            <div id="content">
                <p>Content</p>
            </div>
        </div>
    </div>
</div>

div {
    text-align: center;
    margin: 0 1em 1em 1em;
}

#margin {
    border: 1px dashed #ccc;
    background-color: #fff;
    color: #000;
}

#border {
    border: 1px solid #000;
    background-color: #9f2;
}

#padding {
    border: 1px solid #000;
    background-color: #fff;
}

#content {
    border: 1px dashed #ccc;
    height: 2em;
}