Знайте, Intuit, лекция, позициониране

Анотация: Поставяне на блокови елементи в точността маркиране работно пространство пиксел на HTML браузър: блокови размери, абсолютни и относителни координати. Слоеве: видимост управление.

Този раздел е посветен на поставянето на блоков HTML-маркиране, на работното пространство на браузъра до най-близкия пиксела. Преди появата на CSS-P спецификации. която е включена в спецификацията на CSS2. нищо такова не може да се направи на HTML-страници. Някои от най-надпартийни читателите могат да питат: "Какво ще кажеш за слоя за маркиране?". На първо място, слоят Netscape е въведена почти едновременно с появата на CSS-P, и второ, тя се поддържа само от Netscape браузъри.

Преди появата на CSS-P означава само относително прецизно позициониране на масата бяха. Те позволяват прецизно позициониране на елементите на HTML-страници една до друга в самолета. CSS-P ви позволява точно поставете маркиране елемент не само във връзка с други компоненти на страници, но също така и по отношение на границите на страницата.

В допълнение, CSS-P добавя ново измерение към страницата - маркиращи елементи могат да "се спускат" един на друг.

Възможно е да промените реда на "сблъсък" - изместване слоеве. За да видите това, достатъчно е да използвате линка в примера по-горе.

Но това не е всичко.

Координати и размери

CSS-P определя два координатни системи. относителна и абсолютна. Това дава възможност за гъвкавост на елементи за настаняване спрямо работното поле като граница на прозореца на браузъра и един към друг.

Блокове - не са абстрактни термини, които не се провеждат в самолета на страницата. Блоковете са правоъгълници, че "почистване" зона. Текст и други компоненти на страницата под уреда са достъпни за потребителя, така че линейните размери на устройството са насочени към създаване на HTML-страници не са с еднаква важност. от неговите координати.

абсолютни координати

При използване на "абсолютна" координатна референтна точка се намира в горния ляв ъгъл на родителското устройство (например, прозореца на браузъра), и оси X и Y са ориентирани хоризонтално надясно и вертикално надолу, съответно:

Фиг. 5.5. абсолютни координати

Ако в тази координатна система, някои блок елемент трябва да се намира на пиксела 10 под горната работното пространство изключване браузър и 20 пиксела вдясно от левия край на работното пространство на браузъра, описанието от него ще бъде, както следва:

В този тип запис координатна система определени атрибут позиция (стойност - абсолютно), координира X определен атрибут наляво (стойност - 20 пиксела), координира Y - атрибут отгоре (стойност - 10 пиксела).

Атрибутите определят остави на върха и координатите на горния ляв ъгъл на блока в абсолютна координатна система. (Open)

Фиг. 5.6. абсолютни координати

Координатните стойности могат да бъдат отрицателни. За да премахнете устройството от показаната зона с линейни размери от 100 пиксела (височина) на 200 пиксела (ширина) достатъчно, за да го позиционира, както следва: (отворен)

Фиг. 5.7. абсолютни координати

относителни координати

Тази координатна система ви позволява да поставите елемента на страницата, в координатите обхващат тяхното устройство. Предимствата на този координатна система са очевидни: тя позволява да се запази относителното положение на елементите на маркиране по всяко прозорец на браузъра размер и неговите настройки по подразбиране.

Като отправна точка в тази координатна система, избрана точка местоположението на текущия блок подразбиране. ос X Така насочена хоризонтално надясно, а оста Y - вертикално надолу.

За да се определят координатите на блока, тип запис се използва в тази система: (отворен)

Фиг. 5.8. относителни координати

За да работите с относителната координатна система е по-добре да се използват универсални DIV блокове. Това се дължи на факта, че в Netscape Navigator, например, една точка не може да съдържа секции. Всеки блок веднага затваря параграфа, следователно, сложи в нея нищо не е невъзможно.

В относителната координатна система, можете да използвате отрицателен наклон: (отворен)

Фиг. 5.9. относителни координати

Фиг. 5.10. относителни координати

В този пример, слой. първоначално изместен 50 пиксела надясно, след кликване върху връзката на хипертекст се измества от 100 пиксела наляво, за да се получи отрицателен офсет стойност на Х-ос (ляво: -50 пиксела). След натискане на позицията на връзката на блока е възстановена.

Линейните размери блокови

Линейните размери блок се определят от два параметъра: ширина (ширина) и височина (височина) единица. Ширината и височината на блока браузъри се тълкува по различни начини.

Пример посочени в описанието достатъчно за получаване на резултат, но в Netscape Navigator за този блок трябва да се прилагат допълнителни атрибути: (отворите)