Поля/отступы вокруг контента в новом приложении Vue
Получил задание начать разработку страницы во Vue для моей команды, но я не могу избавиться от белой рамки вокруг всей моей страницы.
<script setup lang = "ts">
</script>
<template>
<body>
<div></div>
</body>
</template>
<style scoped>
* {
padding: 0;
margin: 0;
}
div {
top: 0;
left: 0;
background: red;
height: 50px;
}
</style>
В браузере выглядит так же. Из того, что я нахожу, люди просто говорят, что это стандартное поле/отступ тела. Но их установка ничего не изменила. В моем main.ts у меня есть остатки первоначального приложения Vue Hello World/Welcome, которое импортирует файл CSS, который также импортирует другой. Но оба пусты, и удаление первоначального импорта тоже не помогло.
Попробуйте html или body, а не *. Кроме того, пожалуйста, проверьте свои инструменты разработчика, чтобы узнать, откуда именно берется это. Кроме того, здесь вы используете scoped, но он должен быть глобальным для вашего проекта.
@kissu Хорошо, видимо, в этом была проблема. Удалил scoped и теперь касается краев. Если вы хотите добавить это как ответ с объяснением, я приму это.
Ответы 1
Вам необходимо применить сброс поля/отступа в глобальной области видимости, иначе он останется в области вашего компонента.
Пожалуйста, удалите область действия из вашего style или сделайте такой сброс выше в дереве файлов.
Кроме того, я рекомендую не использовать селектор CSS *, потому что он довольно сильно влияет на производительность. Пожалуйста, также используйте инспектор инструментов разработчика, чтобы выяснить, почему изменения не применяются так, как вы ожидаете.
Это исправило это. Но почему, откуда берется это поле/отступ? Если я удалю область действия, а также удалю тело, так что внутри моего шаблона будет только <div></div>, мне все равно понадобится body CSS, чтобы границы исчезли. Есть ли где-то элемент body, добавленный самим Vue?
@PatchingMatching — это стиль по умолчанию практически для всех браузеров, не более того. Не имеет прямого отношения к Vue.
Кстати, это тоже внутри App.vue. Итак, я решил, что в любом случае область действия здесь будет в основном всем моим приложением, поскольку оно находится на самом верху. Но вы говорите, что сам предварительный просмотр/браузер добавляет где-то тело, которое мне нужно, чтобы коснуться стиля глобальной области видимости?
@PatchingСоответствие на самом деле наоборот. Даже самый высокий файл в вашем дереве (здесь App.vue) все еще находится в обертке, а не в самом теле. На самом деле так лучше, потому что SPA не привязан к самой DOM, но короче: вы не можете выбрать body через любой .vue файл. Вам нужен общий стиль без области действия для таргетинга body. В конце концов, это не имеет большого значения, используйте стиль без области видимости только для этих 2/3 пограничных случаев, а остальные оставьте как scoped.
Я заметил, что было бы нормально иметь несколько блоков стилей, поэтому я сделаю это и оставлю тело в одиночестве в глобальной области видимости. Большое спасибо за быстрые ответы!
@PatchingMatching да, наличие и style, и style scoped действительно прекрасно.
Использование
htmlвместо*фактически добавило больше пробелов слева и справа. Я тоже пробовалbody, никакой разницы по сравнению с*.