html - 启动前端项目时如何定位div？你如何获得 CSS 样板代码设置？

Question

任何有经验的前端开发人员都可以解释他们如何在开始时将块放在正确的位置（你知道就像 CSS 样板）

我一直在尝试学习前端，虽然我现在已经多次学习基础知识，但我仍然不知道如何将显示分成块并将它们放置在我想要的位置。

一旦放置了外部 div，我就可以轻松地继续操作，但是外部组件不适合放在正确的位置。我有很多东西，网格，反应组件，flexbox，但每次我最终要么手动设置最外层包装器的边距（通过打开开发工具逐个像素地设置），要么使用一些现有的模板。

我知道人们会说给我看代码，但关键是我确实有代码可以工作并且没有错误，我最终完成了这个项目。但是为什么我不能只是喜欢position: absolute; margin: 12% 20%并将外部 div 放在中心。（每当我这样做时，要么在两边显示负边距，要么如果我尝试操纵现有模板，一切都会中断）

我从 bootstrap 获得主题并且已经习惯了使用它们，但是当我尝试应用自己的样式时感觉我被困住了

标签： htmlcssgridfrontendmargin

Answer 1

使用 CSS 网格。它仍然使用网格系统，类似于引导程序中网格系统的想法，但可以为您提供更好的控制，并且只是在纯 css 中。

进一步阅读/文档：https ://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout