Авторский знак. Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.

октябрь 2020
Пн Вт Ср Чт Пт Сб Вс
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31


Чувашия-это моя Россия

Ссылки на каскадные стили CSS - box-ordinal-group.

Поддержка Браузеров

Internet Explorer 10 поддерживает альтернативу свойства -ms-flex-order. Firefox поддерживает альтернативу свойства -moz-box-ordinal-group. Safari и Chrome поддерживают альтернативу свойства -webkit-box-ordinal-group. Внимание!!! Гибкие коробки box-ordinal-group не поддерживаются в Internet Explorer 9 и более ранних версий.

Определение и использование. Свойство box-ordinal-group определяет порядок отображения дочерних элементов коробки. Элементы с более низким значением, отображается до тех, что более высоким значением. Внимание!!! Порядок отображения элементов с одинаковым значением группы зависит от их исходного порядка. Таким образом, с помощью свойства box-ordinal-group можно установить порядок отображения элементов потомков на странице сайта и элементы с более низкими значениями данного свойства будут отображены чуть раньше, чем элементы с большими значениями. ВНИМАНИЕ!!! Чтобы свойство box-ordinal-group работало необходимо установить display:box.

Самое мощное здесь даже не в том, что производится некое изменение некого участка страницы сайта. Самое мощное здесь в том, что свойство box-ordinal-group, которое действует через стили CSS3 автономно работает даже при отключения JavaScripta в браузере Вашего компьютера.

Синтаксис:

               box-ordinal-group: integer;

Определение и Использование

Значение по умолчанию: 1
наследует: нет
Версия: CSS3
JavaScript синтаксис: object.style.boxOrdinalGroup=2

Свойства Значения

Значение Описание
integer Целое число, определяющее порядок отображения дочерних элементов

Пишем программу - Указать порядок отображения дочернего элемента коробки: 

< !DOCTYPE html>
< html>
< head>
< style> 
.box
{
display:-ms-flexbox; /* Internet Explorer 10 */
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
border:1px solid black;
}
.ord1
{
margin:5px;
-ms-flex-order:1; /* Internet Explorer 10 */
-moz-box-ordinal-group:1; /* Firefox */
-webkit-box-ordinal-group:1; /* Safari and Chrome */
box-ordinal-group:1;
}
.ord2
{
margin:5px;
-ms-flex-order:2; /* Internet Explorer 10 */
-moz-box-ordinal-group:2; /* Firefox */
-webkit-box-ordinal-group:2; /* Safari and Chrome */
box-ordinal-group:2;
}
< /style>
< /head>
< body>

< div class="box">
< div class="ord2">Первый источник< /div>
< div class="ord1">Второй источник< /div>
< div class="ord1">Третий источник< /div>
< /div>

< p>< b>Внимание!!!< /b> Гибкие контейнеры box-ordinal-group не 
                 поддерживается в IE 9 и более ранних версий.< /p>

< /body>
< /html>

Результат программы:

Первый источник
Второй источник
Третий источник

Внимание!!! Гибкие контейнеры box-ordinal-group не поддерживается в IE 9 и более ранних версий.



seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: