Как наглядно увидеть размеры блоков при создании сетки в CSS?

Question

[Максим Калинин]

Начал изучать вёрстку. Как в браузере видеть расположение блоков и их размеры, границы? Чтоб понимать правильно ли я задал размеры, отступы, позиционирование блока и т.п.
В HTML Academy, в одном из уроков наглядно показывают вот так:

Картинка-1

Но как в каком-нибудь другом макете мне сделать подобные вспомогательные стили я не знаю. Я сейчас на таком этапе:

Картинка-2

В таком виде не понятно, правильно ли я расположил блоки, угадал ли с размерами и т.п.

Comments

[Сергей delphinpro]

* {
  outline: 2px dotted red;
  outline-offset: -2px;
}

[Kovalsky]

Также можно использовать инспектор элементов, F12 > Elements (Chrome).

[Сергей delphinpro]

Для FireFox есть хорошее расширение WebDeveloperToolbar. Оно много чего может полезного, в том числе показывать границы блоков.
Вероятно и для Хрома должно быть подобное расширение.

Answer 1

[Александр Першин]

Мы готовили для этой демки специальный файл со стилями для обводок. Где-то обводки делали тенями, где-то аутлайнами.

Подписи блоков добавляли псевдоэлементами. Причём использовали CSS-функцию attr:

::before {
  content: attr(title);
}

Но для каких-то блоков подписи переопределяли.

И если вкратце ответить на вопрос, как сделать такие обводки автоматом. То никак.

Comments

[Максим Калинин]

Начал использовать функцию браузера "Просмотреть код элемента". С помощью схемы, где показаны все отступы и размеры блоков, могу увидеть наглядно как он позиционируется на странице и сколько места занимает.

Мне проще элементу-блоку фон какой-то задавать, чтоб сразу лучше понимать и видеть как он выглядит в браузере, когда я описываю блочную модель в CSS.

Ещё вы сделали фоном картинку макета. Как правильно поставить её в фон, чтоб все размеры совпадали?

[Александр Першин]

Фон в натуральную величину, то есть без задания размеров, по вертикали сверху, по горизонтали по центру.

[Econavi]

Александр Першин: Можете показать исходник outline.css ?

Answer 2

[Владимир]

Укажите в CSS:

*{
 border: solid 1px red;
}

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

div {
 border: solid 1px red;
}

span {
 border: solid 1px green;
}

p {
 border: solid 1px blue;
}

Comments

[Kovalsky]

border влияет на размеры.

[Андрей]

Никита Полевой: ну мы же тут взрослые, раз свою сетку пилим, полагаю с htmlbook.ru/css/box-sizing уже знаком автор вопроса.
Но если это очень принципиально то можно задать outline

[Сергей delphinpro]

Андрей: content-box меняет внешние размеры, border-box - внутренние. Оба случая могут доставить проблем.

[Андрей]

Сергей: я совсем не понял твой комментарий. Padding и border с которыми взаимодействует это свойство это все внутренний размер же. А контент бокс вообще ничего не меняет.
Можно подробностей о чем ты говоришь и примеров?

[Сергей delphinpro]

Андрей: Подробности в спецификации. Или в песочнице попробуй примеры сделать. Ты же взрослый =) должен знать как ведут себя различные бокс-модели.

[Андрей]

Сергей: пффф, понятно.

[Сергей delphinpro]

Андрей:
Да ты не пфыкай =) Просто попробуй сделать такую обводку бордерами всем элементам (неважно в какой модели) на странице с уровнем сложности выше "детского".

Нет бы слушать да на ус мотать, что умные дядьки говорят, а он пфыкает =))

[Максим Калинин]

Прописал в стилях блокам границы, как было предложено:

border: 1px dashed red;
box-sizing: border-box;

Блоки "съехали"

Картинка-3

На Картинку-1 даже близко не похоже.

Answer 3

[Adikjoro]

На каком редакторе кодишь? Скачай Brackets и будет тебе счастье, нисколько не пожалеешь. Вот хороший и подробный обзор. Если нужен подробный курс по редактору, то вот этот в самый раз.

Comments

[Максим Калинин]

Использую Atom. Я только учусь верстать и мне не особо важно какой редактор. К Атому претензий нет пока. А как Брэкетс поможет увидеть размеы блоков в браузере?

[Adikjoro]

Максим Калинин: И не только это, но и есть динамическое изменение сайта без сохранения файла. Посмотри обзор)

Answer 4

[Vladimir]

можете попробовать подключить js от сюда - https://github.com/ArtMan-8/outline-prototype
внизу можно скопировать скрипт для вставки в консоль браузера, если не хочется копировать js

Answer 5

[BaSE_01]

нашел этот стиль в коде на htmlacademy

@font-face {
  font-weight: 400;
  font-family: "Montserrat";
  font-style: normal;
  src: url("../fonts/Montserrat-Regular.woff") format("woff");
}

@font-face {
  font-weight: 700;
  font-family: "Montserrat";
  font-style: normal;
  src: url("../fonts/Montserrat-Bold.woff") format("woff");
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  margin: 0;
  font-family: "Montserrat", "Arial", sans-serif;
  font-size: 14px;
  line-height: 20px;
}

body {
  min-width: 430px;
  border: 2px dashed #c7e4ff;
}

html::before,
body::before,
header::before,
footer::before,
main::before {
  color: #7fc1ff;
}

main,
header,
footer {
  background-color: #f3faff;
  border: 2px solid #7fc1ff;
}

nav,
section,
article,
aside,
form {
  background-color: #f9f7ff;
  border: 2px solid #9779ec;
}

nav::before,
section::before,
article::before,
form::before,
aside::before {
  color: #9779ec;
}

h1,
h2,
h3,
h3,
h4,
h6 {
  font-size: 18px;
  background-color: #ffffff;
  border: 2px solid #ff994f;
}

h1::before {
  content: "h1";
  color: #ff994f;
}

h2::before {
  content: "h2";
  color: #ff994f;
}

h3::before {
  content: "h3";
  color: #ff994f;
}

h4::before {
  content: "h4";
  color: #ff994f;
}

h5::before {
  content: "h5";
  color: #ff994f;
}

h6::before {
  content: "h6";
  color: #ff994f;
}


img,
a,
cite,
time,
p,
blockquote,
address,
fieldset,
ul,
ol,
dl,
dt,
dd,
li {
  background-color: #ffffff;
  border: 2px solid #f36dff;
}

img,
video {
  max-width: 100%;
  height: auto;
}

p::before {
  color: #f36dff;
  content: "p";
}

blockquote::before {
  color: #f36dff;
  content: "blockquote";
}

address::before {
  color: #f36dff;
  content: "address";
}

fieldset::before {
  color: #f36dff;
  content: "fieldset";
  left: 0;
}

* {
  position: relative;
  padding: 25px 25px 20px;
  margin: 0;
  border-radius: 4px;
}

*:not(:last-child) {
  margin-bottom: 20px;
}

*::before,
* > *::before,
* > * > *::before {
  position: absolute;
  top: 8px;
  left: 10px;
  font-weight: 700;
  font-size: 11px;
  line-height: 10px;
  letter-spacing: 0.04em;
}

html::before {
  content: "html";
}

body::before {
  content: "body";
}

main::before {
  content: "main";
}

header::before {
  content: "header";
}

footer::before {
  content: "footer";
}

section::before {
  content: "section";
}

article::before {
  content: "article";
}

form::before {
  content: "form";
}

aside::before {
  content: "aside";
}

nav::before {
  content: "nav";
}

ul::before {
  content: "ul";
  color: #f36dff;
}

li::before {
  content: "li";
  color: #f36dff;
}

dl::before {
  content: "dl";
  color: #f36dff;
}

dt::before {
  content: "dt";
  color: #f36dff;
}

dd::before {
  content: "dd";
  color: #f36dff;
}

a::before {
  content: "a";
  color: #f36dff;
}

cite::before {
  content: "cite";
  color: #f36dff;
}

time::before {
  content: "time";
  color: #f36dff;
}

img {
  background: rgba(243, 109, 255, 0.1);
}

a {
  display: inline-block;
}

select {
  padding: 10px;
}

input {
  padding: 10px;
}