如何 XHTML-CSS 盒子模型答案

【问题标题】：how to XHTML-CSS box-model如何 XHTML-CSS 盒子模型
【发布时间】：2020-04-18 07:04:08
【问题描述】：

有人知道我如何只使用 css 来制作这样的东西吗？在每一边他们是1/5的空间。我已经完成了 html 部分。 example

【问题讨论】：

具有 width: 60% 并水平居中位置的东西。不过，如果您将自己的努力包括在 sn-p 中，我会非常有帮助。
margin:0 20%; 也可以工作...请用演示您的问题的代码澄清您的问题。

【解决方案1】：

这是带有css的html

<div class="container">
  <div class="block-1">
  </div>
  <div class="block-2">
  </div>
</div>

html, body {
  height: 100%;
  margin: 0;
}
.container {
  width: 60%; /* left and right 20% */
  min-height: 100%;
  margin: 0 auto; /* center */
  background-color: blue;
}
.block-1 {
  width: 100%;
  height: 100px;
  background-color: grey;
}
.block-2 {
  width: 100%;
}

【讨论】：

你还知道如何在蓝色部分的顶部和底部添加一条橙色线吗？ prntscr.com/qh797w我尝试过使用边框，但这毁了整个事情，添加另一个块部分也没有用。
这是我现在拥有的prntscr.com/qh7kxr，但我受到左边距的影响，知道如何解决它吗？
我设法修复了这些线条，但文本现在被设置为左 30 像素 prntscr.com/qh7suf
网站 prnt.sc 仅显示图像（屏幕截图），而不是代码。请将您的 html 和 css 放在 jsfiddle.net 上。网站 jsfiddle 将显示代码和结果。