Поэтому одна из вещей, которые вы, возможно, заметили, когда вы проходите через другой
код, заключается в том, что иногда, когда вы связываетесь с высотой и шириной элемента.
Вы узнаете, что он больше не является достаточно большим, чтобы держать весь текст, который вы
хотели показать.
Итак, что вы можете сделать, когда контент больше не помещается
внутри коробки, которую вы сделали с вашей высотой и шириной.
Ну, вы можете использовать переполнение свойств, чтобы определить, как люди будут иметь
доступ к этому контенту, или если они вообще будут иметь доступ к нему.
Четыре значения для переполнения
включают visible, что в основном означает, если вы нарисовали коробку.
И внутри есть целая куча текста,
текст на самом деле выйдет за пределы коробки.
Поэтому, несмотря ни на что, содержимое видимо, даже если оно выходит за пределы строк.
Скрытые делают в значительной степени противоположное.
Там написано: [ЗВУК] Если в этой коробке что-то есть, и оно слишком велико,
оно исчезнет.
Ты его не видишь.
Теперь это не отличная идея, потому что это вызовет проблемы,
если пользователь увеличит размер шрифта в своем браузере.
Так что если вы сделали что-то вроде 600 на 800 пикселей,
и вы думаете, что это будет здорово, без проблем.
Любой сможет прочитать это.
Что произойдет, если кто-то войдет и увеличит размер шрифта?
Ваш ящик не становится больше, но текст делает, поэтому
они могут не видеть содержимое.
Таким образом, третий вариант - дать прокрутку переполнения.
И что это будет делать, это фактически даст горизонтальную и
вертикальную полосу прокрутки элементу.
Даже если это всего лишь абзац, внезапно ваш абзац имеет полосу прокрутки, чтобы
люди могли видеть все, что в нем есть.
Конечное значение авто, и то, что он делает, это говорит, о,
я только добавлю полосы прокрутки по мере необходимости.
В зависимости от того, как человек просматривает сайт прямо сейчас.
Я собираюсь пойти вперед и
перечислить некоторые ресурсы, чтобы показать вам несколько примеров того, как выглядит переполнение.
Но сейчас, мы собираемся идти вперед и продолжать двигаться дальше.
Потому что я хотел поделиться с вами этой идеей других значений отображения.
Опять же браузеры всегда меняются.
HTML5 и будущие версии всегда меняются, и
они пытаются добавить новую поддержку.
Проблема в том, что когда вы видите эти новые
классные инструменты, они не всегда работают в каждом браузере.
Таким образом, встроенный, встроенный блок, блок и никто не будет работать везде.
Но вот еще несколько, которые постепенно начинают получать признание.
А это таблица, сетка и flexbox.
Для сетки и flexbox я оставлю это вам, чтобы играть с ним.
Но я хотел показать вам пример того, где многие мои студенты находят табличный
дисплей действительно полезным.
Как работает отображение таблицы, так это то, что вы не делаете фактическую таблицу с вашим
HTML-кодом, и у вас нет таблицы тегов.
Но вы говорите своему браузеру, что хотите структурировать его так, как будто это таблица.
Таким образом, вы бы сделали любой тип отображения элемента: таблица.
И тогда все, что вы хотите выровнять в хорошие столбцы,
вы будете использовать display: table-cell.
Так что это звучит очень запутанно, поэтому
я хотел убедиться, что я дал вам пример, чтобы пройти со мной.
Поэтому у меня есть код, который в основном просто div,
пара div с некоторыми абзацами в нем.
И то, что я хотел сделать, это я хотел убедиться, что у них не
все то же самое содержание.
Как вы можете видеть, каждый из divs теперь рядом друг с другом, потому что
мы сказали, что не хотим, чтобы они были друг под другом.
Но на самом деле это не то, на что ты надеялся.
Итак, давайте продолжим и попробуем добавить этот поплавок влево.
Спаси, я пойду сюда и освежусь.
И вы видите, это выглядит немного лучше.
Это здорово, потому что мы хотели, чтобы все было рядом друг с другом.
Но сейчас я собираюсь показать тебе что-то, что не
очень хорошо получается.
И вот эта идея, когда я изменяю его размер.
Теперь вы можете видеть эту идею о том, что переполнение может быть действительно важным, потому что
теперь все выходит за пределы самих divs.
Плюс, у меня действительно нет никакой разницы между ними.
Итак, давайте продолжим и добавим переполнение, скрытый,
или прокрутку, просто чтобы показать вам, о чем я говорил там на секунду.
Я пойду и освежу его.
И теперь вы видите, что все содержится в окне содержимого, и
я могу войти сюда, и я могу прокрутить каждый из них.
Я на самом деле не большой поклонник этого,
потому что мне не нравится, что люди должны знать, что они могут прокручивать.
Поэтому мы собираемся попробовать что-то новое здесь, вместо того, что я собираюсь сделать, это установить
ширину до 30%, и я собираюсь пойти вперед и использовать встроенный блок.
И давайте посмотрим, как это выглядит сейчас.
Мне нужно помнить, я использую новую таблицу стилей, поэтому мне нужно войти и
изменить свой HTML, поэтому я использую эту таблицу стилей.
Количество раз, когда я придумывал эти примеры для вас, где я забыл
изменить таблицу стилей, или я забыл и назвал это неправильно, было очень неловко.
Так что я надеюсь, вы избежите тех же проблем, которые у меня были.
Вот здесь я освежу его.
Вы можете видеть, что это не тот взгляд, на который мы надеемся.
Он изменяет размер, но он просто не делает то, что мы хотим, потому что каждый из них имеет свою
собственную высоту, потому что мы действительно хотим, чтобы он просто соответствовал этому.
Вот где входит ячейка таблицы.
Я собираюсь изменить свой дисплей с встроенного блока на ячейку таблицы.
И на этот раз, когда я пойду на обновление,
я действительно пойму, почему это не сработает.
Но я хочу показать вам, когда я нажимаю «Обновить»,
это выглядит нормально прямо здесь, потому что это так, что все работает.
Теперь в зависимости от того, в каком браузере вы находитесь, это может не сработать.
Потому что на самом деле вы хотите сказать, что если я собираюсь пойти вперед и
сделать эту использованную ячейку таблицы, не забудьте войти в ваше тело и сказать дисплей.
Хорошо, и я собираюсь освежиться, и это будет выглядеть одинаково,
это будет лучший стиль кодирования.
Теперь я попытаюсь поместить много примеров кодирования здесь,
в этом курсе CSS, чтобы вы могли играть с ним.
Но я не могу подчеркнуть, что иногда это не будет работать точно так же
для вас, потому что вы можете использовать другой браузер.
Возможно, вы используете один и тот же браузер, но другую версию.
Самое главное, чтобы вы пошли туда,
и продолжайте пробуждать эти новые ценности, видя, что происходит, и играя с ним.
Когда приходит время для вашего окончательного проекта, именно тогда, чтобы быть действительно конкретным
о том, чтобы убедиться, что все выглядит хорошо в каждом браузере.
Последнее, что я хочу сказать очень быстро, это идея видимости.
И он определяет, будет ли элемент увиден пользователем.
Теперь мы говорили об этом ранее, когда я говорил об отсутствии отображения, но
то, что происходит на видимость, вы можете увидеть, что пространство было оставлено для него.
Там просто ничего нет.
Поэтому, когда вы используете видимость, параметры видны, скрыты или
свернуты, если вы используете таблицы.
Если вы видите это, и вам интересно, в чем разница между отображением и
видимостью.
Просто помните, что при
отображении ничего браузер действует так, как будто его даже нет.
Ты ничего не видишь.
С видимостью скрыта, браузер собирается оставить пространство,
которое этот элемент займет, он просто не показывает его.
Так что, наконец, давайте продолжим рассмотрение.
Дисплей — это лишь один из многих инструментов, которые мы будем использовать для
позиционирования элементов на вашей странице.
Ранний дизайн, решив, что вы хотите, чтобы ваша страница
выглядела, прежде чем вы начнете кодировать, будет легче.
Не кодируйте, думая, что я хочу использовать float правильный дизайн, а затем решите, о,
мне придется использовать float прямо здесь.
Используйте все различные инструменты, которые у нас есть,
такие как элемент проверки, чтобы увидеть ваши различные варианты.
И это сделает вашу жизнь кодирования намного проще.
Мы хотим избежать сохранения обновления, сохранить обновление.
Вместо этого используйте эти инструменты, и
вы обнаружите, что принимаете действительно хорошие решения в своем дизайне и своем коде.
Спасибо.