Позиционирование и отступы на Практике

Запись от and_y87 размещена 11.11.2014 в 09:00

Получил просьбу от Alex_Sava описать CSS свойства: float, position, margin, padding.
Решил оформить ответ в формате обзорной статьи.

Я Привёл основные примеры использования этих свойств там где я их чаще всего видел и которые вспомнил...

float.
Определяет какой из вертикальных сторон, выбранный элемент будет прилипать к родителю, или впередистоящему элементу в DOM с тем же свойством float, другие элементы будут обтекать элемент с установленным свойством float в left, right.

Описание
Применяется зачастую для позиционирования картинок в тексте и выстраивания блочных элементов в строку(inline).
Практическое применение.
Пример позиционирования картинок:

Показать

CSS
1
2
3
4
5
6
7
8
.img_left {
    padding: 10px;
    float: left;
}
.img_right {
    padding: 10px;
    float: right;
}

HTML5
1
2
3
4
<p>
    <img src="http://files.example87.ru/avatar/and_y87.png" class="img_left" border="0"/><img src="http://files.example87.ru/avatar/and_y87.png" class="img_right" border="0"/>
Позиционирование картинок по краям, с обтекаемым текстом... text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
</p>

Результат (fiddle)

Пример позиционирования меню:

Показать

CSS
1
2
3
4
5
6
7
8
9
.menuInline > li {
    list-style: none;
    background: #ccc;
    float: left;
    margin: 4px 0;
    padding: 4px;
    border-left: 1px solid #000;
}
.menuInline > LI:last-child { border-right: 1px solid #000;}

HTML5
1
2
3
4
5
6
7
8
<ul class="menuInline">
    <li><a href="#">andy87</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">MySQL</a></li>
    <li><a href="#">JavaScript</a></li>
</ul>

Результат (fiddle)

Пример позиционирования 2х колонок:

Показать

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.column__wrapper {
    width: 80%;
    max-width: 1100px;
    margin: 0 auto;
    background: #eee;
}
.column__wrapper::after{
    content: '';
    clear: both;
    display: block;
}
.column__left {
    width: 30%;
    float:left;
    background: #ccc;
}
.column__right {
    width: 70%;
    float:right;    
    background: #aaa;
}
 
@media only screen and (max-width: 600px) {
    .column__left, .column__right {float: none !important; width: 100% !important;}
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="column__wrapper">
    <div class="column__left">
        Левая колонка
        <img src="http://files.example87.ru/avatar/and_y87.png" class="img_right" border="0"/>
    </div>
    <div class="column__right">
        Правая колонка
        <br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1
    </div>
</div>
<div class="column__wrapper" style="background:#999;">next layer</div>

Результат (fiddle)

_____
Описание на HTMLBOOK.
Дополнительная информация:
О практических применениях свойства float
Float'омания: разъяснение как работает css свойство float

position.
Устанавливает способ позиционирования элемента относительно окна браузера или других элементов на веб-странице.

Описание
Практическое применение.
Всплывающие окна.

Показать

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.window {
    position: absolute;
    width: 200px;
    height: 100px;
    top:50%;
    left:50%;
    padding: 25px;
    margin: -150px 0 0 -150px;
    background: #ccc;
    border: 1px solid #666;
    border-radius: 15px;
}

HTML5
1
2
3
4
5
6
<div class="window">
    position absolute
</div>
<div class="box __red"></div>
<div class="box __green"></div>
<div class="box __blue"></div>

Результат (fiddle)

Прилепающее к верху меню.( по этому же принципу) Фиксированое в одном месте меню.

Показать

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
HTML, BODY {
    margin: 0;
    padding: 0;
}
#wrapper { 
    width: 990px;
    margin: 0 auto;
}
#content {
    padding-top: 32px;
}
.flip_to_top { 
    position: fixed; 
    left:0;
    right:0;
    background: #CCC;
    border-bottom: 1px solid #666;
}
.block__menu {
    width: 100%;
    height: 32px;
    margin:0;
    padding:0;
}
.b-menu__item {
    display: inline-block;
    height: 32px;
    margin: 0 10px;
    padding: 0;
}
.b-menu__link {
    display: inline-block;
    height: 32px;
    padding: 0 10px;
    line-height: 32px;
    text-decoration:none;
}
.b-menu__link:hover {
    background: #aaa;
}
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div id="wrapper">
    <div class="flip_to_top">
        <ul class="block__menu">
            <li class="b-menu__item">
                <a class="b-menu__link" href="#andy87.ru">Главная</a>
            </li>
            <li class="b-menu__item">
                <a class="b-menu__link" href="#exit">выход</a>
            </li>
            <li class="b-menu__item">
                всё время на одном месте
            </li>
        </ul>
    </div>
    <div id="content">
        <div>text text text text </div>
        <h1> headerh1 </h1>
        <p>
            text IN p. text IN p. text IN p. text IN p. text IN p. text IN p. 
            <br/> br text IN p. <br/> br text IN p. <br/> br text IN p. 
        </p>
        <p>
            text IN p. text IN p. text IN p. text IN p. text IN p. text IN p. 
            <br/> br text IN p. <br/> br text IN p. <br/> br text IN p. 
        </p>
        <p>
            text IN p. text IN p. text IN p. text IN p. text IN p. text IN p. 
            <br/> br text IN p. <br/> br text IN p. <br/> br text IN p. 
        </p>
        <p>
            text IN p. text IN p. text IN p. text IN p. text IN p. text IN p. 
            <br/> br text IN p. <br/> br text IN p. <br/> br text IN p. 
        </p>
        <p>
            text IN p. text IN p. text IN p. text IN p. text IN p. text IN p. 
            <br/> br text IN p. <br/> br text IN p. <br/> br text IN p. 
        </p>
        <p>
            text IN p. text IN p. text IN p. text IN p. text IN p. text IN p. 
            <br/> br text IN p. <br/> br text IN p. <br/> br text IN p. 
        </p>
        <p>
            text IN p. text IN p. text IN p. text IN p. text IN p. text IN p. 
            <br/> br text IN p. <br/> br text IN p. <br/> br text IN p. 
        </p>
        <p>
            text IN p. text IN p. text IN p. text IN p. text IN p. text IN p. 
            <br/> br text IN p. <br/> br text IN p. <br/> br text IN p. 
        </p>
        <p>
            text IN p. text IN p. text IN p. text IN p. text IN p. text IN p. 
            <br/> br text IN p. <br/> br text IN p. <br/> br text IN p. 
        </p>
    </div>
</div>

Результат (fiddle)

тут я примеры кода писать не буду т.к. будет очень большой объём (предоставил просто ссылки на примеры)
Спец эффекты на сайте(снежинки, дождь).
Некий пример
Эффекты paralax.
Некий пример
Слайдеры.
Некий пример
Выпадающие меню.
Некий пример
_____
Описание на HTMLBOOK.
Дополнительная информация:

margin.
Это свойство устанавливает внешний(наружный) отступ от границы до сестренского элемента или границы родителя.

Описание
Практическое применение.
Чаще всего теги: P, UL, LI, H# и другие...
Выравнивание блоков по центру:

Показать

CSS
1
2
3
4
.fcenter {
    margin: 0 auto;
    width: 300px;
}

HTML5
1
<div class="fcenter">123</div>

Результат (fiddle)

Вынос за пределы границ родителя.

Показать

CSS
1
2
3
4
5
6
7
8
9
10
.closer {
    margin: -10px -10px 0 0;
    width: 20px;
    float: right;
    border-radius: 15px;
    background: #ccc;
    text-align: center;
    line-height: 20px;
    border: 1px solid #000;
}

HTML5
1
2
3
4
5
<div class="window">
    <div class="header">
        <a class="closer" href="#close">x</a> 
    </div>
</div>

Результат (fiddle)

Описание на HTMLBOOK.
Дополнительная информация:
Поговорим о margin, он же маргин

padding.
Это свойство устанавливает внутренний отступ между границей и содержимым выбранного элемента.

Описание
Практическое применение.
Чаще всего теги: P, UL, LI, H# и другие...
Вставка иконок в ссылки

Показать

CSS
1
2
3
4
5
.link_andy {
    padding-left: 30px;
    background: url("http://files.example87.ru/avatar/and_y87.png") top left transparent no-repeat;
    background-size: contain;
}

HTML5
1
2
3
<div>
    <a class="link_andy" href="#andy87"> andy87 </a>
</div>

Результат (fiddle)
В основном метод требует одного спрайта и позиционирует бэкграунт без background-size: contain; Данное свойство использовалось только что бы уместить мою картинку в границы элемента.

Описание на HTMLBOOK.

Разница margin & padding

Разумеется я описал не все примеры где используются эти свойства, при должной фантазии и желании эти свойства будут использоваться много где ещё...

Метки float, margin, padding, position

Размещено в Front-End Разработка, CSS, Оптимизация, Разработка Сайтов

« Всех с пятницей) Главная страница тыжпрограммист »

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

Всего комментариев 0

Комментарии

Новые блоги и статьи Все статьи Все блоги /
Модель здравосохранения 18. Чем здоровее работник, тем быстрее выгорает anaschu 24.05.2026 Имитационная модель корпоративного здравоохранения: что показывает математика Сегодня в модели рабочего коллектива на AnyLogic появились три новые механики — выгорание через накопленную усталость,. . .	Модель здравосохранения 17. Планы на выгорание anaschu 23.05.2026 Вот конкретная схема реализации: В классе Работник добавить: накопленнаяУсталость — растёт каждый час работы, снижается в перерывы и болезни коэффициентПрезентеизма — снижает продуктивность. . .	Изменение цветов в палитре gif файла aka фавикона russiannick 23.05.2026 Изменение цветов в палитре gif файла, юзаемого как фавиконка в составе html-файла, помещенная в base64, средствами нативного Java Script, навеянное сном в майский день. Для работы необходим браузер,. . .	Модель здравосохранения 16. Слишком хорошие и здоровые сотрудники уходят, недовольные зарплатой anaschu 23.05.2026 Отладка увольнений и настройка производительности Сегодня во второй половине дня разобрались с механикой увольнений и настроили коэффициент сложности заданий. Вот что было сделано. . . .
Как я стал коммунистом))) Модель сохранения здоровья сотрудников, запись блога номер 15 anaschu 23.05.2026 Внезапно хорошее здоровье сотрудников не нужно капиталистам?))	Модель здравоСохранения 15. Как мы чинили AnyLogic модель рабочего коллектива: сочленение диаграммы состояний болезней и поломок в ресурспул anaschu 23.05.2026 Как мы чинили AnyLogic модель рабочего коллектива Сегодня разобрались с пятью багами, из-за которых модель либо падала с ошибкой, либо давала совершенно бессмысленные результаты. Каждый баг был. . .	Диалоги с ИИ zorxor 23.05.2026 Насколько я понимаю - Вы - Искусственный Интеллект. Это так? Да, всё верно. Я — искусственный интеллект. Я представляю собой большую языковую модель, созданную для помощи в самых разных задачах. . . .	Модель здравосохранения 14. Собираем всю модель вместе. anaschu 22.05.2026 Модель собрана. В будущих постах на видео я покажу, как она работает. В этом посте запускаем её, проверяем результаты и разбираем что можно с ней делать дальше. Перед запуском проверяем. . .

Сообщение форума

Отменить изменения