Курс CSS. Урок 40.
Максимальная и минимальная ширина сайта.
Максимальная и минимальная ширина сайта.
Короткое напоминание:
На уроке 19 мы изучили свойство выравнивания блока по ширине (например, width: 200px; и т.п.).
Кроме свойства width на практике также широко используются более гибкие свойства max-width (максимальная ширина элемента) и min-width (минимальная ширина элемента).
Часто эти свойства используются совместно, когда дизайнер хочет обеспечить удовлетворительный вид страницы при любом разрешении экрана пользователя и при любых его действиях по уменьшению ширины окна.
Рассмотрим работу свойств max-width и min-width на примере.
Теперь попробуйте менять вручную ширину окна браузера. Первый блок будет менять свою ширину в зависимости от ширины родительского блока, а второй блок в рамках диапазона 600-650 пикселей.
Обратите внимание, что свойства max-width и min-width не включают в себя значения паддингов(padding), границ(borders) и маржинов(margins).
Теперь перейдем к теории.
Свойство max-width: может иметь следующие значения:
Свойство min-width: может иметь следующие значения:
В примере использовали следующие правила для стилей:
В примере использовали следующий код HTML (ключевые моменты):
Созданные новые классы в файле стилей CSS и код HTML будем также использовать в нашем очередном учебном тестовом примере.
css_040_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_040_001.zip ← скачайте пример, чтобы установить на свой сайт...
На уроке 19 мы изучили свойство выравнивания блока по ширине (например, width: 200px; и т.п.).
Кроме свойства width на практике также широко используются более гибкие свойства max-width (максимальная ширина элемента) и min-width (минимальная ширина элемента).
Часто эти свойства используются совместно, когда дизайнер хочет обеспечить удовлетворительный вид страницы при любом разрешении экрана пользователя и при любых его действиях по уменьшению ширины окна.
Рассмотрим работу свойств max-width и min-width на примере.
В этом блоке отсутствуют свойства определения ширины width, max-width, min-width.
Ширина блока определяется автоматически и полностью зависит от разрешения экрана и ширины родительского элемента.
Ширина блока определяется автоматически и полностью зависит от разрешения экрана и ширины родительского элемента.
В этом блоке заданы свойства определения ширины:
max-width:650px;
min-width:600px;
Величина ширины блока не может выходить за границы указанных значений.
max-width:650px;
min-width:600px;
Величина ширины блока не может выходить за границы указанных значений.
Теперь попробуйте менять вручную ширину окна браузера. Первый блок будет менять свою ширину в зависимости от ширины родительского блока, а второй блок в рамках диапазона 600-650 пикселей.
Обратите внимание, что свойства max-width и min-width не включают в себя значения паддингов(padding), границ(borders) и маржинов(margins).
Теперь перейдем к теории.
Свойство max-width: может иметь следующие значения:
- max-width:none; - Максимальная ширина не задана вообще. Это значение по умолчанию. (No maximum width. This is default.)
- max-width:length; - Определяет максимальную ширину в пикселях (px), в cm, и т.д. Пример: max-width:650px; (Defines the maximum width in px, cm, etc.)
- max-width:% - Определяет максимальную ширину в процентах к содержащему блоку. Пример: max-width:50%; (Defines the maximum width in percent of the containing block)
- max-width:inherit - Определяет, что значение свойства max-width должно быть унаследованно от родительского элемента. (Specifies that the value of the max-width property should be inherited from the parent element)
Свойство min-width: может иметь следующие значения:
- min-width:length; - Определяет минимальную ширину в пикселях (px), в cm, и т.д. Значение по умолчанию:0. Пример: min-width:600px; (Defines the minimum width in px, cm, etc. Default value:0.)
- min-width:% - Определяет минимальную ширину в процентах к содержащему блоку. Пример: min-width:50%; (Defines the minimum width in percent of the containing block)
- min-width:inherit - Определяет, что значение свойства min-width должно быть унаследованно от родительского элемента. (Specifies that the value of the min-width property should be inherited from the parent element)
В примере использовали следующие правила для стилей:
.block_big_css_040 {
background-color: #D2F2F2;
height:60px;
padding: 10px;
outline: 1px solid #72D2D2;
padding: 5px;
margin: 5px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:10px;
}
.block_width_css_040 {
max-width:650px;
min-width:600px;
}
.body_css_040 {
position:relative;
background-color: #D2D2D2;
outline: 0px solid #CCCCCC;
color: #696969;
font: 11px Verdana, sans-serif;
}
.wrapper_css_040 {
min-width:800px;
max-width:1100px;
background-color: #F4F4F4;
margin: 30px auto;
}
.header_css_040 {
height:75px;
background-color: #F8AC18;
background-image: url('images/redHeader.png');
background-repeat: no-repeat;
position:relative;
margin-left: 225px;
margin-right: 225px;
}
.sidebar_css_040 {
width:200px;
height:900px;
background-color: #333355;
outline: 1px solid #CC0000;
}
.sidebarL_css_040 {
float:left;
}
.sidebarR_css_040 {
float:right;
}
.content_css_040 {
padding: 20px 30px;
margin: 0 220px 0 220px;
outline: 1px solid #333333;
}
#pic_new_css_040 {
position:absolute;
top:0;
left:0;
}
#button_css_040 {
position:absolute;
top:-14px;
left:294px;
border:1px solid #F00000;
z-index:10;
}
#bird_css_040 {
position:absolute;
top:-3px;
left:272px;
border:0px solid #000000;
z-index:20;
}
#operator_css_040 {
position:fixed;
width:22px;
height:180px;
top:250px;
left:0px;
}
#operator_css_040 img {
border:none;
}
В примере использовали следующий код HTML (ключевые моменты):
<div id="sidebarL" class="sidebar_css_040 sidebarL_css_040"></div> <div id="sidebarR" class="sidebar_css_040 sidebarR_css_040"></div> <div id="content_css_040" class="content_css_040"> ... </div>
Созданные новые классы в файле стилей CSS и код HTML будем также использовать в нашем очередном учебном тестовом примере.
css_040_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_040_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
