12793

Позиционирование элементов

Практическая работа

Информатика, кибернетика и программирование

Позиционирование элементов При помощи CSSпозиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками см. лаб. № 11 позиционирование даёт вам большие возможности для создания точного и навороченного дизайна. В этом уроке мы обсуди

Русский

2013-05-03

41.88 KB

3 чел.

Позиционирование элементов

При помощи CSS-позиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками (см. лаб. № 11) позиционирование даёт вам большие возможности для создания точного и навороченного дизайна.

В этом уроке мы обсудим следующее:

  •  Принципы CSS-позиционирования 
  •  Абсолютное позиционирование 
  •  Относительное позиционирование 

Принципы CSS-позиционирования

Представим окно браузера как систему координат:

Принципы CSS-позиционирования  - в том, что вы можете расположить бокс в системе координат где угодно.

Скажем, мы хотим позиционировать заголовок. При использовании боксовой модели (см. лаб.№7) заголовок выглядит так:

Если мы хотим расположить его на 100px от верхней границы документа и на 200px слева, мы должны ввести следующий код CSS:

h1 {

position:absolute;

top: 100px;

left: 200px;

}

Вот результат:

Как видите, Позиционирование с помощью CSS - очень точная техника при размещении элементов. Это намного проще, чем использовать таблицы, прозрачные изображения или ещё что-нибудь подобное.

Абсолютное позиционирование

Элемент, позиционированный абсолютно, не получает никакого пространства в документе. Это означает, что после позиционирования он не оставляет после себя пустое пространство.

Для абсолютного позиционирования элемента свойство 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;

}

  •  Показать пример 

Относительное позиционирование

Чтобы позиционировать элемент относительно, установите в свойстве position значение relative. Разница между относительным абсолютным позиционированием состоит в том, как обсчитывается позиционирование.

Позиция элемента, размещаемого относительно, обсчитывается относительно его оригинальной позиции в документе. Это означает, что вы смещаете элемент вправо, влево, вверх или вниз. Таким образом, элемент всё ещё занимает в документе пространство после позиционирования.

Как пример относительного позиционирования попробуем разместить три рисунка относительно их оригинального расположения на странице. Обратите внимание, что рисунки оставили после смещения пустое пространство на своих оригинальных позициях в документе:

#dog1 {

position:relative;

left: 350px;

bottom: 150px;

}

#dog2 {

position:relative;

left: 150px;

bottom: 500px;

}

#dog3 {

position:relative;

left: 50px;

bottom: 700px;

}

  •  Показать пример 

Задание: в последнем примере поменяйте позиционирование на абсолютное, почувствуйте разницу. 

Резюме

В последних двух уроках вы научились создавать поплавки и позиционировать элементы. Эти два метода дают вам определённые преимущества при конструировании страниц без необходимости использовать старые методы вроде таблиц и прозрачных изображений в HTML. Вместо них используйте CSS. Это точнее, имеет определённые преимущества  и намного проще в работе.

К началу


 

А также другие работы, которые могут Вас заинтересовать

69279. Драйвер ODBC. Підключення до потоку даних. Запит даних 50 KB
  Система управління базами даних (DBMS — Database Management System). DBMS є програмним забезпеченням, що надає доступ до структурованих даних і забезпечує можливість маніпулювання ними. Прикладами найбільш популярних DBMS є Microsoft Access, Microsoft SQL Server...
69280. Підготовка і виконання запиту. Отримання даних. Відключення 41 KB
  Останнє, що додаток повинен зробити після підключення до джерела даних, але перш, ніж воно буде здатне здійснювати запити SQL, — це отримати дескриптор оператора (statement handle) або hstmt. Щоб отримати дескриптор hstmt, достаточш оголосити змінну типу SQLHSTMT і викликати функцію...
69281. Створення першого проекту Visual Studio 105.5 KB
  В меню File (Файл) виберіть пункти New (Створити), вкладку Project (Проект) або натиснути комбінацію клавіш Ctrl+Shift+N. У будь-якому випадку на екрані з’явиться діалогове вікно New Project (мал. 1.4), що дозволяє створювати всі типи проектів Visual Studio.
69282. Динамічний обмін даними. Функція Initlnstance 74.5 KB
  Динамічний обмін даними (DDX — Dynamic Data Exchange) — це засіб, за допомогою якого можна легко передавати дані між елементами управління діалогового вікна і змінними-членами додатку. Щоб створити змінну DDX, досить клацнути на елементі управління в ресурсах шаблону...
69283. Обробники подій. Концепція документ/представлення 82 KB
  Як відомо, операційна система Windows використовує модель, керовану подіями (event-driven). Це означає, що замість послідовного набору команд додаток містить цикл повідомлень (message loop), який обробляє повідомлення (або події), передавані додатку операційною системою Windows.
69284. Клас CDocument 49 KB
  Клас CDocument забезпечує стандартну поведінка об’єктів документа додатку MFC. Клас CDocument дозволяє створювати нові документи, зберігати дані документа на диску (сериализация), забезпечувати стандартну взаємодію між об’єктом документа і вікном уявлення...
69285. Документи і обробка повідомлень 34.5 KB
  Одне з найбільш важливих достоїнств документа в тому, що об’єкт CDocument не пов’язаний з вікном безпосередньо. Проте, саме об’єкт CDocument і є адресатом передаваних команд. Отже, цей об’єкт може отримувати повідомлення від операційної системи. Відповідальність за передачу повідомлень...
69286. Керування документами та представленнями 47.5 KB
  Оскільки архітектура документ/представлення є наріжним каменем будь-якого документ - орієнтованого застосування (як вже було сказано, діалогові застосування потрійні трохи інакше, чим додатки архітектури документ/представлення), класи MFC повинні володіти здатністю створювати...
69287. Клас CView 50 KB
  Для кожного класу, похідного від CDocument, що потребує надання користувачеві візуального інтерфейсу, необхідний клас, похідний від CView, який і забезпечує цей інтерфейс. Клас, похідний від CView, забезпечує як візуальне представлення даних документа, так і взаємодію з користувачем у вікні представлення.