Yoga-mgn.ru

Строительный журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

Блочные элементы

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

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

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

В данном примере абзац (тег

) вставляется внутрь контейнера

. Кстати, ошибкой будет поступить наоборот — добавить

в контейнер (

Ut wisi

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

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

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

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

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

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

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

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

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

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

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

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

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

Ширина первого слоя в данном примере ( layer1 ) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя ( layer2 ) ширина также задана 100%, но поля определяются для внутреннего абзаца (тег

). За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою ( layer3 ) вообще не применяется свойство width , поэтому оно определяется по умолчанию — auto . В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.

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

Высота

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

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

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

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

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

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

Цвет фона

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

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

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

Границы

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

а. Internet Explorer 7

б. Firefox, Internet Explorer 8+

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

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

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

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

Резюме

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

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

Блочные и строчные элементы

В HTML существует два типа элементов — блочные (block elements) и строчные (inline elements). Ниже вы узнаете особенности этих элементов и разницу между ними, а также способы управлять ими через правила CSS.

Блочные элементы

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

Примеры блочных элементов:

и т. д.

Строчные элементы

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

Примеры строчных элементов: , , , , и т. д.

Блочные и строчные элементы HTML

Примечание: в HTML5 порядок вложения тегов такой роли не играет. Элементы уже не просто делятся на блочные и строчные, а группируются по смыслу и назначению, представляя собой категории контента.

CSS-свойство display: меняем тип элемента

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

Если же необходимо отобразить строчный элемент как block-элемент (чтобы до и после элемента происходил перенос строки), запишите следующее:

Также можно сделать «гибрид» — блочный элемент с поведением, как у строчного. В этом случае всё содержимое таких блочных элементов будет отображаться, как обычно, но при этом блоки будут вести себя как строчные элементы, выстраиваясь в одной строке друг за другом и переносясь на новую строку лишь при необходимости. Схлопывание margin в таких случаях перестает действовать. Для превращения элемента в блочно-строчный запишите:

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

CSS Урок 11 Блочная Модель

CSS Блочная Модель

Все HTML элементы могут рассматриваться как блоки (в смысле контейнеры, оболочки и т.п.). В CSS, термин «блочная модель» используется, когда говорят о дизайне и компоновке.

Блочная модель CSS — это по существу контейнер (оболочка), который вмещает (оборачивает) HTML элементы, и состоит из: полей, границ, отступов и фактического содержимого.

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

Изображение ниже иллюстрирует блочную модель:

Объяснение различных частей:

  • Поля — Создают пространство вокруг границы. Поля не имеют фоновых цветов, они полностью прозрачны
  • Граница — Граница идет вокруг отступов и содержания. Цвет границы определяется цветом фона блока
  • Отступы — Создают пространство вокруг содержания. На отступы влияет фоновый цвет блока
  • Содержание — Содержание блока, где располагается текст, изображения и т.п.

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

Ширина и Высота Элемента

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

Общая ширина элемента в примере ниже равна 300px:

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

Давайте посчитаем:
250px (ширина)
+ 20px (левый и правый отступы)
+ 10px (левая и правая границы)
+ 20px (левое и правое поля)
= 300px

Предположим, что у вас есть только 250px пространства. Давайте сделаем элемент с общей шириной в 250px:

Пример

Общая ширина элемента всегда должна вычисляться так:

Общая ширина элемента = собственно ширина (содержания) + левый отступ + правый отступ + левая граница + правая граница + левое поле + правое поле

Общая высота элемента всегда должна вычисляться так:

Общая высота элемента = собственно высота (содержания) + верхний отступ + нижний отступ + верхняя граница + нижняя граница + верхнее поле + нижнее поле

Проблемы Совместимости Браузеров

Если вы проверяли предыдущий пример в Internet Explorer, вы увидели, что общая ширина не была точно равна 250px.

IE8 и более ранние версии включают отступы и границы в ширину, когда свойство width установлено, пока не объявлен тип документа DOCTYPE.

Чтобы устранить эту проблему, просто добавьте DOCTYPE в исходный код:

CSS float не поддерживает правильный размер внешнего блочного элемента

У меня есть следующий код HTML:

И следующий код CSS :

Как есть, дата упадет на новую строку и поплывет вправо. Если я изменю ul.blogEntry li.title span CSS и добавлю float: left; высота внешнего элемента LI уменьшается, а нижняя граница прорезает текст пролетов. Совет?

2 ответа

  • Сохраняйте оптимальную ширину элемента, используя CSS

Я хочу убедиться, что элемент HTML (в данном случае поле ввода) поддерживает ширину ‘optimal’ на разных разрешениях экрана. Мои субъективные правила (для простоты: игнорирование необходимости полей): Изначально установите ширину элемента на 40% ширины окна Если размер элемента падает ниже.

Я пытаюсь написать программу, которая использует сторонний элемент управления ActiveX в проекте .NET 3.5. Я добавить это к моей форме, используя панели инструментов и добавляет AxLEADLib, LEADLib, и stdole упоминания моего проекта. Однако автоматически сгенерированный код вставляет.

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

Простой ответ-добавить overflow:auto; к контейнерному элементу (т. е. li.title), но есть и другие способы:

Блоки очистки — это EVIL.

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

кроме того, когда что-то плавает, вы обычно должны установить ширину

Похожие вопросы:

Для коробочной модели блочного элемента внутри другого блочного элемента фиксированных размеров, например:

это мой код Я хочу, чтобы мой входной элемент был показан.

У меня есть скрипт Python, который читает файл (обычно из оптического media), помечающий нечитаемые секторы, чтобы позволить повторную попытку чтения указанных нечитаемых секторов на другом.

Я хочу убедиться, что элемент HTML (в данном случае поле ввода) поддерживает ширину ‘optimal’ на разных разрешениях экрана. Мои субъективные правила (для простоты: игнорирование необходимости.

Я пытаюсь написать программу, которая использует сторонний элемент управления ActiveX в проекте .NET 3.5. Я добавить это к моей форме, используя панели инструментов и добавляет AxLEADLib, LEADLib, и.

Я использовал таблицу html, чтобы поместить 2 элемента управления блочного стиля на одном и том же горозонтальном уровне на веб-странице. Как лучше всего сделать это с css?

Я использую устройство сетевого блока (NBD), и я не смог найти никакой документации о том, что относится к NBD_SET_SIZE. Я подозреваю, что это размер блочного устройства, а затем NBD_SET_BLKSIZE-это.

Я читаю CSS окончательное руководство Эрика Мейера. На странице 162 говорится следующее: Почти так же просто правило, которое гласит, что сумма горизонтальных компонентов блока элемента уровня блока.

Мой контейнер box не имеет установленного значения высоты. И у меня есть элемент внутри. Естественно, что размер контейнера растягивается до содержимого (элемента внутри), но когда я устанавливаю.

Кто-нибудь знает, как вычислить размер массива из внешнего файла? Считать: Data.c float arr[]=<1.4, 2.3, 7.6, 4.8, 3.3>; Main.c #include int main() < extern float arr[]; //. >.

CSS/Блочная Модель

Содержание

  • 1 Типы элементов (свойство display)
  • 2 Блочная модель (Box model)
  • 3 Высота (height) и ширина (width) элемента
  • 4 Внутренние (padding) и внешние (margin) отступы
  • 5 Границы (border/outline) элемента
  • 6 Сокращённая запись свойств
  • 7 Свойство box-sizing

Типы элементов (свойство display ) [ править ]

Свойство display определяет поведение элемента в документе.

Например, с помощью этого свойства строчный элемент можно определить как блочный или наоборот.

  • block — блочный элемент (значение по умолчанию в CSS1) (CSS1)
  • inline — строчный элемент (значение по умолчанию в CSS2/CSS2.1 и выше) (CSS1)
  • list-item — блочный элемент с маркером списка (CSS1)
  • none — элемент удаляется из потока документа без сохранения места (CSS1)
  • inline-block — блочный элемент с поведением, аналогичным строчному (CSS2.1)
  • table — блочная таблица (table) (CSS2)
  • inline-table — строчная таблица (table) (CSS2)
  • table-row — строка таблицы (tr) (CSS2)
  • table-cell — ячейка таблицы (td, th) (CSS2)
  • table-caption — заголовок таблицы (caption) (CSS2)
  • table-column — колонка таблицы (col) (CSS2)
  • table-column-group — группа колонок (colgroup) (CSS2)
  • table-header-group — верхняя часть таблицы (шапка) (thead) (CSS2)
  • table-row-group — тело таблицы (tbody) (CSS2)
  • table-footer-group — нижняя часть таблицы (подвал) (tfoot) (CSS2)

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

Рядом с каждым значением указана версия CSS, когда оно появилось впервые.

Блочная модель (Box model) [ править ]

Это одна из основ в понимании CSS, модель форматирования документа. Определяет формирование размеров элементов на странице, их взаимодействие между собой.

  • content — содержимое блока, информация;
  • padding — внутренний отступ;
  • border и outline — граница и внешняя граница; (второе свойство не участвует в формировании размеров блока)
  • margin — внешний отступ;
  • height и width — высота и ширина элемента.

В IE4 и IE5 высота и ширина блока формируются с учётом padding и border .

В IE6 в режиме совместимости (quirks mode) также.

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

На следующем рисунке сравниваются блочные модели W3C и IE4/IE5:

В CSS3 появилось свойство box-sizing для поддержки блочной модели IE4/IE5.

В следующих разделах будет более подробное описание свойств с примерами.

Высота ( height ) и ширина ( width ) элемента [ править ]

  • height — высота;
  • min-height — минимальная высота;
  • max-height — максимальная высота;
  • width — ширина;
  • min-width — минимальная ширина;
  • max-width — максимальная ширина.

Эти свойства могут задаваться в различных единицах CSS.

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

В этом примере ширина сайта 960px, а максимальная ширина абзаца не больше 60% ширины сайта.

Внутренние ( padding ) и внешние ( margin ) отступы [ править ]

Свойство padding определяет расстояние от содержимого блока до его границы, а margin — расстояние между границами соседних элементов.

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

  • padding/margin-top — верхний отступ (внутренний/внешний)
  • padding/margin-right — правый отступ (внутренний/внешний)
  • padding/margin-bottom — нижний отступ (внутренний/внешний)
  • padding/margin-left — левый отступ (внутренний/внешний)
  • padding/margin — отступ (внутренний/внешний) (сокращённая форма)

Границы ( border/outline ) элемента [ править ]

Границы позволяют визуально отделить один элемент от другого.

Свойство border-color позволяет задать цвет границы, border-style — её стиль и border-width — толщину.

Можно задать все эти три свойства в сокращённой форме, перечислив их через пробел в свойстве border .

Или указать для каждой из сторон ( border-top , border-right , border-bottom , border-left ) необходимые свойства отдельно.

Свойство outline позволяет задавать цвет ( outline-color ), стиль ( outline-style ) и толщину ( outline-width ) внешней границы только для всех сторон одновременно. И это свойство не участвует в формировании размеров блока.

В сокращённой форме свойства внешней границы записываются через пробел в свойстве outline .

  • border
  • border-color

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

  • none (CSS1)
  • hidden (CSS2/CSS2.1)
  • dotted (CSS1)
  • dashed (CSS1)
  • solid (CSS1)
  • double (CSS1)
  • groove (CSS1)
  • ridge (CSS1)
  • inset (CSS1)
  • outset (CSS1)
  • border-width

Значения этого свойства указываются либо с помощью неотрицательных значений, либо с помощью ключевых слов thin, medium, thick (третье значение больше).

  • border-top
  • border-right
  • border-bottom
  • border-left
  • border-top-color/style/width
  • border-right-color/style/width
  • border-bottom-color/style/width
  • border-left-color/style/width
  • outline
  • outline-color
  • outline-style
  • outline-width

Значения для последних четырёх свойств аналогичны значениям для border , кроме свойства outline-style , которое не поддерживает значение hidden.

Сокращённая запись свойств [ править ]

Для сокращённых свойств padding , margin , border-color/style/width используется мнемоническое правило TRouBLe от английских названий сторон (top/right/bottom/left, то есть верх/право/низ/лево).

В этом примере значения свойства определяют стороны следующим образом:

4 значения: T+R+B+L;

3 значения: T+RL+B;

2 значения: TB+RL;

1 значение: TRBL.

Для сокращённых свойств ( border , border-top/right/bottom/left , outline ) их значения записываются через пробел.

Для других свойств смотрите сокращённые свойства.

Свойство box-sizing [ править ]

Это свойство впервые появилось в CSS3.

Оно позволяет переключаться с блочной модели W3C на блочную модель IE4/IE5.

  • content-box — это значение используется по умолчанию и позволяет задавать размеры блока согласно спецификации, то есть только на основе ширины и высоты содержимого (content)
  • border-box — это блочная модель IE4/IE5, то есть размеры блока задаются с учётом внутреннего отступа и границы (content + padding + border)
  • padding-box — это значение появилось позже и позволяет задавать размеры с учётом контента и внутреннего отступа (content + padding)

Последнее значение поддерживается только Mozilla Firefox.

Блочные и строчные элементы

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

Разделение элементов на блочные и строчные используется в спецификации HTML до версии 4.01. В HTML5 эти понятия заменены более сложным набором категорий контента, согласно которым каждый HTML-элемент должен следовать правилам, определяющим, какой контент для него допустим.

Модель визуального форматирования CSS

  • Содержание:
  • 1. Модель визуального форматирования
  • 2. Блочная модель
  • 3. Блочные элементы и блочные контейнеры
  • 4. Строчные элементы и строчные контейнеры
  • 5. Строчно-блочные элементы
  • 6. Как сделать строчный элемент блочным
  • 7. Схлопывание вертикальных отступов
  • 8. Отрицательные отступы
  • 9. Выпадание вертикальных отступов

1. Модель визуального форматирования

Модель визуального форматирования CSS представляет собой алгоритм, который обрабатывает HTML-документ и выводит его на экран устройства. Данная модель преобразует каждый элемент документа таким образом, что он генерирует ноль или более прямоугольных боксов в соответствии с блочной моделью CSS. Положение этих боксов на странице определяется следующими факторами:
— размером элемента (с учётом того, заданы они явно или нет);
— типом элемента (строчный или блочный);
— схемой позиционирования (нормальный поток, позиционированные или плавающие элементы);
— отношениями между элементами в DOM;
— внутренними размерами содержащихся изображений;
— внешней информацией (например, размеры окна браузера).

Положение и размеры бокса(ов) каждого элемента рассчитываются относительно краёв прямоугольной блока, так называемого «содержащего блока» (containing block). Размеры бокса не ограничиваются размерами содержащего блока, поэтому при определённых условиях он может выходить за его границы.

2. Блочная модель

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

Рис. 1. Блочная модель элемента

Область содержимого — это содержимое элемента, например, текст или изображение.

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

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

Значения padding и margin задаются в следующем порядке: верхнее, правое, нижнее и левое.

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

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

3. Блочные элементы и блочные контейнеры

Блочные элементы — элементы высшего уровня, которые форматируются визуально как блоки, располагаясь на странице в окне браузера вертикально. Значения свойства display, такие как block, list-item и table делают элементы блочными. Блочные элементы генерируют основной блок, который содержит только блок элемента. Элементы со значением display: list-item генерируют дополнительные блоки для маркеров, которые позиционируются относительно основного блока.

Читать еще:  Первый ряд плитки на стене. С чего начать?
Ссылка на основную публикацию
ВсеИнструменты
Adblock
detector