#javascript #html #css #angular
Вопрос:
Я разрабатываю СПА-салон с использованием Angular, и я указал html, body { height: 100% } и body { margin: 0 } в CSS. В этой ситуации, если я использую HTML-теги с полями по умолчанию в компоненте, таком как <h1> тег, страница переполнится.
По-видимому, это связано с тем, что поле первого элемента тела заменяется полем тела, что отличается от поведения в обычном HTML. В обычном HTML верхнее поле первого элемента игнорируется, а тело никогда не имеет поля. Однако такое поведение не относится к Angular (или, точнее, к реакции).
В чем причина этого?
Кроме того, есть ли какой-либо способ добиться нормального поведения HTML в Angular?
Образцы в Stack Blitz следующие:
- Обычный HTML: https://stackblitz.com/edit/web-platform-x6cd4l?file=index.html
- Угловой: https://stackblitz.com/edit/angular-ivy-2yrmkw?file=src/app/app.component.ts
- Отреагируйте: https://stackblitz.com/edit/react-ts-4mdnyl?file=index.tsx
Заранее спасибо.
Комментарии:
1. Похоже , что ваша HTML-версия отсутствует
<!DOCTYPE html>, поэтому она отображается по-другому. И переполнение вызвано тем, что у H1 есть верхнее поле, что приводит к разрыву между телом и html.2. Как вы указали, обычная HTML-версия отсутствовала
<!DOCUTYPE html>, поэтому я добавил ее. Верхнее поле первого элемента тела больше не игнорируется, но все еще существует разница в переполнении. Есть ли какой-либо способ предотвратить переполнение в Angular? — Модифицированный простой пример HTML: stackblitz.com/edit/web-platform-x6cd4l?file=index.html3. В приведенном выше примере простого HTML CSS не был загружен. В ситуациях, когда CSS работал, он вел себя так же, как при визуализации с помощью Angular или React. Большое вам спасибо за вашу помощь.
4. Я не смог сделать это с помощью СтекбЛитца, поэтому я сделал это с помощью CodePen. — Повторно измененный образец простого HTML: codepen.io/yokotani/pen/abwxeNj
5. Как я уже упоминал в своем первоначальном комментарии. У H1 есть запас. Просто установите
margin-top: 0h1, и проблемы больше нет.
Ответ №1:
Похоже , что ваша HTML-версия отсутствует <!DOCTYPE html> , поэтому она отображается по-другому. И переполнение вызвано тем, что у H1 есть верхнее поле, что приводит к разрыву между телом и html.
Как только вы добавили тип документа, который вы можете установить margin-top: 0 h1 , и проблема больше не должна существовать.