Привет.
Сегодня мы поговорим о модели коробки.
И что такое модель коробки, на самом деле является общей концепцией CSS,
которая помогает вам размещать и размещать свой элемент туда, где вы хотите, чтобы они шли.
Итак, одна из первых вещей, о которых мы поговорим, это высота и ширина.
Я знаю, что я уже использовал это немного в некоторых моих других лекциях, но
я хотел быть очень конкретным в том, как это работает.
И одна из первых вещей, которые вам нужно знать, заключается в том, что высота и
ширина любого встроенного элемента - это сам контент.
Итак, если у вас есть ссылка, высота и
ширина этой ссылки - это только текст кликабельной части ссылки.
Элементы, которые не являются встроенными, вещи, которые являются блоком, встроенным блоком, такие вещи,
они могут принимать свойства высоты и ширины, и мы видели это в лекции Display.
Поэтому в любой момент, когда у вас есть что-то встроенное, если вы дадите ему высоту и
ширину, браузер просто игнорирует его.
Что-нибудь еще, браузер идет отлично, я могу идти вперед и изменить это для вас.
Некоторые из других вещей, о которых мы хотим думать тогда, когда у нас есть элементы,
это то, как они помещаются на экране.
Один из самых простых способов
для вас стратегически разместить вещи на вашей странице, чтобы поставить границы вокруг них.
Даже если вы не хотите, чтобы эти границы позже в вашем конечном продукте,
я считаю, что очень полезно иметь это представление о том, сколько места занимает элемент.
Таким образом, любой элемент может иметь границу вокруг него, будь то его встроенный,
или блок, или встроенный блок.
И эти свойства границы определяют, какую границу стиля вы хотите,
какую ширину границы и какой цвет.
Они довольно простые.
Стиль границы является единственным, который должен быть указан.
Если не указать цвет или не указать ширину, не проблема.
По умолчанию он будет черным и, вероятно, один пиксель.
Но вы должны решить, какой стиль вы хотите.
Итак, в этом случае, я сказал, для всех моих div, я хочу, чтобы у них была сплошная
граница в один пиксель вокруг них, и я не могу сказать вам, какой это цвет,
потому что я еще не совсем такой гадкий, но я бы предположил что-то вроде синего.
Стиль границы, который вы хотите указать, в то время как большинство людей всегда используют твердые,
есть много разных стилей.
Вы можете использовать пунктирные, пунктирные, рифленые, ребристые, скрытые, вставка, начало.
Есть много разных вещей, которые вы можете сделать, и
это действительно своего рода стилистическая разница с вашей стороны.
Я на самом деле не обращаю внимания на них, потому что я всегда просто использовал твердый себя.
После того, как вы решите, какой стиль вы хотите, вы можете указать ширину и цвет.
Поэтому, когда приходит время установить ширину, если вы решите, вы можете установить ее в
несколько пикселей или вы можете использовать ключевые слова, тонкий, средний или большой.
Когда придет время сделать цвет,
вы можете сделать то же самое, что мы делали все это время.
Вы можете просто использовать имя, например, синий цвет, значение RGB,
шестнадцатеричное значение или просто так, чтобы вы знали, оно также прозрачно.
Так что он может просто взять цвет того, что под ним.
Поэтому, когда приходит время для вас указать, насколько велика вы хотите, чтобы ваша граница шла,
вы можете указать четырьмя различными способами.
В первом примере вы просто указываете ему один номер.
В этом случае три пикселя.
И то, что он собирается сделать,
это поставить рамку в три пикселя вокруг всего элемента так же, как это.
Если вы решите дать ему два значения, будет ли он установить границу
в три пикселя сверху и снизу, и десятипиксельную границу слева и справа.
Это действительно распространенный способ настроить вещи, когда вы делаете границы и
другие свойства, потому что это действительно хорошая сокращенность,
которая все еще очень проста для понимания и чтения.
Если вы дадите ему три значения, это немного сложнее, и я всегда
спотыкаюсь о том, что это такое, так что я собираюсь показать картину, чтобы убедиться.
Первое значение всегда верхнее.
Вы хотите, чтобы ваша верхняя граница была 3 пикселя.
10 пикселей - для левого и правого, а 20 пикселей - для нижнего.
Последнее - когда вы даете четыре значения, и когда вы даете четыре значения,
это в основном означает сверху, справа, снизу, слева.
И это установит границу на четыре разных значения.
Таким образом, большинство людей либо используют одно
значение, четыре значения, и несколько людей используют два значения, а также.
В основном, и одна из причин, по которой я вам это показываю, это может быть действительно пугающим,
и вам интересно, что люди делают, когда они происходят.
Это то, что они делают.
Они используют короткие, так что они не должны иметь границу справа,
границы слева, границы сверху, границы снизу.
Маржа - это в основном то пространство, которое находится за пределами вашей границы.
Это между, когда я говорю вам и вашему соседу, или
то, что я действительно должен сказать, между элементом и соседом элемента.
Так что это дает тебе локтевую комнату, где ты не хочешь, чтобы тебя трогал.
С полями, всякий раз, когда вы даете ему положительную маржу,
вы в основном говорите, переместите свой элемент вправо или вниз.
Если вы дадите ему отрицательный запас,
вы на самом деле заставляете его приближаться к соседу.
Вы заставляете его двигаться влево или вверх.
Заполнение очень похоже по концепции на маржу, но
вместо этого это пространство находится между элементом и его границей.
Это дает ему немного лишнего пространства внутри.
Возможно, вы почти думаете об этом как о скверливании текста в некоторых случаях.
Таким же образом, всякий раз, когда у вас есть положительные значения для
заполнения, вы перемещаете его наружу из элемента.
Ты даешь ему больше места.
Если вы даете ему отрицательное дополнение, вы фактически перемещаете границу близко или,
возможно, даже поверх элементов, которые находятся рядом с ним.
Таким образом, с маржей и дополнением все, что вы собираетесь сделать, это дать числовое значение.
Ты собираешься дать ему что-то вроде 3 пикселей или 10%.
Вы не даете ему никакого цвета.
Это всегда будет прозрачно.
Заполнение всегда будет того же цвета, что и элемент, и поле
всегда будет одним и тем же цветом родителя, вероятно, тела страницы.
Они, как и граница, могут быть определены в этом от одного до четырех значений.
Поэтому, если вы поместите маржу три пикселя, это будет три пикселя вокруг всего.
Если вы говорите padding, десять пикселей, пять пикселей, вы будете иметь верхний,
нижний, левый и правый.
Так что позвольте мне показать вам короткую картину того, о чем я говорю.
В этом случае, вот мой текст - мой фактический элемент.
Я сказал, что это то, что я хочу продолжать.
Синий - это граница вокруг моего элемента.
Желтый - это прокладка.
Это пространство между моим текстом и границей, и этот оранжевый - это край, и
то, что вы говорите, не подставляйте меня к чему-либо еще.
Дай мне столько места вокруг себя.
Таким образом, это может переместить ваши абзацы вниз.
Это может переместить ваши divs вниз и снова.
Так что, просто потренируйся.
И когда вы играете с ним все больше и больше,
это будет иметь смысл, какой из них маржа, а какой из них обивка.
Одна из вещей, которые вам нужно понять, когда вы делаете отступы и границы и
поля, и все это заключается в том, что в HTML говорит, что ваш рост и
ваша ширина являются аддитивными.
И поэтому это означает, что если вы решите, что хотите,
чтобы ширина вашего элемента была 200 пикселей, вам, вероятно, нужно учитывать,
насколько велики все эти другие аспекты и свойства.
Таким образом, в этом случае часть ширины - это поле, плюс граница,
плюс дополнение, плюс фактический элемент с самим собой.
И поэтому все это действительно складывается, чтобы получить то, что мы считаем
фактической шириной вашего элемента.
И это будет иметь значение, когда вы смотрите на свою страницу, и вы разрабатываете
ее и пытаетесь решить, сколько места вы хотите, чтобы каждый элемент занял.
Поэтому, если мы посмотрим на этот пример прямо здесь, где у меня есть ширина 100px,
заполнение - 10px, поле - 5px, а граница - 1px.
Я надеюсь, что прямо сейчас вы делаете математику в своей голове, и
я обещаю не давать гораздо больше математики, чем это, но вы делаете это, чтобы выяснить,
насколько ширина делает этот элемент, делает этот div, действительно нужен на странице.
И в этом случае ширина составляет 132 пикселя.
100, плюс 10, плюс пять, плюс один, плюс один, плюс пять, плюс десять.
Все складывается.
Высота, таким же образом, - это ваша высота плюс верхняя и нижняя отступы,
верхняя и нижняя границы, верхняя и нижняя границы.
Ладно, когда мы говорим о марже,
я просто хотел забросить этот слайд, хотя он не
связан со многими другими вещами, о которых мы должны были говорить.
Но это потому, что маржа очень важна,
когда вы хотите центрировать элементы на странице.
Когда мы хотим центрировать текст, мы могли бы просто использовать выравнивание текста центр,
и все выглядело действительно хорошо.
Но когда вы хотите центрировать элементы, это немного сложнее.
И поэтому способ по умолчанию сделать это - использовать команду margin zero auto.
Так что, если вы помните, первый ноль, это означает сверху и снизу, и
так это не будет волновать.
Авто это то, что ставит его влево и вправо.
Теперь это будет работать только в том случае, если элемент будет отображаться: block,
если элемент не плавает, это элемент имеет ширину,
которая не является автоматической, что означает, что вы его устанавливаете.
И это последнее, если элемент не является фиксированной или абсолютной позиции.
Теперь я еще не освещал позицию.
Хорошая новость в том, что раз уж я ее не осветил, ты, наверное, не
путался с этим, и тебе не нужно беспокоиться об этих двух вещах.
Но когда вы пытаетесь отправить свои элементы, вернитесь на этот слайд, если вам нужно,
и отметьте их, чтобы убедиться, что все эти свойства подходят.
И это лучший способ сцепить вещи прямо сейчас.
Наконец, когда мы говорим об этом, я хочу добавить еще один вариант, и
это называется размером коробки.
И то, что делает размер коробки, это занимает часть математики из этой аддитивной высоты
и аддитивной ширины.
Каковы ваши варианты, вы можете иметь content-box, поэтому размер содержимого коробки,
и это просто ваша добавка по умолчанию.
Тебе придется помнить, сколько места ты используешь.
Следующая называется пограничной коробкой.
И border-box фактически принимает во
внимание ширину, содержимое, заполнение и границу.
Итак, если вы говорите, что хотите, чтобы ширина была 200 пикселей,
это на самом деле не сделает элемент 200 пикселей.
Это сделает его 200 пикселей минус отступы и границы.
Одна из последних вещей, которые нужно помнить, это то, что мы будем учитывать отступы и
границы, это не будет учитывать маржу.
Итак, наконец,
одна из вещей, которые я собираюсь показать вам в этом примере всего за секунду,
- это разные способы, которые вы можете установить высоту и ширину разных элементов.
И есть два распространенных способа сделать это.
Первый называется абсолютным, и
это когда вы устанавливаете элемент на определенный размер.
Вы говорите, что я хочу, чтобы это было так много пикселей, или столько миллиметров, или
столько сантиметров.
Пиксели - это очень распространенный способ установки размеров.
Другой тип измерения - это то, что я называю жидкостью, и
он устанавливает размер относительно окружающих элементов или родительских элементов.
Таким образом, вы можете использовать такие вещи, как процент.
Вы можете использовать vw, который обозначает
ширину видового экрана, vh, который обозначает высоту видового экрана.
Вы даже можете использовать такие вещи, как em и rem, которые не часто используются, но
они фактически устанавливают размер относительно своих родителей.
Так что давайте продолжим и перейдем к моему примеру, чтобы
мы могли немного поиграть с этим.
Этого будет недостаточно, чтобы продемонстрировать все, что мы можем сделать, но
надеюсь, это поможет вам начать.
То, что у меня есть здесь, - это очень простой HTML-файл,
где у меня есть левая и правая сторона.
Но, как вы видите, они сейчас не налево, а направо.
Они просто наверху друг на друга.
Итак, первое, что я хочу знать, можете ли вы поставить эти дивы рядом друг с другом?
Нам придется использовать своего рода комбинацию отображения, и высоты, и
ширины, и заполнения.
Так что давайте продолжим и сделаем это.
Поэтому здесь, в моем файле CSS,
сразу вы можете увидеть такие фоновые вещи, которые я сделал.
Теперь, когда вы хотите, чтобы вещи были рядом друг с другом, вы должны дать им ширину,
потому что прямо сейчас они занимают 100%.
Один из вариантов заключается в том, чтобы вы пошли вперед и установили его на какие-то пиксели.
И скажите, может быть, 200 пикселей и 200 пикселей, и посмотрите, что произойдет,
посмотрим, получится ли это.
Проблема с этим, поскольку я раскомментирую свой код здесь, заключается в том, что, поскольку люди
идут на разных размерах браузера, ваши номера могут быть слишком большими или слишком маленькими.
Итак, то, что я сделал здесь, я пошел вперед, и я установил свою ширину на 48%.
Теперь делать это действительно здорово, и я собираюсь выйти из этой одной строки
всего на секунду, потому что большинство людей получают идею, что вы хотите
установить ширину на что-то меньшее.
Что они забывают, так это то, что даже несмотря на то, что они занимают
всего 48%, на самом деле я даже сделаю что-то очень маленькое.
20%, они не идут рядом друг с другом.
Поэтому вам нужно помнить, что вы хотите использовать эти измерения жидкости.
Так что давайте вернемся сюда, я собираюсь вернуть его на 40%.
Даже если вы сделаете его действительно тощим, пока вы не скажете
браузеру, о, я знаю, что это заблокировано, но я собираюсь изменить его на встроенный блок,
это никогда не позволит блочным элементам быть рядом друг с другом.
Вот почему вы должны помнить, чтобы сделать оба этих элемента.
Так что давайте продолжим и сохраним и перезагрузим.
И вы можете видеть, что я пошел вперед и я сделал свою ширину.
Я сделал свой блок дисплея.
У меня есть прокладка.
У меня есть граница, и у меня есть запас.
Последнее, что я собираюсь сделать, чтобы закончить это, чтобы показать вам, что происходит,
я собираюсь пойти вперед и
изменить это до 50%, потому что это действительно обычная ошибка, которую люди совершают.
Говорят, я хочу две вещи рядом друг с другом.
Так что я собираюсь сделать их каждые 50%.
Не забывайте, когда вы это делаете,
это не работает, потому что это 50%, прежде чем учитывать границу.
Так что убедитесь, что вы играете со всеми этими вещами, что вы играете с
запасом, вы играете с прокладкой, вы играете с границей.
Потому что это то, как ты собираешься заставить вещи работать, настраивая, настраивая, настраивая.
Так что давайте продолжим и рассмотрим.
Когда приходит время для вас, чтобы начать реализацию всех этих идей,
ваша модель коробки с вашим дополнением, контентом, запасом
и т. Д., Вы действительно хотите сначала разработать эскизы на бумаге, потому что это действительно трудно
засунуть вещи после того, как вы уже придумали контур, хорошо?
Итак, сначала дизайн, второй код.
Второе, что вы можете сделать, это использовать модель коробки
, чтобы уменьшить сложность вашего кода.
Или, по крайней мере, сложность вашей математики, пытаясь выяснить,
какие вещи подходят где.
Наконец, независимо от того, что
вы делаете, вы должны помнить, что маржа всегда должна учитываться.
Это может быть сложно, когда вы впервые начинаете пытаться собрать свою страницу вместе
и получать вещи, чтобы идти именно туда, где вы хотите, и
мы даже не говорили о позиционировании еще, что было бы еще одним элементом.
Так что сейчас, практикуйте эти вещи небольшими способами.
Используйте Inspect Element, чтобы играть с ним, и не нужно так сильно менять свой код.
Пока ты не получишь все так, как ты хочешь, чтобы они выглядели.
И не волнуйтесь, мы все совершаем ошибки.
Мы все делаем это вместе.
Но я думаю, что ваша страница, надеюсь, становится все
ближе и ближе к тому, что вы действительно хотели бы разместить в Интернете.
Хорошая работа.