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

Пн Вт Ср Чт Пт Сб Вс
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


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

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

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

Internet Explorer Интернет эксплорер Google Chrome Google Chrome Opera Опера Firefox Firefox Safari Сафари, то есть поддерживается во всех основных браузерах.

Определение и использование. CSS свойство box-sizing позволяет выбрать алгоритм вычисления ширины( width) и высоты( height) элемента. Вот, если хотите две рамки вместе, это может быть достигнуто путем создания бокс-размеров box-sizing. Это заставляет браузер коробку с заданной ширины и высоты поместить внутри коробки, то есть в соответствии спецификации CSS3 ширина блока складывается из ширины контента( width), значений отступов( margin), полей( padding) и границ( border). Аналогично обстоит и с высотой блока( height). Свойство box-sizing изменяет данный алгоритм, чтобы свойства width и height имели размеры не контента, а размеры блока.

Вспомним,что в спецификации CSS2.1 говорится, что общая ширина элемента вычисляется путём сложения: ширины области содержимого (width) + внутреннего отступа слева и справа (padding-left и padding-right) + рамки слева и справа (border-left и border-right). Также вычисляется и общая высота элемента. Таким образом, свойство box-sizing дает возможность применения другого алгоритма - свойства width, height определяют общую ширину, высоту элемента, а не области содержимого.

Ролучается проще и прозрачнее, то есть намного легче.

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


Синтаксис:

                box-sizing: content-box|border-box|initial|inherit;

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

Значение по умолчанию: content-box
наследуется: нет
Версия: CSS3
JavaScript синтаксис: object.style.boxSizing="border-box"


Значение Описание
content-box Значение по умолчанию. Это поведение ширины и высоты, как указано в CSS 2.1. В указанных ширины и высоты( min/max свойства) обращаются в ширину и высоту соответственного поля содержимого элемента. Заполнение и границы элемента изложены и выводятся за рамки заданной ширины и высоты.
border-box Указанной ширины и высоты( min/max свойства) на этом элементе определяет границы поля элемента-любое дополнение или границы элемента продуманы и нарисованы внутри этой заданной ширины и высоты. Содержание ширина и высота рассчитывается путем вычитания границы и отступов соответствующих сторон от указанного свойства 'width' и 'height'
initial Это свойство задает значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.


Пишем программу - указать две рамки:

< !DOCTYPE html>
< html>
< head>
< style> 
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid #C39;
float:left;
}
< /style>
< /head>
< body>

< div class="container">
< div class="box">Этот тренажер занимает левую половину.< /div>
< div class="box">Этот тренажер занимает правую половину.< /div>
< div style="clear:both;">< /div>
< /div>

< /body>
< /html>                      

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

Этот тренажер занимает левую половину.
Этот тренажер занимает правую половину.



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
... ... ...

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

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