Я только начал изучать Angular 6. Я создал простое приложение Angular, в котором я создал компонент заголовка.

< Сильный > header.component.html

<header class="head">
  <div class="header-background">
  </div>
</header>

< Сильный > app.component.html

<app-header></app-header>

< Сильный > header.component.css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.head {
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid green;
}

.header-background {
    background-color: rgba(128, 128, 128, 0.09);
    height: 80%;
    width: 90%;
    margin: 0 auto;
}

Когда я запускаю ng serve, я вижу белые промежутки вверху, слева и справа. Я не уверен, что это такое. Я дважды проверил padding и margin равен 0px .

Добавляю скриншот screenshot.

Здесь вы можете видеть, что есть пустое пространство вверху, слева и справа за пределами моей границы .head . Я также добавил bootstrap@3.7.7 в свой файл проекта.

Пожалуйста, предоставьте решение, а также укажите причину, по которой я столкнулся с этой проблемой.

Это то пространство, о котором я говорю.

enter image description here

4
Sandeep Ranjan 17 Сен 2018 в 16:56

2 ответа

Лучший ответ

Я предполагаю, что у вас не настроена инкапсуляция стилей в компоненте заголовка. Если у вас есть стили в файле таблицы стилей компонентов, по умолчанию эти файлы применяются только к вашему шаблону компонента. Это означает, что ваше первое правило не применяется к основной части страницы, а только для каждого тега в вашем компоненте заголовка.

В этом случае вы можете исправить это двумя разными способами:

  1. Переместите свой первый стиль (тот, который имеет селектор *) в главный style.css вашего приложения.
  2. Измените свой компонент, чтобы он не установил инкапсуляцию представления на none.

Чтобы изменить инкапсуляцию представления, вам просто нужно добавить одну строку в декоратор компонента:

@Component({
    selector: '...',
    template: '...',
    styleUrls: ['...'],
    encapsulation: ViewEncapsulation.None,
})

Импорт должен быть

import {ViewEncapsulation} from '@angular/core';
2
tom van green 17 Сен 2018 в 14:30

Это потому, что вы заявили, что ваш .head должен иметь высоту, равную 90% высоты экрана, и что .header-background должен иметь высоту 80% от этих 90%. Кроме того, вы устанавливаете ширину на 90% от ширины экрана. Цвет фона тела по умолчанию - белый. Фактически, вы видите не какие-либо поля или отступы. Попробуйте установить 100% высоту и ширину, если хотите, чтобы серая область покрывала всю страницу.

-1
Jimmy Hedström 17 Сен 2018 в 14:05