![]() |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Как создать сайт?
Как создать свой сайт легко и просто, имеются библиотеки html, css, php, javascript, jquery, web-график. автор: Васильев Олег Никандрович. КАК СОЗДАТЬ САЙТ
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Задание положения в CSS.После того как ситуация со свободным размещением определена, так сразу по четырем значениям сдвига осуществляется реальное размещение элементов. Свойства сдвиги: top right bottom left Значения: длина процент auto inherit Начальное значение: auto. Применимо: К позиционируемым элементам (со схемой relative, absolute или fixed). Наследуется: Нет. Значения, заданные для каждого из свойств сдвига, определяют то расстояние, на которое элемент должен быть сдвинут от конкретного края. Например, значение top задает расстояние между внешним краем данного элемента и верхним краем охватывающего блока. Положительные значения смещают элемент вниз, к центру блока; отрицательные - наверх, «выталкивая» наружу. Подобным образом и значение свойства left определяет расстояние между левым краем охватывающего блока и левым внешним краем данного элемента. И снова положительные значения сдвигают элемент к центру охватывающего блока, а отрицательные - «толкают» его вовне. Согласно CSS расположение элементов определяют края области содержимого, а не отступов. В первом примере при помощи процентных значений элемент размещается в левом нижнем углу охватывающего блока; 100% сдвиг сверху; 0% сдвиг слева: div { height: 120px; width: ЗООрх; border: lpx solid #000; } img { position: absolute; top: 100%; left: 0%; } Второй пример для размещения данного элемента в конкретной точке охватывающего использует длину в пикселах: div.a { position: absolute; height: 120рх; width: ЗООрх; border: lpx solid #000; background-color: #CCC } div.b { position: absolute; top: 20px; right: ЗОрх; bottom: 40px; left: 50px; border: lpx solid #000; background-color: #666 } < div class="a"> < div class="b"> < /div> < /div> Заметим, что указать длину и высоту элемента можно и опосредованно, задав для этого положение каждой стороны элемента по отношению к охватывающему блоку. Оставшееся при этом пространство отдается под размещаемый элемент. Однако если последний содержит свойства width и height, которые не согласуются с найденными значениями, в игру вступает ряд правил спецификации CSS, призванных устранить расхождение. Третий пример показывает, что отрицательные смещения могут заставить элемент выйти за границы охватывающего блока: div.a { position: absolute; height: 120px; width: ЗООрх; border: lpx solid #000; background-color: #CCC } div.b { position: absolute; top: -20px; right: -ЗОрх; bottom: 40px; left: 50px; border: lpx solid #000; background-color: #666 } < div class="a"> < div class = "b"> < /div> < /div>
обратно на главную назад дальше вперед ПОНРАВИЛОСЬ?
|
добрый вечер!
фотограф
Оля Леман свадьбы и торжества. нажмите сюда ![]()
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Сайт работает с 04.12.2013г. по 22-01-2021г. уже 8 лет © Права на сайт у Олега Васильева.
Копирование сайта при указании ссылки на источник. |