Привет, сегодня мы будем говорить о Дисплей и видимость на вашей веб-странице.
Теперь, когда приходит время сделать вашу страницу, снова и снова я собираюсь сказать
вам, что выкладка, где вы хотите, чтобы вещи были ключ к действительно эффективной странице.
И одна из вещей, которые вам нужно помнить, это то, что каждый элемент, на который мы смотрим, является
в основном коробкой.
И модель коробки - это то, что мы собираемся осветить в будущей лекции.
Но прежде чем мы перейдем к деталям, я просто хочу поговорить о некоторых деталях.
Потому что то, как работает отображение на вашем экранном элементе, влияет на все соседние
элементы на вашей странице.
Прежде чем мы начнем, я просто хочу напомнить вам, что каждый элемент на вашей странице - это коробка.
Просто подумай об этом так.
И дисплей - это то, как вы можете решить, должны ли коробки быть рядом друг с другом,
под другом, и разные вещи, подобные этому.
Поэтому, когда мы говорим о дисплее,
есть некоторые общие значения, которые почти все используют, или
они просто по умолчанию, поэтому вы использовали его, даже не зная об этом.
Элементы, которые являются встроенными, будут сидеть рядом с другими элементами, они занимают
достаточно ширины и высоты и не более, когда вы размещаете их на странице.
Итак, я думаю о них как о моих хороших детях в элементах минивэна.
Это нормально, если я хочу посадить троих детей на заднее сиденье.
Они не собираются локть друг друга, они просто в порядке.
Они поладят.
Другой тип отображения — блок.
И какой блок делает, это заставляет разрыв линии между вашими элементами.
Итак, опять же, на моем примере,
у меня есть один ребенок, который на самом деле просто не может сидеть рядом с кем-то еще.
Я должен поставить их в свой ряд.
Даже несмотря на то, что она очень крошечная и не занимает столько места,
у нее целый ряд, когда мы едем в машине.
Что хорошо в элементах блока, в
то время как они занимают всю горизонтальную ширину и достаточно высоты,
вы можете войти, и вы можете установить высоту и ширину этих элементов.
Поэтому, несмотря на то, что это блок, и
вы зарезервировали всю ширину страницы, вы можете сказать, но
я действительно хочу, чтобы это было 40 пикселей, или половина страницы, или что-то в этом роде.
Поэтому с inline он занимает достаточно места, и вы не можете это изменить.
Ты не можешь сказать, что я хочу, чтобы он был больше или меньше.
Если он встроен, это все, что ты получаешь.
С блоком у вас есть немного больше гибкости, но
у вас есть проблема, что вы резервируете много места.
Так
что, конечно, мы придумали эту идею чего-то, что берет лучшее из обоих.
И это встроенный блок.
Элементы, которые имеют встроенный блок отображения, будут такими же, как встроенный, и
что они могут быть рядом друг с другом, но они также будут принимать высоту и ширину.
Так что если у вас есть две вещи, которые хотят быть рядом друг с другом, но
вы хотите дать им много места, и прямо сейчас они встроены.
Ну, продолжайте, измените его на встроенный блок, а
затем вы можете дать ему высоту и ширину.
И если у вас есть что-то, что блочное, и
вы хотите два из них рядом с каждым, опять же, без проблем.
Измените их на встроенный блок, и вы можете установить ширину и высоту.
Четвертый, который мы на самом деле не используем так много, это идея отображения нет.
И что происходит здесь, если у вас есть элемент на вашей странице, и
вы не даете ему отображения, это как если бы браузер полностью игнорирует, что он существует.
Это как если бы он поднял его и вытащил его со страницы.
Итак, эти четыре, инлайн, блок, инлайн-блок и
ни один - те, с которыми мы действительно начнем играть с самого начала.
Итак, то, что у меня есть прямо здесь, - это простой файл, который будет иметь
три элемента диапазона, три элемента div и три элемента абзаца.
Если вы помните, элементы диапазона встроены, так что
они займут столько места, сколько им нужно.
Но divs и абзацы, это блок, так
что они займут больше места.
На стороне здесь, то, что я сделал, я добавил немного стиля,
который может или не имеет смысла, когда мы впервые говорим об этом, но
я дал каждому из моих пролетов высоту и ширину.
В основном, все мои элементы, высота и ширина и другой цвет фона.
Так что, если мы посмотрим на это прямо сейчас.
Вы увидите, что я сделал все мои пролеты зелеными, все мои дивы синими, и
все мои абзацы своего рода розовато-фиолетовым цветом.
И каждый из них выкладывает точно по умолчанию, как бы это ни было.
Причина, по которой divs так же велики, как и
абзацы настолько велики, насколько они есть, снова мы помещаем это в нашу таблицу стилей.
Вы можете видеть мой рост и мою ширину.
Если бы я не включил их по умолчанию, эти div и
абзацы заняли бы всю ширину экрана, и
они были бы очень маленькими, потому что им нужно было бы только достаточно места для того, чтобы иметь этот текст.
Так что давайте продолжим и поиграем с этим.
Обычно, я бы пошел в свою таблицу стилей, и я бы вроде бы
вставлял разные вещи, пробовал разные дисплеи и разные вещи, подобные этому.
Но я надеюсь,
вам будет немного яснее, если вместо этого я сделаю это одновременно.
Таким образом, вы можете следовать вместе со мной с тем, что элемент проверки, или вы
можете идти вперед и изменить код в своем файле, сохранить его, обновить, сохранить его, обновить.
Поэтому я должен проверить элемент здесь, щелкнув правой кнопкой мыши, и
то, что я собираюсь сделать сейчас, я собираюсь щелкнуть правой кнопкой мыши на одном из этих элементов диапазона.
Проверьте Элемент, и он всплывает его для меня.
Любой элемент на вашей странице,
вы можете играть с, вы можете играть только с тем конкретным элементом, который вы
тыкаете прямо там, или я могу сказать, что хочу играть со всеми промежутками.
Так что давайте посмотрим вниз.
Прямо сейчас у меня есть высота и ширина для каждого из моих элементов диапазона.
Но на самом деле они не очень большие.
Так как же мы это изменим?
Если что-то встроенное, но вы хотите дать ему высоту и ширину,
мы спускаемся на дисплей, и я пойду сюда.
И я попробую инлайн-блок.
Бум, сразу мои промежутки захватили эти свойства.
Поэтому до того, как они были встроенными, они были маленькими.
Когда они встроенные блоки, я могу формировать их очень красиво.
И если я меняю их, чтобы просто блокировать, теперь вы можете видеть, что они
друг на друга, потому что элементы блока не любят быть рядом друг с другом.
Последнее свойство, которое я вам покажу, это идея «нет».
Когда у тебя нет, это как будто пролетов даже не существовало.
Вы не сохранили для них места,
это не так, как если бы вы даже знали, глядя на страницу, что они когда-либо были там.
Так интересная вещь, и вы можете использовать ее позже, если хотите, чтобы вещи
появлялись несколько раз, а не другие, но вы не хотите оставлять большое пространство.
Так что, давай, возьми секунду, и
я просто нажму на пару других вещей.
Так что, например, мои divs, я могу пойти и я могу сказать, знаете что, я хочу
сделать только один div, я хочу идти вперед и сделать его встроенным блоком, и давайте посмотрим, что произойдет.
Странно, что я изменил его, и ничего не произошло, и
мне интересно, знаете ли вы почему.
Когда у вас есть встроенный блок, вы говорите о, идите вперед и
поставьте меня рядом с другими людьми, если я подойду.
Но если ваши соседи тоже заблокированы, это не сработает.
Так что теперь, вместо того, чтобы изменить только один, я собираюсь изменить все divs.
И вы можете видеть это, о, потому что они около 45%,
двое из них подходят друг к другу, но последний - нет.
Таким образом, нет никакого хорошего способа чувствовать себя комфортно с дисплеем,
пока вы не возьмете этот код и не начнете переключать вещи.
Что произойдет, если он встроен?
Что произойдет, если это встроенный блок?
Что произойдет, если это будет пролет?
И обратите очень пристальное внимание на то, что недостаточно знать, что
такое дисплей для одного элемента, над которым вы работаете,
вам также нужно знать дисплей для своих соседей.
Но давайте продолжим и поговорим немного больше.
Когда мы говорим о дисплее,
довольно часто также говорить о двух других свойствах.
И это называется float и ясно.
И что float и ясно делают, это они не обязательно говорят, где вы хотите
, чтобы страница была, элемент на вашей странице был конкретно, но
где вы обычно хотите ее поместить.
По умолчанию, когда браузер помещает вещи на страницу,
он начинается в левом верхнем углу.
И он просто начинает их вводить, так что, глядя на ваш сайт, это было бы как
первое, первое, о, следующее - блок, так что лучше положить его под.
И он просто продолжает добавлять вещи в.
Поэтому, если ваш браузер действительно большой, вы можете разместить больше элементов диапазона рядом друг с другом,
если он маленький, вы можете поместиться меньше.
Ну, float позволяет вам изменить положение вещей, и
он говорит, что я хочу, чтобы вы плавали это где угодно,
и если я скажу, плавать вправо, я хочу, чтобы вы положили это как можно дальше направо.
Если я скажу поплавать влево, я хочу, чтобы ты положил его как можно дальше.
Другие элементы в основном знают друг друга, и когда вы используете float,
они не будут перекрываться, но все будет выглядеть немного сумасшедшим.
И когда вы снова добавляете float, вы влияете на соседей,
потому что соседи должны знать, куда вы идете.
Вот почему у нас есть это дополнительное свойство, называемое clear.
Потому что иногда, когда вы кодируете, вы просто хотите убедиться, что вещи не
плывут влево или вправо.
Вы хотите действительно иметь это пространство для себя, и
в этом случае вы можете использовать четкое левое, четкое право или очистить оба.
Очистите влево, чтобы убедиться, что слева ничего не плавает.
Четкое право означает, что справа от вас ничего не плавает.
И ясно оба, как вы можете догадаться,
это означает, что ничто не должно плавать рядом с вами вообще.
Итак, давайте посмотрим еще раз на один пример, где я собираюсь
играть с тем же кодом, но я собираюсь начать использовать float и очистить, а также.
Итак, мы собираемся посмотреть на тот же самый точный файл, который мы только что смотрели,
когда я играл с блоком дисплея, inline, none и т. Д.
Но теперь мы собираемся бросить float и очистить смесь, а также.
Итак, вот код, на который мы смотрим, и вот сайт.
И первое, что я собираюсь сделать, это я буду играть с промежутками здесь, и
я попробую их плавать.
Так что помните, когда вы что-то плаваете, вы в основном говорите, что переместите его
в сторону, как вы можете, и другие элементы почти будут действовать так, как будто
их там нет, но они не будут перекрывать это.
Так что я спущусь сюда, иду на свой поплавок.
Скажи «плавать».
Первое, что я собираюсь сделать, это то, что я просто поплыву налево, а это
значит, что они не будут слишком сильно двигаться.
Я хочу, чтобы вы искали, так
это то, что прямо сейчас между каждым из моих пролетов есть немного пространства.
Когда я изменяю его влево, это пространство уходит, и
div фактически идет под ним, потому что пролеты находятся сверху.
Теперь, когда я пытаюсь изменить его и плавать правильно.
Когда я плаваю правильно, я хочу, чтобы вы заметили, что они не только не имеют
пространства между ними, что они вроде как рядом друг с другом снова.
Но если вы посмотрите, порядок A, B и C отличается.
Потому что первые элементы, которые он помещается на странице, охватывают A и поэтому
он перемещает его как можно дальше вправо.
И тогда, когда он делает промежуток B, он движется так далеко вправо, как только может, и
охватывает C, а также.
Так что это что-то интересное,
и вы можете видеть, что если бы они были слева, divs бы перекрывали их.
Ладно, давайте продолжим и сделаем еще несколько таких вещей.
И я собираюсь изменить все мои divs, так что они тоже.
Пойдем сюда, поплывем налево.
Теперь страница выглядит немного сумасшедшей, потому что все происходит по всему
месту, и вы действительно, вы, вероятно, не хотите, чтобы она выглядела так.
Особенно, если бы мы хотели, чтобы все наши абзацы действительно
были внизу страницы.
Так что я пойду сюда к моим параграфам.
И я пойду вперед и скажу, что я не собираюсь плавать.
Вместо этого я скажу, что я закончил с плаванием,
пожалуйста, прекрати плавать вокруг меня.
И я собираюсь очистить обе стороны.
Итак, в параграфах говорится: «Уберите меня подальше от всего этого плавающего безумия».
Я просто хочу быть здесь.
Плавающие, очищающие, разные вещи вроде этого.
Когда мы делаем такие очень простые примеры кода в лекции,
они не всегда будут иметь такой смысл, как когда вы вводите их как
часть чего-то большего.
Но проблема в том, что я не могу показать вам примеры чего-то большего, потому что вы
все засыпаете около трех или четырех минут в коде.
Так что иди вперед, делай то, что мы всегда делали, и
играй с ними немного, пока не получишь представления о том, что они делают.
С течением времени
вы начнете понимать, когда вы хотите, чтобы они действительно совершали такие действия.