容器,块和引导网格之间的关系是什么?

时间:2018-02-05 11:33:36

标签: html css containers grid-layout

我已经开始在freecodecamp上学习编码并且与容器,内联vs块与内联块以及bootstrap 12列系统混淆。

  • 容器和块之间有什么区别
  • 我绝对需要两者和为什么
  • 如果我使用bootstrap,为什么我是否需要了解内联vs块元素?我可以使用Bootstrap“col-xs-12”作为示例,无论我的元素是内联还是块都无关紧要,因为它们将采用父元素的格式。

我已经搜索了容器和块(内联块)之间的区别,但它只解释了它们各自的作用,据我所知,它们做同样的事情,将网站划分为可以设置样式的块。调整大小。块将被放置在容器中,但在这里,如果我们有块,容器的用途是什么。

(在其他结果中,发现:https://teamtreehouse.com/community/div-containers-div-wrappers没有回答我的问题并且让我问自己包装器是什么和那个:https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block但是这篇文章让我更加困惑了)< / p>

我是一个初学者,如果我的问题对大多数人来说非常基本,我很抱歉,但我真的需要理解这个概念。谢谢谁帮帮忙!

1 个答案:

答案 0 :(得分:0)

正确理解技术术语的含义并使其适应环境至关重要。 inlineblockinline-block是HTML规范中明确定义的字词。我不确定你指的是哪个container,因为从上下文中不清楚。你的意思是css-containers吗?

bootstrap是一个框架,它本身不是HTML规范的一部分。

freecodecamp使用了很多框架并且似乎非常受欢迎,但它们没有专门的stackoverflow策略,相反,它们拥有自己的论坛。

在这方面,你的问题在这里是偏离主题的,应该在这里发布: https://forum.freecodecamp.org/

他们甚至说

  

我们的论坛就像露营者的Stack Overflow一样

希望我能提供帮助,当您了解有关HTML,CSS和JavaScript的更多信息并遇到您的第一个真正的“错误”时,请回到这里,我们会弄明白: - )

顺便说一句,我喜欢w3schools:https://www.w3schools.com/html/html_blocks.asp

更具体一点:有些元素会有“自己的”行,这些是通常的块元素。然后是内嵌元素,它们嵌入在当前行流中。需要注意的重要事实是:所有这些HTML元素都带有默认的css配置,您可以更改它!因此,通过指定不同的css,完全有可能使div(默认为'block'元素)成为inline元素。反之亦然,您可以通过覆盖默认的css使跨度表现得像block元素。 firefox控制台中的CSS窗格可以显示每个元素涉及的所有css规则。这意味着它不仅可以显示您定义的样式,还可以显示每个元素附带的默认样式。

尽管如此,了解block的含义非常重要,因为“新行”应用只是对正在发生的事情的简化。使用HTML元素似乎是一个好主意,它与我想要的最接近并改变它的行为。例如,如果它是右侧的广告,您可以使用div并从那里开始,而不是让我们说span并尝试将其弯曲到您的意愿(这完全可能,但导致有问题和不直观的代码。)

当我开始使用HMTL和CSS时,对于HTML代码和呈现的网页并排是非常有帮助的。它有助于我的学习过程。我使用Dreamweaver(不确定它是否仍然存在),现在你可能需要的只是jsfiddle和一个开发firefox(只是一个带有一堆扩展的常规firefox,这使得开发变得更容易)。我过去使用过Firebug,但现在每个主流浏览器都配有控制台,调试功能和实时代码编辑。只需在firefox中点击F12并享受乐趣: - )