Здравствуйте, уважаемые читатели блога сайт. Сегодня мы поговорим о том, как можно задавать размеры для области контента с помощью 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
В случае HTML-документов теги работают больше на разметку контента, чем на указание того, как он должен быть представлен. Больший контроль над представлением достигается с помощью стилей. В этой статье я рассмотрю те стили, которые связаны с форматированием абзаца в HTML .
Тег
В HTML позволяет задать абзацы, а атрибут align выравнивает их по левому краю, по правому краю, по центру или по ширине. Помимо них мы будем использовать глобальный атрибут style .
Выравнивание абзаца
Можно выровнять абзац, используя атрибут align со следующими значениями:
text-align: left|right|center|justify|initial|inherit;
Скопируйте следующий код в файл .html .
Этот абзац выровнен по центру
Этот абзац выровнен по правому краю
Этот абзац выводится в окне браузера, выровненным по ширине. Распределенный по ширине абзац выравнивается по правому и по левому краю за счет добавления дополнительных пробелов. Вы можете видеть, что края выровненного по ширине абзаца соответствуют краям абзацев, выровненных по левому и по правому краю. В выровненном по левому краю абзаце левый край является ровным, а в абзаце, выровненном по правому краю - правый. Вы видите, что у этого абзаца оба края являются ровными? Это достигается благодаря стилю text-align:justify.
В окне браузера HTML код абзаца выглядит следующим образом.
Интервалы между строками
Вы можете управлять междустрочным интервалом абзаца с помощью style=line-height . Используйте атрибут style со следующими значениями:
line-height: normal|number|length|initial|inherit;
Ниже приведен пример HTML-кода , который выводит абзацы с различными междустрочными интервалами:
В этом параграфе используются два значения для атрибута style. Первый line-height:1.5 определяет полуторный междустрочный интервал для абзаца, а второе значение text-align:justify определяет, что текст абзаца должен распределяться по ширине.
Этот абзац имеет двойной междустрочный интервал и выровнен по ширине. line-height:2 определяет двойной интервал. Атрибут style не обязательно должен иметь два значения. Но если вам нужно задать два значения, вы можете сделать это, разделив их точкой с запятой.
Ниже приведено несколько различных способов использования значения line-height для атрибута style :
: Устанавливает межстрочный интервал 13 пикселей;
: Устанавливает в HTML расстояние между абзацами в 200% относительно текущего размера шрифта;
: Устанавливает высоту строки 14 пикселей.
Отступы
Я использовал термин »отступы «, чтобы его было проще понять. Но в HTML мы используем промежутки, чтобы создать вокруг объекта пустое пространство. Можно использовать атрибут style со значением padding , чтобы задать для абзаца отступ слева или справа.
Ниже приводится пример абзацев с отступом слева и справа:
Этот абзац не имеет отступа, он просто выровнен по ширине. Посмотрите на атрибут style элемента P для этого абзаца.
Для этого абзаца я задал отступ слева в 30 пикселей с помощью стиля padding-left:30px. Также этот абзац выровнен по ширине с помощью стиля text-align:justify. Как вы уже знаете, мы можем использовать несколько значений для атрибута Style, разделяя их точкой с запятой.
А этот абзац имеет отступ справа в 30 пикселей, но не имеет отступа слева. Он также выровнен по ширине. Значение ‘padding-right’ атрибута style задает отступ справа. Если вы не видите эффекта, уменьшите ширину окна браузера, чтобы абзац HTML, выровненный по ширине, отображался надлежащим образом.
Отступы между абзацами (отступ перед и отступ после абзаца)
В HTML или CSS нам это не нужно. Мы можем просто указать стиль padding для элемента
Padding-top и padding-bottom задают пустое пространство до и после абзаца, которое работает, как отступ сверху или снизу. Посмотрите на приведенный ниже пример тега
Я установил для первого абзаца HTML отступ 10 пикселей перед вторым и 50 пикселей после второго абзаца:
Для этого абзаца не заданы отступы до или после. Это обычный абзац, выровненный по ширине. Как вы уже знаете, мы можем выровнять абзац по ширине с помощью кода style=”text-align:justify” внутри тега.
Этот абзац выронен по ширине. Он также имеет отступ в 10 пикселей перед абзацем и 50 пикселей после. Внутри тега я задал 3 стиля.
Это обычный абзац без отступов и с выравниванием по умолчанию.
Что следует помнить
- Абзац HTML может быть выровнен с помощью атрибута align или стиля text-align ;
- HTML будет отображаться по-разному в зависимости от размеров экрана, размеров окна браузера;
- Добавление дополнительных пробелов или пустых строк в HTML-код не влияет на вывод. Браузер удаляет все лишние пробелы;
- Теги задают, что должно отображаться, а стили определяют, как это должно выводиться;
- Стили могут быть заданы тремя различными способами — встроенные (внутри тегов
), внутренние (внутри того же HTML-файла с помощью элемента
Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.
Результат:
В этом примере мы создали блок 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;}
И задача будет решена.
На этом все. До новых встреч. Не забудьте подписаться на обновления блога и буду благодарен если воспользуетесь кнопочками социальных сетей.
Эта объемная статья учебника будет посвящена важным темам, задача которых заключается в том, чтобы расставить по полочкам методы работы с блочными элементами, объянить читателю для чего применяется изменение модели вычисления ширины и высоты элементов, как управлять переполнением блочных элементов, и как работать с минимальными и максимальными размерами элементов.
При изучении блочной модели CSS мы разобрали, что свойства width и height устанавливают ширину и высоту внутренней области элемента (content area ), которая может содержать текст, изображения и прочие элементы.
В блочной модели CSS существует разница между значениями ширины и высоты, которые вы задаете для элемента и размером пространства, которое браузер резервирует для его отображения. Общая ширина и высота элементов представляет собой область окна браузера, которая состоит из ширины и высоты внутренних отступов, границ и указанных для них пользовательских значений.
Общая ширина элемента вычисляется по формуле:
div { width : 150px ; /* устанавливаем ширину элемента */ height : 150px ; /* устанавливаем высоту элемента */ padding : 10px ; /* устанавливаем внутренние отступы элемента */ border : 5px ; /* устанавливаем границы элемента */ }В нашем случае это спасает ситуацию, и нам не придется производить каких-то вычислений, и в дальнейшем боятся каких-либо изменений, которые могут потребоваться для наших элементов. Оставим эти не нужные вычисления на стороне браузера и посмотрим на результат нашего примера:
Для окончательного понимания этой модели вычисления ширины и высоты элементов, закрепим полученные знания на следующем примере:
Пример изменения модели вычисления ширины и высоты элементов content-boxclass = "test2" > border-boxЗначение content-box свойства является значением по умолчанию и производит расчёт общей ширины и высоты элемента по классической схеме. На примере ширины:
150 пикселей (пользовательское значение ширины) + 10 пикселей (левый внутренний отступ) + 10 пикселей (правый внутренний отступ) + 10 пикселей (левая граница) + 10 пикселей (правая граница) = 190 пикселей .
Что касается второго элемента, к которому мы применили свойство со значением border-box , то пользовательское значение ширины и высоты элемента уже включают в себя содержание элемента, границы (border) и внутренние отступы (padding). В большинстве случаев применение свойства со значением border-box предпочтительно на страницах, так как делает очевидным конечные размеры элемента и позволяет избежать некоторых непредвиденных ситуаций рассмотренных выше.
Результат нашего примера:
Управление переполнением блочных элементов
В процессе верстки у вас будут возникать такие ситуации, когда содержимое элемента будет отображаться за пределами границ элемента. По умолчанию браузер отображает такое содержимое (переполнение элемента отображается), что в некоторых случаях приводит к визуальным ошибкам. За такое поведение браузера отвечает CSS свойство overflow . Рассмотрим его возможные значения:
Давайте рассмотрим следующий пример:
Пример управления переполнением элемента overflow: visible
class = "test2" >overflow: hidden
Съешь же ещё этих мягких французских булок да выпей чаю.class = "test3" >overflow: scroll
Съешь же ещё этих мягких французских булок да выпей чаю.class = "test4" >overflow: auto
Съешь же ещё этих мягких французских булок да выпей чаю.В данном примере мы разместили четыре блока фиксированной ширины и высоты, для которых указали различные значения CSS свойства overflow :
- Первый блок (значение visible ) – содержимое выходит за границы элемента (значение по умолчанию).
- Второй блок (значение hidden ) – содержимое, которое переполняет элемент обрезается.
- Третий блок (значение scroll ) – переполнение обрезается, но добавляется полоса прокрутки.
- Четвертый блок (значение auto ) – как и при значении scroll , только полоса прокрутки будет добавлена автоматически, если произойдет переполнение блока по определенной оси (x - горизонтальной, либо y - вертикальной), а не отображается на странице постоянно.
Результат нашего примера.
ЛАБОРАТОРНАЯ РАБОТА № 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- перехода. В данной работе снимаются вольт-амперные характеристики германиевого и кремниевого переходов при трёх разных температурах.
