Краткие теоретические сведения. Общая ширина элемента вычисляется по формуле

ЛАБОРАТОРНАЯ РАБОТА № 1

Исследование свойств контакта полупроводников n- и p- типа с одинаковой шириной запрещённой зоны

Краткие теоретические сведения

Основным элементом большинства полупроводниковых приборов является электронно-дырочный переход (р-n -переход), представляющий собой переходный слой между двумя областями полупроводника, одна из которых имеет электронную электропроводность, а другая - дырочную.

Образование p-n -перехода. P-n -переход в равновесном состоянии.

Рассмотрим подробнее процесс образования p-n -перехода. Равновесным называют такое состояние перехода, когда отсутствует внешнее напряжение. Напомним, что в р -области имеются два вида основных носителей заряда: неподвижные отрицательно заряженные ионы атомов акцепторной примеси и свободные положительно заряженные дырки; а в n -области имеются также два вида основных носителей заряда: неподвижные положительно заряженные ионы атомов донорной примеси и свободные отрицательно заряженные электроны.

До соприкосновения p- и n- областей электроны, дырки и ионы примесей распределены равномерно. При контакте на границе p- и n- областей возникает градиент концентрации свободных носителей заряда и, вследствие этого, диффузия. Под действием диффузии электроны из n -области переходят в p- область и рекомбинируют там с дырками. Дырки из р -области переходят в n -область и рекомбинируют там с электронами. В результате такого движения свободных носителей заряда в приграничной области их концентрация убывает почти до нуля и, в тоже время, в p -области образуется отрицательный пространственный заряд ионов акцепторной примеси, а в n -области положительный пространственный заряд ионов донорной примеси. Между этими зарядами возникает контактная разность потенциалов j к и электрическое поле E к , которое препятствует диффузии свободных носителей заряда из глубины р- и n- областей через р-n- переход. Таким образом область, обеднённая свободными носителями заряда со своим электрическим полем и называется р-n- переходом.

P-n -переход характеризуется двумя основными параметрами:

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

где k – постоянная Больцмана, q – заряд электрона, T – температура, N а и N д – концентрации акцепторов и доноров в дырочной и электронной областях соответственно, p p и p n – концентрации дырок в p - и n- областях соответственно, n i – собственная концентрация носителей заряда в нелегированном полупроводнике, – температурный потенциал. При температуре T = 27 0 С j T ≈ 0,025 В, для германиевого перехода j к = 0,6 В , для кремниевого перехода j к = 0,8 В .

Ширина p-n-перехода (рис.1.1) – это приграничная область, обеднённая носителями заряда, которая располагается в p - и n -областях

где e - относительная диэлектрическая проницаемость материала полупроводника, ε 0 - диэлектрическая постоянная свободного пространства.

Толщина электронно-дырочных переходов имеет порядок (0,1 - 10) мкм . Если и p-n -переход называется симметричным, если > < , то < > и p-n -переход называется несимметричным, причём он в основном располагается в области полупроводника с меньшей концентрацией примеси.

В равновесном состоянии (без внешнего напряжения) через р-n -переход движутся два встречных потока зарядов (протекают два тока). Это дрейфовый ток неосновных носителей заряда и диффузионный ток, который связан с основными носителями заряда. Так как внешнее напряжение отсутствует, и тока во внешней цепи нет, то дрейфовый ток и диффузионный ток взаимно уравновешиваются и результирующий ток равен нулю:

Это соотношение называют условие динамического равновесия процессов диффузии и дрейфа в изолированном (равновесном) p-n -переходе.

Поверхность, по которой контактируют p- и n -области называется металлургической границей. Реально она имеет конечную толщину – δ м . Если δ м << , то p-n -переход называют резким. Если δ м >> , то p-n -переход называют плавным.

Р-n -переход в неравновесном состоянии (при внешнем напряжении, приложенном к нему).

Внешнее напряжение нарушает динамическое равновесие токов в p-n -переходе. P-n -переход переходит в неравновесное состояние. В зависимости от полярности напряжения приложенного к областям в p-n -перехода возможно два режима работы.

Прямое смещение p-n -перехода . Р-n- переход считается смещённым в прямом направлении, если положительный полюс источника питания подсоединен к р -области, а отрицательный к n -области (рис.1.2)

При прямом смещении, напряжения j к и U направлены встречно, результирующее напряжение на p-n -переходе убывает до величины j к - U . Это приводит к тому, что напряженность электрического поля убывает и возобновляется процесс диффузии основных носителей заряда. Кроме того, прямое смещение уменьшает ширину p-n -перехода, т.к. . Ток диффузии, ток основных носителей заряда, становится много больше дрейфового. Через p-n -переход протекает прямой ток:

При протекании прямого тока основные носители заряда р -области переходят в n -область, где становятся неосновными. Диффузионный процесс введения основных носителей заряда в область, где они становятся неосновными, называется инжекцией , а прямой ток – диффузионным током или током инжекции. Для компенсации неосновных носителей заряда накапливающихся в p - и n- областях во внешней цепи возникает электронный ток от источника напряжения, т.е. принцип электронейтральности сохраняется.

При увеличении U ток резко возрастает, температурный потенциал, и может достигать больших величин т.к. связан с основными носителями, концентрация которых велика.

Обратное смещение p-n -перехода возникает когда к p -области приложен минус, а к n -области плюс, внешнего источника напряжения (рис.1.3).

Такое внешнее напряжение U включено согласно j к . Оно увеличивает высоту потенциального барьера до величины j к + U , напряжённость электрического поля возрастает; ширина p-n - перехода возрастает, т.к. , процесс диффузии полностью прекращается и через p-n -переход протекает дрейфовый ток, ток неосновных носителей заряда. Такой ток p-n -перехода называют обратным, а поскольку он связан с неосновными носителями заряда, которые возникают за счет термогенерации, то его называют тепловым током и обозначают –I 0 , т.е.

Этот ток мал по величине т.к. связан с неосновными носителями заряда, концентрация которых мала. Таким образом, p-n -переход обладает односторонней проводимостью.

При обратном смещении концентрация неосновных носителей заряда на границе перехода несколько снижается по сравнению с равновесной. Это приводит к диффузии неосновных носителей заряда из глубины p - и n -областей к границе p-n -перехода. Достигнув её неосновные носители попадают в сильное электрическое поле и переносятся через p-n- переход, где становятся основными носителями заряда. Диффузия неосновных носителей заряда к границе p-n -перехода и дрейф через него в область, где они становятся основными носителями заряда, называется экстракцией . Экстракция и создает обратный ток p-n- перехода – это ток неосновных носителей заряда.

Величина обратного тока сильно зависит от температуры окружающей среды, материала полупроводника и площади p-n -перехода.

Температурная зависимость обратного тока определяется выражением , где T 0 - номинальная температура, T - фактическая температура, T * - температура удвоения теплового тока

Тепловой ток кремниевого перехода много меньше теплового тока перехода на основе германия << (на 3-4 порядка). Это связано с j к материала.

С увеличением площади перехода возрастает его объём, и, следовательно, возрастает число неосновных носителей, появляющихся в результате термогенерации, и тепловой ток растёт.

Итак, главное свойство p-n -перехода – это его односторонняя проводимость. Его ВАХ приведена на рис.1.4.

Цель работы – изучение влияния температуры на функционирование p-n- перехода. В данной работе снимаются вольт-амперные характеристики германиевого и кремниевого переходов при трёх разных температурах.

Здравствуйте, уважаемые читатели блога сайт. Сегодня мы поговорим о том, как можно задавать размеры для области контента с помощью height и width и как настроить отображение этого контента в случае, если его будет больше, нежели сможет поместиться в отведенное для него место (css правило overflow со значениями hidden, scroll, auto).

Текст первого абзаца

Текст второго

Т.к. width и height для этих параграфов не заданы, то по умолчанию браузер сам рассчитывает их исходя из своего собственного понимания значения Auto. В результате абзацы занимают по ширине все доступное им место, а по высоте соответствуют высоте заключенного в них контента.

Давайте теперь внесем первое изменение и зададим жестко широту первого абзаца (width:50px):

Текст первого

Текст второго

В общем-то произошло ожидаемое — размер по горизонтали уменьшился до заданной в width:50px величины, ну, а высота параграфа по-прежнему формируется благодаря height:auto (умолчательному значению). В результате она стала такой, чтобы вместить в себя весь текст.

Но давайте теперь ограничим и высоту контейнера с помощью height:15px.

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

Overflow означает «сверхпоток» или, другими словами, «переполнение контента». Оно говорит о том, что должно произойти с содержимым, если он не уместился в пределы той области (контейнера), которая ему была отведена.

У Overflow имеется несколько допустимых значений, но по умолчанию используется visible (показывать) :

Именно поэтому в нашем последнем примере текст верхнего абзаца наехал на нижний (по умолчанию использовалось overflow:visible — показывать содержимое не уместившийся в контейнер). Мы могли бы использовать другую крайность — overflow:hidden . Тогда бы все, что не поместилось внутри контейнера, не показывалось бы на вебстранице:

Другие два значения этого CSS свойства позволяют скролить не уместившееся в контейнер содержимое (что-то похожее мы уже наблюдали, когда изучали ). Итак, scroll отобразит полосы прокрутки по вертикали и горизонтали даже в том случае, если содержание благополучно умещается в отведенном для него контейнере:

Но гораздо более логичным будет использование значения Auto для Overflow, если вам необходимо сделать полосы прокрутки. В этом случае браузер сам будет рассчитывать, когда нужно их отображать и по каким именно осям.

Например, в случае использования overflow:auto мы получим возможность прокрутки только по той оси, где содержимое не умещается в границах контейнера:

Текст первого

Текст второго

Резюмируя можно сказать, что Overflow позволяет довольно гибко настроить варианты показа контента в том случае, когда он вылазит за пределы своего контейнера. У вас будет возможность выехавший контент показывать (visible), не показывать (обрезать — hidden), либо делать обязательную прокрутку (scroll) или же прокрутку по необходимости (auto).

Есть еще варианты написания этого правила относящиеся к CSS3, но которые поддерживаются всеми браузерами, а значит их можно будет смело использовать. Я говорю про варианты overflow-x и overflow-y, которые позволяют задавать или не задавать прокрутку по отдельным осям (x — горизонтальная, y — вертикальная).

Если вам, например, нужно сделать так, чтобы по горизонтали прокрутка не появлялась никогда, а по вертикали появлялась бы только по необходимости (если контент не умещается), то для Html элемента нужно будет прописать overflow-x:hidden и overflow-y:auto. Все, задача будет решена, ибо данный финт ушами поддерживается всеми браузерами.

Height и width в процентах — зачем нужен doctype

Теперь давайте поговорим о том, от чего считается ширина заданная в процентах. Помните, в начале статьи я обещал на этом еще заострить наше внимание. Ну, собственно, CSS правило width здесь не является исключением и точно так же, как и padding и margin, считается в процентах от горизонтального размера контейнера с контентом.

Несколько запутаннее обстоит дело с высотой области контента заданной в процентах. Было бы логично предположить, что аналогично — от высоты контейнера. Но тут мы с вами начинаем сталкиваться с дуализмом (двумя моделями поведения) — как делали раньше и как делают сейчас по принятым стандартам. В связи с этим следует еще раз затронуть тему режимов отображения и рассмотренную нами ранее .

Исторически так сложилось, что после принятия стандартов оставалось все равно большое количество документов, сформированных по старым правилам чистого языка Html и с ними нужно было что-то делать. В то же время тоже развивался (выделился язык стилевой разметки и устарели некоторые теги и атрибуты), поэтому понадобилось каким-то образом показать браузеру, по каким именно стандартам нужно будет ему разбирать данный код.

Для того, чтобы отделить документы новые (которые учитывали все появившиеся стандарты) и старые (не учитывающие зачастую ничего, кроме чистого Html), компанией Мелкософт было предложено использовать небольшую фишечку из только что появившегося тогда языка XML. Фишечка эта была служебной и называется сейчас декларация doctype.

Выглядеть она может по-разному (читайте об этом подробнее в упомянутой чуть выше статье), но завсегда будет работать такой вариант:

Таким образом браузер получил маркер того, по каким стандартам ему разбирать документ. Если декларация doctype проставлена, тогда он переходит в режим соответствия стандартам (standarts mode). Если же в коде документа на его первой строчке doctype обозреватель не обнаружит (или она будет написана не правильно, что идентично ее отсутствию), то тогда он переходит в так называемый режим уловок (quirks mode).

Документ, в котором отсутствует doctype, в браузере будет отображаться таким образом, как будто бы он очень старый (старинный). Если в этот же документ добавить декларацию, то обозреватель уже сбросит свой налет старины и начнет работать с кодом документа по всем принятым сейчас стандартам.

Вот только понятие старины очень разное. Какая, например, старина может быть у популярного сейчас обозревателя Google Chrome, который появился-то только в 2008 году? У IE, естественно, история есть и довольно богатая. Поэтому все браузеры любой версии будут отображать документ без декларации (в режиме quirks mode или уловок) точно так же, как это бы делал старинный , ибо именно эта версия считается базовой.

Почему я так долго говорил про режимы отображения браузеров? А потому, что для этих двух режимов задание высоты (height) области контента в процентах очень сильно отличается по отношению к расчету этой самой высоты.

Задание высоты (в процентах) области с контентом в режиме следования стандартов (standarts mode — когда прописан правильный doctype в начале документа) будет вообще не возможно, если не будет где-либо задана высота для контейнера, в который заключено это содержимое (заданная вами в процентах высота будет игнорироваться).

Если декларацию doctype из кода документа убрать, то мы увидим следующую картину:

Для режима следования стандартам (в начале документа прописана декларация) необходимо предварительно задать высоту контейнера (в нашем случае для Div контейнером будет служить тег Body) и только тогда браузер правильно отработает height:100%:

В итоге получились два совершенно разных подхода при задании высоты области контента в процентах, поэтому во избежании проблем советую вам в обязательном порядке указывать правильную декларацию doctype в начале всех ваших документов (вебстраниц). Есть и еще один пример, когда разница между режимом следования стандартам и режимом уловок будет колоссальной.

Если вы зададите для какого-либо Html элемента height и width для области контента, а также укажите для этого тега внутренние отступы (padding) и ширину рамки (border), то в режиме уловок (quirks mode — без прописанной декларации) в разных браузерах это все может быть истолковано по-разному.

В старом браузере IE 5.5 внутренние отступы и ширина рамки будут отсчитывать внутрь от заданных через height и width размеров. Т.е. общий размер элемента будет соответствовать тому, что задано в этих CSS свойствах (это устаревшая схема, которая сейчас не используется).

В остальных же современных браузерах отступы padding и ширина рамки border будут прибавляться к тем размерам, что были заданы в height и width. Т.е. в этом случае (режим уловок без doctype) изначально заданные размеры области контента будут расширены на величину внутренних отступов и рамки.

Ну, а если в документе прописать директиву, то абсолютно во всех современных и старых браузерах этих проблем с двойственностью подхода уже можно будет запросто избежать. В этом случае и в IE 5.5 величина внутренних отступов и ширина рамки будет суммироваться с размерами области контента, как этого и требуют современные стандарты CSS. Поэтому во избежании всегда прописывайте doctype .

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
Float и clear в CSS - инструменты блочной верстки
Padding, Margin и Border - задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right)
Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
Селекторы тега, класса (class), Id и универсальные, а так же селекторы атрибутов в современном CSS Разное оформление для внутренних и внешних ссылок через CSS
Приоритеты в Css и их повышение за счет Important, комбинация и группировка селекторов, пользовательские и авторские стили
Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице
Единицы размеров (пиксели, Em и Ex) и наследование правил в CSS

Здравствуй , уважаемый читатель.

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

Перед изучением данного урока пройдите предыдущие уроки:

Теория и практика

В прошлом уроке мы рассмотрели что такое блочная модель, внутренние и внешние отступы. В этом мы рассмотрим лишь два свойства: высоту и ширину блока. Высота в CSS задается свойством height , а ширина свойством width . Сразу посмотрим в коде на реальном примере(возьмем пример из прошлого урока):

А в CSS для каждого блока

зададим ширину в 200 пикселей(px):

Посмотрим как это выглядит в браузере:

Как видите мы задали определенную высоту и ширину. Если бы мы задали высоту меньше, чем помещается текст, тогда бы текст вылез за пределы блока. Поэкспериментируйте с высотой и шириной. Сначала тяжело будет на глаз определять необходимый размер в пикселях, но со временем привыкнете.

Это небольшой и простой урок. Попробуйте сами изменять размеры блока и посмотрите что получиться. Практика — самый быстрый способ научиться чему-либо!

Здравствуйте, уважаемые читатели! Сегодня мы рассмотрим как задавать размеры блочных элементов веб страницы с помощью css свойств и настроить отображение контента в случае если он не помещается в элементе.

width и height — ширина и высота элементов в css

С помощью атрибутов стиля width и height можно задавать соответственно ширину и высоту блочных элементов:

width: auto|<ширина>|inherit
height: auto|<ширина>|inherit

В качестве значений можно использовать любые доступные в css единицы измерения - например, пикселы (px), дюймы (in), пункты (pt) и др.:

p {width:200px; height:150px}

Кроме абсолютных единиц можно задавать относительное значение размера элементов в процентах. В этом случае ширина и высота элемента будет зависеть от ширины и высоты родительского элемента. Если родитель явно не указан, то размеры будут зависеть от окна браузера.

div {width:40%;}

Значение auto отдает управление размерами элемента веб-браузеру и является значением по умолчанию. В этом случае размеры элемента будут такие, чтобы в нем полностью поместилось все его содержимое.

Рассмотрим несколько примеров.

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

Результат:

В этом примере мы создали блок div и вложили в него абзац p с текстом. Для div-а мы строго задали размеры 300 на 300 пикселей. У элемента p значения свойств width и height равны auto, поэтому как видно на скриншоте, его ширина установилась равной ширине родительского элемента, а высота стала такой, чтобы в нем поместился весь содержащийся в абзаце текст.

Теперь изменим css настройки для абзаца p и зададим фиксированные размеры:

Layer2 {
background: #eee;
width:250px;
}

Результат:

Как видим ширина абзаца стала уже и равна 250 пикселей, а его высота увеличилась так, чтобы уместился текст, так как параметр height остался равным auto.

Теперь давайте зададим высоту и ширину абзаца в процентах:

Layer2 {
background: #eee;
width:50%;
height:50%;
}

Результат:

Как видно на картинке, ширина элемента p стала равна половине ширины элемента div. А высота увеличилась и стала равна 75 процентам высоты div.

При задании ширины и высоты каких-либо элементов в относительных единицах, может понадобиться указать минимальные и максимальные возможные размеры. Ведь, например, при изменении размеров окна браузера размеры элемента могут уменьшаться и увеличиваться до таких размеров, что удобочитаемость сайта станет очень низкой.

Определить минимальную ширину и высоту можно с помощью атрибутов min-width и min-heigh:

min-width: <ширина>
min-height: <высота>

Аналогичные атрибуты стиля max-width и max-height позволяют задать максимальные размеры:

max-width: <ширина>
max-height: <высота>

Понятно, что при задании максимальных и минимальных значений высоты и ширины, размеры элемента не смогут стать больше максимального и меньше минимального значений.

Стоит уточнить, что задание параметров height и width имеет смысл только для блочных тегов , так как для строчных элементов эти параметры браузером не обрабатываются.

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

Например, уменьшим размеры абзаца p из выше рассмотренных примеров до 100 пикселей:

Layer2 {
background: #eee;
width:100px;
height:100px;
}

Результат:

Как видно, текст вышел за границы абзаца и выглядит это не очень красиво. Для избежания подобных ситуаций существует правило css — overflow.

Параметр переполнения overflow для скрытия (hidden, visible) или прокрутки (scroll, auto) контента

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

Текст первого абзаца

Текст второго абзаца

Результат:

Так как ни ширина ни высота для абзацев не заданы, то браузер самостоятельно рассчитывает их исходя из своего собственного понимания значения auto. В результате абзацы по ширине заняли все доступное пространство, а по высоте в соответствии с содержащимся в них контентом.

Теперь у первого абзаца ограничим ширину:

Текст первого абзаца

Текст второго абзаца

Результат:

Ширина абзаца ожидаемо уменьшилась, а высота установилась такой, чтобы вместить в себя весь текст.

Ну а теперь ограничим у первого абзаца и высоту:

Текст первого абзаца

Текст второго абзаца

В результате получилось, что текст в такой ограниченный абзац не влазит и поэтому он наехал на область нижнего соседа. Соответственно прочитать текст ни в первом ни во втором абзацах практически не возможно. Именно для управления поведением контента в таких ситуациях существует правило overflow :

overflow: visible|hidden|scroll|auto|inherit

По умолчанию overflow принимает значение visible, которое сообщает браузеру, чтобы он отображал содержимое не уместившееся в контейнере. Результат можно увидеть на примере выше.

Правило скрывает все, что не помещается в контейнере:

Значение scroll отобразит в элементе по вертикали и горизонтали полосы прокрутки даже в том случае, если все содержимое умещается:

Текст первого абзаца

Текст второго абзаца

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

Текст первого абзаца

Текст второго абзаца

Результат:

Для настройки полос прокрутки можно также использовать атрибуты стиля overflow-x и overflow-y, которые позволяют настраивать отображение прокрутки по отдельным осям. Таким образом отвечает за горизонтальную ось , а за вертикальную ось .

Поэтому если вам, например, нужно чтобы в абзаце горизонтальная прокрутка не появлялась никогда, а вертикальная появлялась только по необходимости, то достаточно написать следующее правило css:

p{overflow-x:hidden;overflow-y:auto;}

И задача будет решена.

На этом все. До новых встреч. Не забудьте подписаться на обновления блога и буду благодарен если воспользуетесь кнопочками социальных сетей.

По умолчанию для блочных элементов используется автоширина. Это означает, что элемент будет растянут по горизонтали ровно на столько, сколько есть свободного места. Высота блочных элементов по умолчанию устанавливается автоматически, т.е. браузер растягивает область содержимого в вертикальном направлении так, чтобы отобразилось все содержимое. Чтобы установить собственные размеры для области содержимого элемента, вы можете использовать свойства width и height .

CSS свойство width позволяет задать ширину области содержимого элемента, а свойство height высоту области содержимого:

Обратите внимание, что свойства width и height определяют размер только области содержимого, чтобы вычислить общую ширину блочного элемента, нужно сложить ширину области содержимого, левого и правого внутренних отступов и ширину левой и правой рамки. То же самое касается и общей высоты элемента, только все значения вычисляются по вертикали:

Для данного абзаца зададим только ширину и высоту.

Этот абзац содержит, кроме ширины и высоты, внутренний отступ, рамку и внешний отступ.

Попробовать »

В примере хорошо видно, что второй элемент занимает больше пространства, чем первый. Если посчитать по нашей формуле, то размеры первого абзаца - 150x100 пикселей, а размеры второго абзаца:

Общая высота:	5px	+	10px	+	100px	+	10px	+	5px	= 130px
	верхняя рамка		верхний отступ		высота		нижний отступ		нижняя рамка

то есть 180x130 пикселей.

Переполнение элементов

После того как вы определили для элемента ширину и высоту, стоит обратить внимание на один немаловажный момент - содержимое, расположенное внутри элемента, может превысить указанный размер блока. В этом случае часть содержимого будет выходить за границы элемента, чтобы избежать этого неприятного момента, можно воспользоваться CSS свойством overflow . Свойство overflow сообщает браузеру, как нужно поступить в том случае, если содержимое блока превышает его размер. Это свойство может принимать одно из четырех значений:

• visible - значение, используемое браузером по умолчанию. Указание этого значения будет иметь тот же эффект, что и отсутствие установки свойства overflow.
• scroll - добавляет к элементу полосы прокрутки по вертикали и горизонтали.
• auto - добавляет полосы прокрутки при необходимости.
• hidden - скрывает часть содержимого, которое выходит за границы блочного элемента.