Cascading Style Sheets

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

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

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

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

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

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

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

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

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

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

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

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

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

Този блок се намира в еталонната точка спрямо координатите

И този блок се премества в дясно от 50px

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

Трябва да се отбележи, че NN непредказуема работи с относителни координати, така че трябва да се избягва.

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

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

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

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

.

Текстът се поставя на блока се наблюдава при Netscape Navigator

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

.

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