Строчные элементы
Разница между блочными и строчными элементами следующая.
В примере 1 показано использование тега для выделения отдельных слов.
Пример 1. Применение строчных элементов
Результат примера показан ниже (рис. 1).
Рис. 1. Текст, оформленный с помощью стилей
В данном примере тег и стили используются для выделения различными способами фрагментов текста. В частности, выделение происходит за счет фонового цвета, рамки вокруг текста и сменой его цвета.
Пример 2. Свойство display
Результат примера приведен на рис. 2.
Рис. 2. Замена блочного элемента на строчный
В данном примере блочный тег
отображается на веб-странице как строчный элемент. Это требуется для того, чтобы ширина фона и рамки равнялась ширине самого текста с учетом полей. А, как известно, ширина блочных элементов не зависит от ширины содержимого, поэтому и приходится представлять тег
в виде строчного элемента. В принципе, аналогичным решением будет использовать вместо
Строчные элементы применяются не только для управления видом текста, но также и при верстке веб-страниц, например, для изменения положения слоев. В примере 3 показано, как рисунок накладывать поверх блока с текстом.
Пример 3. Наложение слоев
Результат примера представлен на рис. 3.
Рис. 3. Положение рисунка относительно текста
В примере 3 можно вообще отказаться от добавления тега
Пример 4. Использование тега SPAN
Результат примера показан ниже (рис. 4).
Рис. 4. Положение рисунка относительно текста
За счет того, что тег не начинается с новой строки, рисунок и текст в данном примере находятся на одной линии. Поэтому вертикального отступа под текстом, как в случае предыдущего примера, здесь нет. Зато появился отступ сверху.
Резюме
Для верстки строчные элементы применяются реже, чем элементы блочные. Это связано в основном с тем, что внутрь строчных элементов не допускается вкладывать контейнеры
и подобные широко распространенные теги. Тем не менее, блочные и строчные элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять вид составляющих веб-страниц.
Тег SPAN
| Браузер |  Internet Explorer |  Netтscape |  Опера |  Safari |  Mozilla Firefox | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Версия | 5.5 | 6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0 |
| Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да |
| ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Описание
Тег предназначен для определения встроенных элементов объекта. В отличие от блочных элементов, таких как
| Определения типов | Описание |
|---|---|
| const_pointer | Тип указателя на const элемент. |
| const_reference | Тип ссылки на const элемент. |
| difference_type | Тип расстояния со знаком между двумя элементами. |
| element_type | Тип элемента Span. |
| итераци | Тип итератора для диапазона. |
| вид | Тип указателя на элемент. |
| reference | Тип ссылки на элемент. |
| reverse_iterator | Тип реверсивного итератора для диапазона. |
| size_type | Тип для результата неподписанного расстояния между двумя элементами в диапазоне. |
| value_type | Тип элемента, без const или volatile квалификации. |
| Конструктор | Описание |
| размещать | Создайте span |
| Поддержка итераторов | Описание |
| начале | Получение итератора, указывающего на первый элемент в диапазоне. |
| end | Получение итератора, указывающего на конец диапазона. |
| rbegin | Получение реверсивного итератора, указывающего на последний элемент в диапазоне; то есть начало инвертированного диапазона. |
| rend | Возвращает обратный итератор, указывающий на начало диапазона. то есть в конце противоположного диапазона. |
| Элементы доступа | Описание |
| Назад | Возвращает последний элемент в диапазоне. |
| data | Возвращает адрес первого элемента в диапазоне. |
| крышку | Получение первого элемента в диапазоне. |
| станции[] | Доступ к элементу в указанной позиции. |
| Наблюдатели | Описание |
| empty | Проверьте, пуст ли диапазон. |
| size | Возвращает количество элементов в диапазоне. |
| size_bytes | Возвращает размер диапазона в байтах. |
| Вложенные представления | Описание |
| first | Получение поддиапазона от начала диапазона. |
| last | Получение поддиапазона от конца диапазона. |
| поддиапазон | Получение поддиапазона из любого места в диапазоне. |
| Операторы | Описание |
| Span:: operator = | Замените диапазон. |
| Оператор Span::[] | Получение элемента в указанной позиции. |
Remarks
Все span функции элементов имеют неизменную сложность времени.
Требования
Заголовок: (начиная с C++ 20)
Пространство имен: std
Параметр компилятора: /std: c + + Latest
span::back
Возвращает последний элемент в диапазоне.
Возвращаемое значение
Ссылка на последний элемент в диапазоне.
Пример
span::begin
Получение итератора, указывающего на первый элемент в диапазоне.
Возвращаемое значение
Итератор, указывающий на первый элемент в диапазоне.
Пример
span::data
Возвращает указатель на начало данных диапазона.
Возвращаемое значение
Указатель на первый элемент, хранящийся в диапазоне.
Пример
span::difference_type
Число элементов между двумя элементами в диапазоне.
Пример
span::element_type
Тип элементов в диапазоне.
Remarks
Тип берется из параметра шаблона T при создании диапазона.
Пример
span::empty
Содержит ли диапазон элементы.
Возвращаемое значение
Пример
span::end
Получение итератора в конце диапазона.
Возвращаемое значение
Итератор, указывающий сразу за концом диапазона.
Remarks
end используется для проверки того, прошел ли итератор конец диапазона.
Не следует отменять ссылки на значение, возвращаемое этим итератором. Используйте его, чтобы определить, достигнут ли итератор за пределами последнего элемента в диапазоне.
Пример
span::first
Получение поддиапазона, взятого с начала этого диапазона.
Параметры
count
Число элементов с начала этого диапазона, помещаемых в поддиапазон.
Число элементов указывается в качестве параметра для шаблона или для функции, как показано ниже.
Возвращаемое значение
Диапазон, содержащий count элементы из начала этого диапазона.
Remarks
Используйте версию шаблона этой функции, если это возможно, для проверки count во время компиляции и для сохранения сведений о диапазоне, так как он возвращает диапазон фиксированного экстента.
Пример
span::front
Получение первого элемента в диапазоне.
Возвращаемое значение
Ссылка на первый элемент в диапазоне.
Пример
span::iterator
Тип итератора над элементами Span.
Remarks
Этот тип выступает в качестве итератора над элементами в диапазоне.
Пример
span::last
Получение поддиапазона, взятого из конца этого диапазона.
Параметры
count
Число элементов из конца этого диапазона, помещаемых в поддиапазон. Число может быть указано в качестве параметра для шаблона или для функции, как показано ниже.
Возвращаемое значение
Диапазон, содержащий последние count элементы из этого диапазона.
Remarks
Используйте версию шаблона этой функции, если это возможно, для проверки count во время компиляции и для сохранения сведений о диапазоне, так как он возвращает диапазон фиксированного экстента.
Пример
span::operator[]
Получить элемент в диапазоне в указанной позиции.
Параметры
собой
Отсчитываемый от нуля элемент в диапазоне для доступа.
Возвращаемое значение
Ссылка на элемент в смещении позиции. Если недопустимое расположение, поведение не определено.
Пример
span::operator=
Назначьте еще один диапазон.
Параметры
иной
Диапазон, который необходимо присвоить этому элементу.
Возвращаемое значение
Remarks
Назначение выполняет неполную копию указателя данных и размера. Неполная копия является надежной, так как span не выделяет память для элементов, которые она содержит.
Пример
span::pointer
Типы для указателя и const указателя на элемент span.
Пример
span::rbegin
Получение реверсивного итератора, указывающего на последний элемент этого интервала.
Возвращаемое значение
Итератор, указывающий на начало инвертированного диапазона.
Пример
span::reference
Типы для ссылки и const ссылки на элемент span.
Пример
span::rend
Получение итератора произвольного доступа, который указывает на место сразу за концом обращенного диапазона.
Возвращаемое значение
Обратный итератор на заполнитель, следующий за последним элементом в обращенном диапазоне; то есть заполнитель перед первым элементом в неинвертированном диапазоне.
Remarks
rend используется с обратным диапазоном точно так же, как span:: end используется с диапазоном. Используйте его, чтобы проверить, достиг ли обратный итератор конца своего диапазона.
Значение, возвращаемое, rend не должно быть разыменовано.
Пример
span::reverse_iterator
Тип реверсивного итератора для диапазона.
Пример
span::size
Возвращает количество элементов в диапазоне.
Возвращаемое значение
Число элементов в диапазоне.
Пример
span::size_bytes
Получение размера элементов в диапазоне в байтах.
Возвращаемое значение
Число байтов, занимаемых всеми элементами в диапазоне; то есть sizeof(element_type) умножается на число элементов в диапазоне.
Пример
span::size_type
Тип без знака, подходящий для хранения количества элементов в диапазоне.
Пример
span::span
Параметры
маленькая
Создайте объект span из массива.
Remarks
span Не является бесплатным хранилищем для элементов в, span так как оно не владеет хранилищем объектов внутри него.
Пример
span::subspan
Получение поддиапазона этого диапазона.
Параметры
count
Число элементов, помещаемых в поддиапазон. Если count равно dynamic_extent (значение по умолчанию), поддиапазон берется offset до конца этого диапазона.
собой
Расположение в этом диапазоне для запуска поддиапазона.
Возвращаемое значение
Диапазон, начинающийся с offset в этом диапазоне. Содержит count элементы.
Remarks
Доступна версия шаблона этой функции, которая проверяет счетчик во время компиляции, что сохраняет сведения о диапазоне, возвращая диапазон фиксированного экстента.
Пример
span::value_type
Тип элемента в диапазоне, без const или volatile квалификации.
Пример
Направляющие удержания
Для SPAN предоставлены следующие руководства по удержанию.
Разница между
— элементы, которые относятся к одной группе называемой строчно-блочной. Такие элементы могут иметь разные размеры, однако браузер всегда отображает их горизонтально подобно тексту. В этой главе мы узнаем о различных группах элементов в соответствии с тем, как они выкладываются на странице.
Для начала давайте разберём, как отображать один элемент под другим по вертикали. Мы в основном должны сказать браузеру: «Эй, мы хотим контейнер, который может стыковаться вертикально». К счастью, это тег контейнера известен как
Чтобы увидеть как работают элементы
Согласно приведённым выше условиям, HTML будет выглядеть следующим образом.
Посмотрим на это в браузере.
Похоже на один большой прямоугольник. Как насчёт отделить теги
Я добавил свойство margin-bottom (выделено выше), чтобы отделить каждый
Отлично! Браузер отображает эти «блоки» один под другим, в отличие от нашего предыдущего примера с формой, где элементы выводились в одну строку.
В чём различие? Когда дело доходит до отображения тегов, браузер распознаёт три группы элементов:
Строчные элементы не вызывают перевода на новую строку и показывают один элемент рядом с другим по горизонтали. Блочные элементы устанавливаются как блоки, которые укладываются по верхней части друг друга и никогда не отображаются рядом по горизонтали, если мы не используем магические трюки в CSS (о которых узнаем в следующей главе). Строчно-блочные действуют в качестве строчных элементов (отображаются рядом друг с другом), но отличаются от них тем, что им можно задать размер. К примеру, поле
может отображаться как большой прямоугольник, но при этом занять пространство за пределами одной строки текста.
Позвольте мне поделиться с вами некоторыми примерами элементов, которые можно классифицировать в соответствии с одной из этих трёх групп.
Браузер отобразит в одну линию:
Однако можно изменить это поведение, добавив одну строку в CSS:
Для этого примера мы используем
Вообще, хорошей идеей будет не злоупотреблять тегом
С нашими новыми знаниями о блоках давайте переделаем код нашей формы так, чтобы поля формы и их описания красиво отображались друг под другом.
Это выглядит чуть сложнее, но единственное что мы сделали, так это добавили теги
Ещё раз, давайте сравним новый (справа) и старый код (слева).
А теперь посмотрим, как новый код отображается в браузере!