Пятница, 04 Января 2013 12:40

Влияние стилей на расположение элементов в потоке

Written by 
Оцени эту запись
(1 Голос)

Во время написания предыдущей статьи Рисуем сердце на HTML, CSS я упоминала, что трансформация элемента влияет только на отображение элемента, а не на его расположение относительно окружающих. А теперь хочу более подробно раскрыть эту тему. Стилизируя элемент, мы меняем его внешний вид. Задавая элементу размеры, мы его увеличиваем. Окружающие элементы подстраиваются под его размеры. Но некоторые свойства вырывают элемент из потока (position: absolute) или не влияют на его расположение в потоке (transform: rotate/scale/skew). Рассмотрим эти интересные свойства.

Для наглядности создадим строчный элемент и расположим его в текстовом блоке.

 

<div style="padding: 10px; background: violet; line-height: 20px;">Lorem Ipsum is simply dummy text of the printing and typesetting <span style="background: blueviolet; color: white; padding: 3px;">industry</span>. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</div>

 

 

Получили такую картинку: 

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

 

Теперь будем применять разные стили для нашего элемента.

 

Position: absolute

 

Начнем с самого простого - position: absolute. Данное свойство просто уберет наш элемент из потока. Текст, расположенный до и после него, просто сомкнется. Похожее поведение будет и при position: fixed.

 

span {

position: absolute;

top: 0;

left: 0;

}

 

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

 

 

Свойство transform

 

Трансформация элемента влияет только не его отображение. Но не меняет его расположение в потоке.

 

span {

-webkit-transform: scale(1, 3);

-moz-transform: scale(1, 3);

display: inline-block;

}

 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
 

 

Для того, чтобы сработала трансформация, я задала элементу свойство display: inline-block. Как видим, элемент остался на своем месте, но его увеличение не раздвинуло ни строки текста, ни родительский контейнер.

 

Аналогично и со значениями rotate(поворот) и skew(наклон).

 

При применении rotate, блок налез на нижний текст. При задании наклона элемент и на текст налез, и из блока вылез.

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

 

 

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

 

 

Свойство margin.

 

Еще немного остановлюсь на особенности свойства margin. При применении его к блочным элементам, свойство работает. Но на строчные элементы оно действует только частично.

 

span {

margin-top: 20px;

}

 

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

 

Отступ сверху не сработал. Аналогично будет и с отступом снизу.

 

span {

margin-right: 20px;

}

 

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

 

А вот отступ справа сработал. Так же будет и с левый отступом. Это связано с тем, что наш элемент строчный. А стоит ему только добавить свойство display: inline-block, работать будут все margin'ы:

 

 

span {

margin: 20px;

display: inline-block;

}

 

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов