gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 20:23:29 24 4
gpt4 key购买 nike

出于练习目的,我想重新创建此图像。

为此,我正在嵌套 div,并向它们添加填充,如下所示(摘录):

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>

但这似乎不太奏效。这真的是要走的路吗?

最佳答案

我能想到的最好的是:

html:

<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>

CSS:

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;
}

JS Fiddle demo .

For that I'm nesting divs, and add a padding to them...But this doesn't quite seem to work. Is this actually the way to go?

我认为这是唯一的方法,因为图像描述了各种组件之间的层次关系,我能想到的唯一替代方法是使用大量position: absolute div,不会传达或暗示各个部分之间的任何关系。

关于css - 如何使用 css 重新创建此图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4864809/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com