单页角度应用程序中的正文填充答案

【问题标题】：body padding in single page angular app单页角度应用程序中的正文填充
【发布时间】：2017-03-22 17:33:04
【问题描述】：

如何在 Angular ng-app 中为模板主体提供填充？

我应该把 ng-app 渲染模板的 css 放在哪里？例如请看这个小提琴

div.ngview {
    padding: 25px 50px 75px 100px;
}

免责声明：我没有任何 CSS 经验。

【问题讨论】：

无法理解...你到底想要什么
“我在 CSS 方面没有任何经验”——这就是你需要改变的地方。从基础知识开始，例如 id 和 class 之间的区别，以及在 CSS 中如何通过它们中的每一个来选择元素。
css 会有两个 Scope 去。一个在应用程序级别，一个在模板级别。我就是这么理解的。如果你没有得到我，请查看答案。

标签： javascript html css angularjs

【解决方案1】：

创建一个自定义 css 文件，您将在项目使用的默认 css 文件之后调用该文件（如果是这样的话）。对于您的示例：您可以通过像这样声明它来在 id 元素上设置 css 属性：

#ngview {
    padding: 25px 50px 75px 100px;
}

【讨论】：

请记住，要在一个类上设置 css，您需要用一个点来调用它：.yourClass 并在一个 ID 上设置 css，您将使用 #yourId
这就是我想要的。
好！如上所述，尝试学习 css 的基础知识，它真的不难，您将能够根据需要设计您的模板！如果我的回答很好，请将其标记为已接受：D
顺便说一下，如果你真的想让你的 div 居中，你应该尝试使用边距而不是填充，（如 margin: 0 auto）。它将根据父母的 div 居中您的 div。并请“将我的答案标记为已接受”！它有帮助啊哈

【解决方案2】：

将此 css 代码放在 jsfiddle 的 css 部分，以了解您可以定位哪个部分。

// whole page
body {
  background: red;
}

// router links
.container {
  background: green;  
}

// router view
#ngview {
  background: orange;
}

【讨论】：

【解决方案3】：

好吧，你的 html 中已经有了这段代码：

 <style>
    .container {
      text-align: center;
      padding:50px;
    }
.dropdownmenu ul,
.dropdownmenu li {
  margin: 0;
  padding: 0;
}

.dropdownmenu ul {
  background: none;
  list-style: none;
}

.dropdownmenu li {
  display: inline-block;
  position: relative;
  width: auto;
}

.dropdownmenu a {
  background: #30A6E6;
  color: #FFFFFF;
  display: block;
  font: bold 12px/20px sans-serif;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

.dropdownmenu li:hover a {
  background: #000000;
}

只需在 .container 类中添加填充即可。

我强烈建议创建一个单独的 syle.css 文件并将其从您的索引页面导入。

https://jsfiddle.net/aghsqnpa/1/

【讨论】：