Встроенные контейнеры. Контейнерный Web-дизайн Ширина блочных элементов
HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.
Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.
Все HTML-элементы делятся на пять типов:
- пустые элементы
— , ,
, , , , , ,Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию. Индикатор измерения в заданном диапазоне. Раздел документа, содержащий навигационные ссылки по сайту. Определяет секцию, не поддерживающую сценарий (скрипт). Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег . Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная. Контейнер с заголовком для группы элементов . Определяет вариант/опцию для выбора в раскрывающемся списке , или . Поле для вывода результата вычисления, рассчитанного с помощью скрипта. Параграфы в тексте. Определяет параметры для плагинов, встраиваемых с помощью элемента . Элемент-контейнер, содержащий один элемент и ноль или несколько элементов . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение. Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д. Индикатор выполнения задачи любого рода. Определяет краткую цитату. Контейнер для Восточно-Азиатских символов и их расшифровки. Определяет вложенный в него текст как базовый компонент аннотации. Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе , выводится уменьшенным шрифтом. Отмечает вложенный в него текст как дополнительную аннотацию. Выводит альтернативный текст в случае если браузер не поддерживает элемент . Отображает текст, не являющийся актуальным, перечеркнутым. Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом. Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src . Определяет логическую область (раздел) страницы, обычно с заголовком. Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в . Отображает текст шрифтом меньшего размера. Указывает местоположение и тип альтернативных медиаресурсов для элементов , , . Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов. Расставляет акценты в тексте, выделяя полужирным. Подключает встраиваемые таблицы стилей. Задает подстрочное написание символов, например, индекса элемента в химических формулах. Создаёт видимый заголовок для тега . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка. Задает надстрочное написание символов. Тег для создания таблицы. Определяет тело таблицы. Создает ячейку таблицы. Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом. Создает большие поля для ввода текста. Определяет нижний колонтитул таблицы. Создает заголовок ячейки таблицы. Определяет заголовок таблицы. Определяет дату/время. Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия. Создает строку таблицы. Добавляет субтитры для элементов и . Выделяет отрывок текста подчёркиванием, без дополнительного акцента. Создает маркированный список. Выделяет переменные из программ, отображая их курсивом. Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg. Таблица-шпаргалка с тегамиУказывает браузеру возможное место разрыва длинной строки. Для удобства пользования я сгруппировала теги по тематическим разделам, добавив значения свойства display для каждого тега. Чтобы перейти к таблице, кликните по рисунку.
Любая веб-страница состоит из расположенных на ней элементов, и практически всегда за их размещение отвечает блочная верстка div. Конечно, существует еще и табличная верстка с использованием тегов
,
, , и существуют даже споры о том, какую лучше использовать систему — блочную или табличную. Однако в действительности в в настоящее время вы не встретите ни одного из современных, популярных и удобных сайтов, использующих только табличную верстку. В лучшем случае она используется только для того, для чего она и предназначена — то есть для создания таблиц, но никак не для формирования самой структуры сайта. Дело в том, что div верстка сайта позволяет задавать множество css-свойств, недоступных для таблиц. Кроме того, самый главный недостаток табличной системы состоит в том, что таблица не будет показана на экране до тех пор, пока она не будет полностью загружена браузером. Если весь сайт сделан в таблице, то он появится на дисплее лишь после того, как будет полностью загружен весь html-код страницы.
Тег DIV и свойство floatОснова блочной системы — это тег , который является контейнером для контента. Внутри него также могут содержаться другие контейнеры .
Использовать тег DIV — не сложнее, чем . Как правило, стандартная структура сайта формируется следующим образом: существует основной контейнер (часто ему присваивается класс с названием wrapper, container, main и т.д.). Внутри этого контейнера располагаются блоки меню, контентной части, сайдбара.
По умолчанию, каждый новый блок располагается с новой строки. Для того, чтобы расположить блок слева или справа от другого (например, чтобы расположить сайдбар справа), используется свойство float. По умолчанию оно имеет значение «none», но можно также выставлять значения «left» и «right».
Рассмотрим это свойство на примере с двумя блоками.
Блок для контента Блок для сайдбара
Этот код даст следующий результат:
Свойство clearВажно учитывать, что свойство float распространяется не только на сам блок, в котором оно прописано, но и на последующий элемент, который будет идти за этим блоком. То есть если мы к вышеописанным двум блокам добавим еще один блок, не указывая ему никаких свойств, то он расположится не с новой строки, а начнется справа от второго блока.
Для того, чтобы избежать этого, блочная верстка div использует свойство clear, которое должно быть задано для того блока, который мы хотим расположить с новой строки. Чаще всего для этого ему задается значение «both», но можно также задать значения «left» или «right», если мы хотим не просто расположить блок на новой строке, но и задать ему выравнивание.
Дополним вышеуказанный пример новым элементом:
Блок для контента Блок для сайдбара Новый блок, расположенный снизу
Результат:
Отступы в блочной версткеПомимо расположения блоков, немаловажным является задание отступов как между блоками, так и внутри них. Для этого, соответственно, используются свойства margin и padding.
Отступы задаются отдельно для верхней, правой, нижней и левой частей элемента. Их можно задать одной строкой путем перечисления четырех значений:
Margin: 20px 10px 0 40px
Блок с такими параметрами будет располагаться на 20 пикселей ниже вышестоящего элемента, на десять пикселей от правостоящего элемента, будет иметь нулевой отступ снизу и будет иметь отступ размером в 40 пикселей слева.
Если все те же самые показатели указать в свойстве padding, то это будут внутренние отступы для контента по отношению к границам блока, в которых он расположен.
Можно также задавать отдельные свойства для отдельных граней с помощью margin-top, margin-bottom, margin-left, margin-right (и аналогично для padding). В таком случае, если какая-то из граней не будет указана, то отступ с ее стороны будет равен нулю или будет определен общими свойствами css, заданными для блоков на странице.
Онлайн учебники на сайт
Учебник по HTML 4 Тег-контейнерТег-контейнер является элементом уровня блока, служащим для выделения фрагмента документа. Целью этого выделения является управление параметрами данного фрагмента, которое обычно выполняется с помощью назначения стилей. Приведем пример:
(Фрагмент документа)
В этом примере фрагмент HTML-документа обрамляется тегами и для задания некоторых его свойств. В данном случае все текстовые элементы выделенного фрагмента будут отображаться зеленым (green) цветом. Аналогом тега уровня текста является элемент .
Заметим, что непосредственное назначение стилевых свойств отдельного фрагмента так, как это сделано в примере, использовать не желательно в соответствии с концепцией разделения структуры документа и его представления. Следует использовать таблицы стилей, речь о которых пойдет во второй части книги.
ТегТег-контейнер предназначен для горизонтального выравнивания всех элементов посередине окна просмотра браузера. Он имеет уровень блока и его полезно использовать для центрирования таких элементов, как, например, таблиц, так как они не могут быть центрированы назначением
ALIGN=CENTER тега
.
По существу тег является краткой формой следующей записи: . Дальнейшее использование тега по причинам, отмеченным в предыдущем разделе, также нежелательно.
w3 css (17)Учитывая следующий HTML:
Я бы хотел, чтобы #copyright придерживался нижней части #container .
Могу ли я достичь этого, не используя абсолютное позиционирование? Если свойство float поддерживает значение «bottom», похоже, что это будет трюк, но, к сожалению, этого не происходит.
HTML: content footer CSS: html, body { width: 100%; height: 100%; } .overlay { min-height: 100%; position: relative; } .container { width: 900px; position: relative; padding-bottom: 50px; } .height { width: 900px; height: 50px; } .footer { width: 900px; height: 50px; position: absolute; bottom: 0; }В CSS ничего не называется float:bottom . Лучше всего использовать позиционирование в таких случаях:
Position:absolute; bottom:0;
Для них есть только один ребенок в контейнере, вы можете использовать подход table-cell и vertical-align который надежно работал для позиционирования одного div внизу его родителя.
Обратите внимание, что использование table-footer-group качестве других упомянутых ответов приведет к нарушению расчета высоты родительской table .
#container { display: table; width: 100%; height: 200px; } #item { display: table-cell; vertical-align: bottom; } Single bottom item
Если вы хотите, чтобы он «прилипал» к низу, независимо от высоты контейнера, то абсолютное позиционирование - это путь. Конечно, если элемент авторского права является последним в контейнере, он всегда будет внизу.
Можете ли вы расширить свой вопрос? Объясните, что именно вы пытаетесь сделать (и почему вы не хотите использовать абсолютное позиционирование)?
Его старый вопрос, но это уникальный подход, который может помочь в нескольких случаях.
Чистый CSS, без абсолютного позиционирования, без фиксации любой высоты, кросс-браузер (IE9 +)Поскольку обычный поток «сверху вниз», мы не можем просто просить #copyright div придерживаться нижней части своего родителя без какого-либо позиционирования какого-то рода. Но если мы хотели, чтобы #copyright div придерживался вершины его родитель, это будет очень просто - потому что это нормальный поток.
Поэтому мы будем использовать это в наших интересах. мы изменим порядок div s в HTML, теперь #copyright div находится вверху, а содержимое сразу же следует за ним. мы также делаем контент div растянутым полностью (используя псевдоэлементы и методы очистки)
теперь речь идет только о том, чтобы вернуть этот порядок обратно в представление. что легко можно сделать с помощью CSS-преобразования.
Мы вращаем контейнер на 180 градусов, а теперь: вверх-вниз. (и мы возвращаем обратно содержимое, чтобы снова выглядеть нормально)
Если мы хотим иметь scroolbar в области содержимого, нам нужно применить немного больше магии CSS. как можно показать [в этом примере содержимое находится ниже заголовка, но его та же идея]
* { margin: 0; padding: 0; } html, body, #Container { height: 100%; color: white; } #Container:before { content: ""; height: 100%; float: left; } #Copyright { background-color: green; } #Stretch { background-color: blue; } #Stretch:after { content: ""; display: block; clear: both; } #Container, #Container>div { -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotate(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } Copyright Foo web designs Element 1 Element 2
Фактически, принятый ответ @User будет работать только в том случае, если окно высока, а контент короткий. Но если контент высок, а окно короткое, оно поместит информацию об авторских правах на содержимое страницы, а затем прокручивается вниз, чтобы увидеть содержимое, оставив вас с плавающим уведомлением об авторских правах. Это делает это решение бесполезным для большинства страниц (например, эта страница).
Наиболее распространенный способ сделать это - продемонстрированный подход «CSS липкий нижний колонтитул» или немного более тонкое изменение. Этот подход отлично работает - если у вас есть фиксированный верхний нижний колонтитул.
Если вам нужен нижний колонтитул переменной высоты, который будет отображаться в нижней части окна, если содержимое слишком короткое, а внизу содержимого, если окно слишком короткое, что вы делаете?
Проглотите свою гордость и используйте стол.
Например:
* { padding: 0; margin: 0; } html, body { height: 100%; } #container { height: 100%; border-collapse: collapse; }
Lorem ipsum, etc. Copyright some evil company... Попробуйте. Это будет работать для любого размера окна, для любого количества контента для любого нижнего колонтитула любого браузера... даже IE6.
Если вы придумываете идею использования таблицы для макета, займите секунду, чтобы спросить себя, почему. CSS должен был облегчить нашу жизнь - и это в целом, но факт в том, что даже после всех этих лет он все еще является нарушенным, противоречивым беспорядком. Он не может решить каждую проблему. Это неполное.
Таблицы не круты, но по крайней мере на данный момент они иногда являются лучшим способом решения проблемы дизайна.
Если вы не знаете высоту дочернего блока:
#parent{background:green;width:200px;height:200px;display:table-cell;vertical-align:bottom;} .child{background:red;vertical-align:bottom;} child
Если вы знаете, что высота дочернего блока добавляет дочерний блок, добавьте padding-top / margin-top:
#parent{background:green;width:200px;height:130px;padding-top:70px;} .child{background:red;vertical-align:bottom;height:130px;} child
Parent { display: flex; flex-direction: column; } .child { margin-top: auto; }
Parent { height: 100px; border: 5px solid #000; display: flex; flex-direction: column; } .child { height: 40px; width: 100%; background: #f00; margin-top: auto; } Align to the bottom
Решение выше, вероятно, более гибкое, однако, это альтернативное решение:
Parent { display: flex; } .child { align-self: flex-end; }
Parent { height: 100px; border: 5px solid #000; display: flex; } .child { height: 40px; width: 100%; background: #f00; align-self: flex-end; } Align to the bottom
В качестве дополнительной заметки вы можете добавить префиксы поставщиков для дополнительной поддержки.
Кроме того, если есть положения с использованием position:absolute; или position:relative; , вы всегда можете попробовать padding родительский div или поместить margin-top:x; , В большинстве случаев это не очень хороший метод, но в некоторых случаях он может пригодиться.
Просто потому, что это вообще не упоминалось, что обычно хорошо работает в таких ситуациях, как ваше:
Вам нужно было бы форматировать div-copyright, аналогично другому контейнеру (такая же общая ширина, центровка и т. Д.), И все в порядке.
Copyright Foo web designs
Единственный раз, когда это может быть не идеальным, - это когда ваш контейнер-div объявлен с height:100% , и пользователю потребуется прокрутить вниз, чтобы увидеть авторское право. Но даже вы можете работать (например, margin-top:-20px - когда высота вашего элемента авторского права составляет 20 пикселей).
- Абсолютное позиционирование
- Нет табличного макета
- Никаких сумасшедших css, которые выглядят по-разному в каждом другом браузере (ну, по крайней мере, IE, вы знаете)
- Простое и четкое форматирование
Кроме того: я знаю, что OP попросил решение, которое «... прилипает к дну« контейнера »div ...» , а не что-то под ним, но давайте, люди ищут хорошие решения здесь, и это это один!
Div of style, position:absolute;bottom:5px;width:100%; работает, но для этого потребовалась более ситуация с прокруткой.
Window.onscroll = function() { var v = document.getElementById("copyright"); v.style.position = "fixed"; v.style.bottom = "5px"; }
Это подход, предназначенный для создания элемента с известной высотой и шириной (по крайней мере приблизительно) с поплавком вправо и оставаясь внизу, в то время как он ведет себя как встроенный элемент к другим элементам. Он ориентирован на нижний правый угол, потому что вы можете легко разместить его в любом другом углу с помощью других методов.
Мне нужно было создать навигационную панель, которая имела бы фактические ссылки в правом нижнем углу и случайные элементы брата, при этом гарантируя, что сам бар растягивается должным образом, не нарушая макет. Я использовал элемент «shadow», чтобы занять пространство ссылок на панели навигации и добавил его в конце дочерних узлов контейнера.
Copyright Foo web designs filler #copyright { display:inline-block; position:absolute; bottom:0; right:0; } #copyright-s { float:right; visibility:hidden; width:20em; /* ~ #copyright.style.width */ height:3em; /* ~ #copyright.style.height */ }
#container{width:100%; float:left; position:relative;} #copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;} #container{background:gray; height:100px;} Copyright Foo web designs
Попробуй это;
Copyright Foo web designs
Создайте еще один контейнер div для элементов выше #copyright . Только над авторским правом добавьте новый div: Он заставит нижний колонтитул находиться под всем остальным, как в случае использования относительного позиционирования (bottom:0px;).
Да, вы можете сделать это без absolute позиционирования и без использования table s (которая винт с разметкой и т. Д.).
DEMO
Это проверено для работы с IE> 7, chrome, FF и является очень простой возможностью добавить к существующему макету.Some content you don"t want affected by the "bottom floating" div supports not just text Some other content you want kept to the bottom this is in a div #container { height:100%; border-collapse:collapse; display: table; } .foot { display: table-row; vertical-align: bottom; height: 1px; }
Он эффективно делает то, что float:bottom , даже учитывая проблему, указанную в ответе @Rick Reilly!
Использование свойства translateY и topПросто установите дочерний элемент на позицию: относительный и перемещайте его вверх: 100% (это высота 100% родителя) и придерживайтесь нижней части родительского объекта путем преобразования: translateY (-100%) (это -100% высоты ребенок).
- вы не берете элемент из потока страницы
- он динамичен
Но все же просто обходной путь:(
Copyright{ position: relative; top: 100%; transform: translateY(-100%); }
Не забывайте префиксы для более старого браузера.
Влад Мержевич
Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся контейнеры , ,
И др.
Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них встроенные элементы (, например). Запрещено добавлять внутрь встроенных элементов блочные (пример 1).
Пример 1. Использование блочных элементов
Блочные элементы
Lorem ipsum dolor sit amet...
Ut wisi enim ad minim veniamВ данном примере абзац (тег
) вставляется внутрь контейнера , а ссылка (тег ) — в заголовок . Кстати, ошибкой будет поступить наоборот — добавить в контейнер (Ut wisi ), поскольку тег не относится к блочным элементам.
Вкладывание блочных тегов внутрь встроенных элементов характерно, скорее, для новичков, которые еще не понимают разницы между ними. К тому же браузеры научились отлавливать подобные ошибки и отображают код более-менее корректно. Тем не менее, рекомендуем придерживаться в этом вопросе спецификации, чтобы выводить веб-страницу без ошибок.
Ширина блочных элементовПо умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Здесь следует оговорить, что под этим подразумевается. Например, если тег в коде документа присутствует один, то он занимает всю свободную ширину окна браузера и ширина блока будет равна 100%. Стоит поместить один тег внутрь другого, как ширина внутреннего тега начинает исчисляться относительно его родителя, т.е. внешнего контейнера.
Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока (width ), отступов (margin ), полей (padding ) и границ (border ). В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.
Пример 2. Ширина слоя
Ширина DIV { width: 300px; /* Ширина слоя */ margin: 7px; /* Значение отступов */ padding: 10px; /* Поля вокруг текста */ border: 4px solid black; /* Параметры границы */ background: #fc0; /* Цвет фона */ } Lorem ipsum dolor sit amet...
В результате данного примера получим слой шириной 342 пиксела. На рис. 1 показано, из чего складывается ширина слоя.
Рис 1. Ширина блочного элемента
В том случае когда в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение свойства width .
Разберем еще один пример связанный с шириной. По умолчанию ширина слоя задается как auto , это позволяет вписывать слой в окно браузера, не принимая в расчет значения установленных полей. Если изменить ширину на 100%, то при добавлении значения отступов, полей или границ неминуемо появится горизонтальная полоса прокрутки.
Для получения универсального результата существует несколько подходов. В примере 3 продемонстрировано создание трех слоев, ширина которых определяется в процентах.
Пример 3. Ширина слоя в процентах
Ширина #layer1 { width: 100%; /* Ширина первого слоя */ padding: 10px; /* Поля вокруг текста */ background: #fc0; /* Цвет фона */ } #layer2 { width: 100%; /* Ширина второго слоя */ background: #cc0; /* Цвет фона */ } #layer2 P { padding: 10px; /* Поля вокруг параграфа */ } #layer3 { background: #3ca; /* Цвет фона третьего слоя */ padding: 10px; /* Поля вокруг текста */ } Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...Результат примера показан на рис. 2.
Рис. 2. Отображение ширины слоев в браузере
Ширина первого слоя в данном примере (layer1 ) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя (layer2 ) ширина также задана 100%, но поля определяются для внутреннего абзаца (тег
). За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3 ) вообще не применяется свойство width , поэтому оно определяется по умолчанию — auto . В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.
Способ установки ширины зависит от применяемого макета и выбора разработчика, но в любом случае нужно учитывать особенности блочных элементов и создавать универсальный код.
ВысотаС высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height и добавляет к нему еще значение margin , padding и border . Если высота слоя не установлена явно, то она вычисляется автоматически исходя из объема содержимого.
Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (пример 4).
Пример 4. Высота слоя
Высота #layer1 { width: 300px;/* Ширина слоя */ background: #fc0; /* Цвет фона */ height: 50px; /* Высота слоя */ padding: 5px; /* Поля вокруг текста */ } Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
Результат данного примера продемонстрирован на рис. 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. Пунктирная рамка
Рамка #layer1 { width: 300px; /* Ширина слоя */ padding: 10px; /* Поля вокруг текста */ background: #fc0; /* Цвет фона */ border: 5px dashed black;/* Параметры границы */ } Lorem ipsum dolor sit amet...
Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически одинаковым.
РезюмеБлочные элементы выступают в качестве основного строительного материала при верстке веб-страниц. Такие элементы характерны тем, что всегда начинаются с новой строки и занимают всю доступную ширину области, в которой располагаются.
Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями height и width , но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы. Можно только посоветовать ограниченно использовать свойства width и height , поскольку по умолчанию браузер применяет аргумент auto , который заставляет настраивать размеры элемента автоматически.