admin / 05.04.2018

Ширина блока css

В современной верстке, на веб-страницах часто можно встретить блоки, которые занимают 100% ширины страницы.

Это выглядит вот так:

 

или так

Давайте разберемся, каким образом можно добиться такого эффекта.

Для примера, давайте рассмотрим следующую ситуацию.

<div style=»background:#c9c;»>    Блок, который должен занимать 100% ширины. </div>

Смотрим на результат, который получился.

В целом хорошо, но по бокам блока видны небольшие отступы, которые портят всю картину. Хотелось бы их убрать.

Первое, что приходит на ум, это присвоить блоку свойство width:100%. Но, это никак не изменит ситуацию. Можете сами в этом убедиться.

<div style=»background:#c9c; width:100%;»>    Блок, который должен занимать 100% ширины. </div>

Поэтому свойство width:100% можете смело убирать.

В чем же реальная причина таких отступов?

Дело в том, что блок div, ширину которого мы хотим сделать 100% хранится в двух родительских элементах body и html. По умолчанию, браузеры задают им определенные значения для свойств padding и margin.

Для того, чтобы решить проблему, нужно всего-лишь обнулить эти отступы. Сделать это очень просто:

html, body {padding:0; margin:0;}

Смотрим, как выглядит блок теперь.

Все отлично, пространство, которое было по бокам, было убрано.

 

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

Услуга верстки посадочных страниц.

Высота и ширина элемента

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

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

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

Чтобы применить верстку для разных экранов, поможет правило стилей @media. Например,

@media (max-width:1024px;) {

.all {padding: 10px;}

}

Данная запись говорит о том, что для класса all будет применены отступы в 10px в том случае, когда разрешение экрана будет до 1024px.

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

@media (min-width:1024px;) and (max-width:1640px) {
        .all {padding: 10px;}

        table {width:80%}
}

В этом случае свойства стилей будут применены для экранов, которые используют разрешения от 1024 до 1640px.

В том случае, если для определенного разрешения будет большое количество различных стилей, то рациональнее будет вынести их в отдельный файл. Для этого, при указании пути из основной страницы сайта, нужно выполнить такую запись в пределах <head>: 

<link rel=’stylesheet’ type=»text/css» href=’css/style.css’ />

<link rel=’stylesheet’ type=»text/css» media='(min-width: 1024px)’ href=’css/style1024.css’ />

<link rel=’stylesheet’ type=»text/css» media='(max-width: 1024px) and (min-width: 800px)’ href=’css/style800.css’ />

Когда нужно указать правила только для мобильных устройств (планшеты, смартфоны), то в данном случае применяется запись max-device-width или min-device-width для обозначения максимального и минимального разрешений соответственно.

Также можно обозначать использование правил только для экранов мониторов, при этом применяется атрибут — screen. Запись будет иметь вид:

@media screen (max-width:1380px) { … }

Она обозначает, что стили будут применены только к настольным компьютерам, с шириной экрана до 1380px.

Таким же образом, вместо screen, можно указывать handheld (мобильные устройства), print (принтеры), projection (проекторы), tv (телевизоры).

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

width в процентах%

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

<article class=»clearfix»>

Вы даже можете использовать и что бы ограничить максимальный и минимальный размер картинки!

</article>

percent width layout

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

<div class=»container»><section>

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

</section><section>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

Высота div равная ширине на CSS

Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

</section>

НазадДалее

13 / 19

Адаптируем страницу под размер окна браузера

В настоящее врямя существует множество цифровых устройств с различными размерами экранов, от смартфонов до телевизоров с диагональю 42 дюйма и выше. Как полагается, на всех этих устройствах различные разрешения (примерно от 320х240 до 1920х1200) и под каждое из этих разрешений часто бывает необходимо адаптировать веб-страницу. Делается это при помощи media queries — части спецификации CSS3, позволяющей задать область действия селектора. Media queries представляет собой блок с указанием параметров устройства вывода, такие как тип, ширина и высота окна браузера, разрешение, ориентация в пространстве. Начинается всё с правила @media, следом за которым записываются типы устройств, логические операторы и медиа-функции. В списке ниже отметим все 3 логических оператора.

  1. and — логическое «И», применяется для объединения нескольких условий;
  2. not — логическое «НЕ», применяется для отрицания какого-либо условия;
  3. , — логическое «ИЛИ», если хотя бы одно из условий соблюдается, тогда стиль будет применён.

Теперь рассмотрим медиа-функции. С их помощью задаются технические характеристики устройств (например размер окна браузера). Их 12 штук в настоящее время.

  1. aspect-ratio (min-aspect-ratio, max-aspect-ratio) — определяет соотношение ширины к высоте отображаемой области. Обозначается 2/3 например, то есть 2 числа, разделённые знаком «/»;
  2. color (min-color, max-color) — определяет количество бит на один канал цвета. Значение min-color:2 обозначает, что каждый из трёх каналов цветовой системы RGB может отображать 22 оттенков и все вместе 4*4*4=64 различных цвета. Если значение не указано вообще, тогда проверяется цветное оно или нет;
  3. color-index (min-color-index, max-color-index) — определяет количество цветов, которое поддерживает устройство;
  4. device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio) — определяет соотношение сторон экрана устройства (2 числа через слэш, например 4/3);
  5. device-height (min-device-height, max-device-height) — определяет всю доступную высоту экрана устройства или печатной страницы;
  6. device-width (min-device-width, max-device-width) — определяет всю доступную ширину экрана устройства или печатной страницы;
  7. grid — определяет, что это устройство с фиксированным размером символов (терминал или телефон);
  8. height (min-height, max-height) — задаёт высоту отображаемой области;
  9. monochrome (min-monochrome, max-monochrome) — определяет, что устройство монохромное, в случае присвоения какого-либо значения, обозначается количество бит на на один пиксель. Например, значение 8 равнозначно 28 оттенкам цвета монохромного дисплея;
  10. orientation — определяет, что устройство находится в альбомном режиме, значение landscape или портретном значение portrait;
  11. resolution (min-resolution, max-resolution) — определяет разрешение устройства в dpi (точек на дюйм) или dpcm (точек на сантиметр);
  12. scan — определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, в прогрессивной развёртке кадр передаётся и показывается целиком;
  13. width (min-width, max-width) — задаёт ширину отображаемой области;

А теперь пример.

Размеры блочных элементов в CSS

Создадим веб-страницу, а стиль для неё зададим при помощи media queries.

<html>
 <head>
  <title>Пример использования media queries</title>
  <link rel=»stylesheet» type=»text/css» href=»mediastyle.css»>
 </head>
 <body>
  <div id=»main»></div>
   <div id=»header»>Это шапка сайта.</div>
   <div id=»topmenu»><a href=»#»>Главная</a> | <a href=»#»>Новости</a> | <a href=»#»>О нас</a> | <a href=»#»>Контакты</a></div>
   <div id=»content»>Это блок с контентом (основным содержимым страницы).</div>
   <div id=»sidebar»><a href=»#»>Статья 1</a> <a href=»#»>Статья 2</a> <a href=»#»>Статья 3</a> <a href=»#»>Статья 4</a> <a href=»#»>Статья 5</a></div>
   <div id=»footer»>Это подвал.</div>
  </div>
 </body>
</html>

Теперь задаём таблицу стилей:

#main {
font-size:14px;
}
@media screen and (max-width:800px){
 #header{
 background:#ff6633;
 width:100%;
 height:10%;
 }
 #topmenu{
 text-align:center;
 background-color:#ffcc66;
 width:100%;
 height:12%;
 }
 #topmenu a{
 color:blue;
 text-decoration:none;
 }
 #topmenu a:hover{
 color:blue;
 text-decoration:underline;
 }
 #content{
 background-color:#ffccff;
 float:left;
 width:80%;
 height:68%;
 }
 #sidebar{
 float:left;
 background-color:#ff9966;
 width:20%;
 height:68%;
 }
 #sidebar a{
 display:block;
 padding-bottom:3px;
 color:blue;
 text-decoration:none;
 }
 #sidebar a:hover{
 color:blue;
 text-decoration:underline;
 }
 #footer{
 clear:both;
 background-color:#ffff33;
 width:100%;
 height:10%;
 }
}
@media screen and (min-width:800px){
 #main {
 width:800px;
 margin:0 auto;
 }
 #header{
 background:#ff6633;
 width:800px;
 height:100px;
 }
 #topmenu{
 text-align:center;
 background-color:#ffcc66;
 width:800px;
 height:30px;
 }
 #topmenu a{
 color:blue;
 text-decoration:none;
 }
 #topmenu a:hover{
 color:blue;
 text-decoration:underline;
 }
 #content{
 background-color:#ffccff;
 float:left;
 width:650px;
 height:400px;
 }
 #sidebar{
 float:left;
 background-color:#ff9966;
 width:150px;
 height:400px;
 }
 #sidebar a{
 display:block;
 padding-bottom:3px;
 color:blue;
 text-decoration:none;
 }
 #sidebar a:hover{
 color:blue;
 text-decoration:underline;
 }
 #footer{
 clear:both;
 background-color:#ffff33;
 width:800px;
 height:50px;
 }
}

Рассмотрим теперь сам код. С html-документом всё понятно, подключаем к нему стиль mediastyle.css. В таблице стилей сначала задаём размер шрифта. Далее говорим, что если ширина экрана (окна браузера) меньше, чем 800 пикселей, тогда для него будут выполняться следующие правила и задаём размеры всех блоков в процентах от ширины окна. Если же ширина экрана больше, чем 800 пикселей, задаём размеры всех блоков в пикселях и устанавливаем местоположение содержимого по центру страницы, при помощи значения свойства margin:0 auto;. Здесь используем для позиционирования плавающие блоки. На этом закончим изучение CSS. Пример созданной нами страницы можно увидеть здесь. Более подробно изучить каскадные таблицы стилей можно при помощи различной литературы и всемирной паутины.

<<Предыдущая | В раздел

Казалось бы что сложного в вёрстке. HTML и CSS даже не языки программирования. HTML страница это просто блоки размещённые в нужном месте. На самом деле всё не так просто. Садиться за вёрстку не разобравшись в нюансах блочной модели значит убить много времени на подгон результатов методом тыка каждый раз удивляясь неожиданным результатам или их отсутствию. В сайтостроении как и в строительстве, если хотите построить что-нибудь посерьёзней забора нужно знать тонкости.

css свойства для определения высоты и ширины блока.

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

Размеры блока можно менять использую свойства height и width.

Как задавать в css размер блока

Эти свойства задаются не для всего блока а для его содержимого. Это нужно помнить потому что кроме содержимого на размер блока оказывают влияние ещё два свойства — border и padding. По названию можно понять что border определяет границу. На картинке граница обозначена красной линией. Пространство между границей и содержимым определяют с помощью свойства padding. Если его не задать то текст на картинке ниже вплотную прижмётся к границе.

Таким образом высчитывая размер блока кроме width и height нужно учитывать padding и border. Для примера посчитаем размер блока для которого заданны следующие значения 

  1. div{
  2. border:5pxsolidred;
  3. padding:10px;
  4. width:200px;
  5. }

Ширина блока 200px+10px*2+5px*2=230px

Чтобы не забивать голову арифметикой и всегда точно знать размер блока есть свойство box-sizing. Принимает три значения.

  1. content-box — Значение заданные в width и height относятся только к содержимому.
  2. padding-box — Значение заданные в width и height определяют размер содержимого плюс размер отступа(padding).
  3. border-box — Значение заданные в width и height определяют размер содержимого плюс отступ(padding) плюс граница(border)

Если в пример выше добавить строчку

размер блока будет заявленные 200px, а ширина содержимого уменьшится до 200px-10px*2-5px*2=170px.

margin как правильно задать расстояние между блоками.

Говорить о блоках и не упомянуть о margin будет неправильно тем более рассказать есть что. Для тех кто не в курсе margin определяет свободное пространство вокруг блока. В отличии от padding здесь не всё так очевидно. Рассмотрим два блока один вложен в другой. Задаём вложенному блоку margin: 10%. Сразу возникает вопрос от чего отсчитывать эти проценты. Проценты берутся от ширины родительского элемента. При этом не важно определяем мы горизонтальные или вертикальные отступы. Ответ, прямо скажем, не очевиден, но если посмотреть объяснения становиться ясно отчего выбран именно такой вариант.

Сюрпризы на этом не заканчиваются. margin добавленный к нашей картинке даст такой неожиданный результат.

Серым на картинке обозначен родительский блок. Вопреки нашим ожиданиям margin примененный к дочернему блоку не раздвинул сверху и снизу границы родительского. Произошло это потому что у родительского блока не от чего отталкиваться. В таких случаях margin выносится на ружу и отталкивается от соседнего блока или границ блока расположенного уровнем выше. Чтобы блок отталкивался от родительского нужно чтобы у родительского блока были заданны padding или border или свойство overflow с любым значением кроме visible.

Ещё одна особенность отступов это схлапывание. Смысл в том что если у двух соседних элементов задан margin то расстояние между ними будет равно наибольшему значению.

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

  1. Если оба margin отрицательные то берётся большое по модулю значение
     
  2. Если один margin отрицательный а другой положительный то они складываются.

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся контейнеры <div>, <h1>, <p> и др.

Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них встроенные элементы (<span>, например).

Запрещено добавлять внутрь встроенных элементов блочные (пример 1).

Пример 1. Использование блочных элементов

В данном примере абзац (тег <p>) вставляется внутрь контейнера <div>, а ссылка (тег <a>) — в заголовок <h2>. Кстати, ошибкой будет поступить наоборот — добавить <h2> в контейнер <a> (<a href="link1.html"><h2>Ut wisi</h2></a>), поскольку тег <a> не относится к блочным элементам.

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

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

Ширина блочных элементов

По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Здесь следует оговорить, что под этим подразумевается. Например, если тег <div> в коде документа присутствует один, то он занимает всю свободную ширину окна браузера и ширина блока будет равна 100%. Стоит поместить один тег <div> внутрь другого, как ширина внутреннего тега начинает исчисляться относительно его родителя, т.е. внешнего контейнера.

Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока (width), отступов (margin), полей (padding) и границ (border). В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.

Пример 2. Ширина слоя

В результате данного примера получим слой шириной 342 пиксела. На рис. 1 показано, из чего складывается ширина слоя.

Рис 1. Ширина блочного элемента

В том случае когда <!DOCTYPE> в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение свойства width.

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

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

Пример 3. Ширина слоя в процентах

Результат примера показан на рис. 2.

Рис. 2. Отображение ширины слоев в браузере

Ширина первого слоя в данном примере (layer1) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя (layer2) ширина также задана 100%, но поля определяются для внутреннего абзаца (тег <p>). За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3) вообще не применяется свойство width, поэтому оно определяется по умолчанию — auto. В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.

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

Высота

С высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height и добавляет к нему еще значение margin, padding и border. Если высота слоя не установлена явно, то она вычисляется автоматически исходя из объема содержимого.

Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (пример 4).

Пример 4. Высота слоя

Результат данного примера продемонстрирован на рис. 3.

Рис. 3. Высота блока в разных браузерах

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

Цвет фона

Цвет фона элемента проще всего устанавливать через универсальное свойство background. Фоном при этом заливается область, которая определяется значениями width, height и padding (рис. 4).

Рис. 4.

Параметры для блоков в CSS

Область слоя, которая заполняется фоновым цветом

Таким образом, margin не принимает участия в формировании цветной области.

Границы

Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается и различие при отображении границ. Браузер Internet Explorer 7 проводит рамку внутри блока, а Firefox — снаружи. Но если использовать фоновую заливку, то увидим совершенно противоположную картину (рис. 5). А все потому, что Firefox (Opera) цвет фона устанавливает по внешнему краю границы, а Internet Explorer — по внутренней. Начиная с версии 8.0 Internet Explorer поменял стиль отображения рамки, она проводится внутри блока, как и в Firefox.

а. Internet Explorer 7

б. Firefox, Internet Explorer 8+

в. Opera

Рис. 5. Отображение рамки в браузерах

В примере 5 показано, как создать код для получения подобной границы.

Пример 5. Пунктирная рамка

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

Резюме

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

Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями height и width, но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы. Можно только посоветовать ограниченно использовать свойства width и height, поскольку по умолчанию браузер применяет аргумент auto, который заставляет настраивать размеры элемента автоматически.

FILED UNDER : IT

admin

Submit a Comment

Must be required * marked fields.

:*
:*