Абсолютное позиционирование
Представим окно браузера как систему координат: Принципы CSS-позиционирования — в том, что вы можете расположить блок в системе координат где угодно. Скажем, мы хотим позиционировать заголовок. При использовании блоковой модели заголовок выглядит так: Если мы хотим расположить его в 100 пикселах от верхней границы окна браузера и на 200 пикселов правее левой границы окна браузера, то мы должны написать такое правило:
h1 { position: absolute; top: 100px; left: 200px; }
Вот результат: Для абсолютного позиционирования элемента свойство position должно иметь значение absolute. Положение блока задается при помощи свойств сдвига: · left — смещение левого края блока относительно левого края контейнера; · right — смещение правого края блока относительно правого края контейнера; · top — смещение верхнего края блока относительно верхнего края контейнера; · bottom — смещение нижнего края блока относительно нижнего края контейнера. В качестве примера абсолютного позиционирования разместим 4 блока в углах документа:
#box1 { position: absolute; top: 50px; left: 50px; }
#box2 { position: absolute; top: 50px; right: 50px; }
#box3 { position: absolute; bottom: 50px; right: 50px; }
#box4 { position: absolute; bottom: 50px; left: 50px; }
Демонстрация примера Плавающие блоки Для того, чтобы в CSS реализовать «резиновую» вёрстку, были придуманы плавающие блоки. Их нельзя позиционировать с точностью до пикселя, как при абсолютном позиционировании. Они могут свободно перемещаться и «прижиматься» к краю своего контейнера. Подобным образом ведут себя рисунки в HTML, для которых задан атрибут align=. Плавающие блоки в CSS определяются свойством float. Свойство float Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения: · left — блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха. · right — блок перемещается вправо. Остальное содержимое документа будет выводиться вдоль левой стороны блока, начиная с самого верха. · none — блок не перемещается (значение по умолчанию). Рассмотрим пример. Допустим, вы пишете статью, и по ходу необходимо вставлять ремарки или делать комментарии. Поместим эти комментарии внутрь плавающего блока, а сам блок разместим рядом с нужным местом в статье. Создадим такой блок, указав для него свойство float со значением left. Для плавающих блоков всегда надо явно указывать ширину, иначе блок растянется так, чтобы поместить в себя всё содержимое.
.comment { background-color: #CCCCFF; border: 1px solid; padding: 5px; width: 250px; Float: left } <DIV class="comment"> Демонстрация примера А что произойдет, если в HTML-коде разместить несколько одинаковых плавающих блоков? Рассмотрим такой пример кода: <DIV class="comment"> Демонстрация примера Получается, что второй блок располагается правее первого, несмотря на то что также является левосторонним. Если же требуется изменить положение плавающего блока, то следует воспользоваться свойством clear — аналогом атрибута clear=. Свойство clear Данное свойство определяет, какие стороны плавающих блоков не могут соседствовать с другими плавающими блоками. Свойство может принимать следующие значения: · left — блок должен размещаться ниже всех левосторонних плавающих блоков. · right — блок должен размещаться ниже всех правосторонних плавающих блоков. · right — блок должен размещаться ниже всех плавающих блоков. · none — нет ограничений на размещение (значение по умолчанию). <DIV class="comment"> Демонстрация примера Из всего сказанного можно сделать вывод, что несколько плавающих блоков будут располагаться на одной линии, если их суммарная ширина будет меньше ширины контейнера или равна ей. Если в качестве контейнера рассмотреть окно браузера, то таким образом легко реализовать вёрстку в несколько колонок. Создадим три плавающих левосторонниз блока, чтобы их суммарная ширина не превышала 100 % ширины окна браузера.
#block1 { background-color: #CCCCFF; border: 1px solid; padding: 5px; width: 30%; float: left } #block2 { background-color: #FFCCCC; border: 1px solid; padding: 5px; width: 30%; float: left } #block3 { background-color: #FFCC99; border: 1px solid; padding: 5px; width: 30%; float: left } <DIV id="block1"> Демонстрация примера Центрирование блока При вёрстке в одну колонку, если она ýже окна браузера, её чаще всего центрируют. Однако центрирование в CSS не так просто реализовать, как кажется на первый взгляд. Свойство text-align: center, к примеру, должно центрировать содержимое блока, но не сам блок относительно контейнера. В этом случае может помочь значение auto свойства margin. По спецификации CSS, для значения auto размеры полей вычисляются особым образом: если оба свойства margin-right и margin-left принимают значение auto, то их вычисляемые значения будут одинаковы. Что это означает? Когда левое и правое поля будут совпадать? Когда блок центрирован! Именно этого мы и добивались. Пример — блок шириной 60 % ширины окна браузера, располагаемый по центру. Но при этом текст в блоке прижат к левому краю, а не центрирован.
#block { background-color: #CCCCFF; border: 1px solid; padding: 5px; margin-right: auto; margin-left: auto; width: 60% } <DIV id="block"> Демонстрация примера
Популярное: Как распознать напряжение: Говоря о мышечном напряжении, мы в первую очередь имеем в виду мускулы, прикрепленные к костям ... Почему человек чувствует себя несчастным?: Для начала определим, что такое несчастье. Несчастьем мы будем считать психологическое состояние... Как вы ведете себя при стрессе?: Вы можете самостоятельно управлять стрессом! Каждый из нас имеет право и возможность уменьшить его воздействие на нас... ©2015-2024 megaobuchalka.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. (1053)
|
Почему 1285321 студент выбрали МегаОбучалку... Система поиска информации Мобильная версия сайта Удобная навигация Нет шокирующей рекламы |