- Главная
- Разное
- Дизайн
- Бизнес и предпринимательство
- Аналитика
- Образование
- Развлечения
- Красота и здоровье
- Финансы
- Государство
- Путешествия
- Спорт
- Недвижимость
- Армия
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Позиционирование в CSS презентация
Содержание
- 1. Позиционирование в CSS
- 2. Повторение display: block display: inline display: inline-block
- 3. Домашнее задание Как сделать блок в центре по вертикали? Несколько способов
- 4. Position Позволяет позиционировать элементы position: static не
- 5. Относительное позиционирование position: relative; получает свойства top,
- 6. Абсолютное позиционирование position: absolute; Выпадает из потока.
- 7. Фисированное позиционирование position: fixed Позиционируется относительно window
- 8. z-index Работает с спозиционированными элементами. Чем выше
- 9. overflow Отображение наполнения блока, если выходит за
- 10. box - sizing Ширина/высота блока = width/height
- 11. Float float: left | right | none
Повторение display: block display: inline display: inline-block display: none -! блок по центру margin: 0 auto;
Слайд 2Повторение
display: block
display: inline
display: inline-block
display: none -!
блок по центру margin: 0 auto;
Слайд 4Position
Позволяет позиционировать элементы
position: static не сдвигается
position: relative
position: absolute
position: fixed
Позволяет сдвигать элемент со своего места
Позволяет сдвигать элемент со своего места
Слайд 5Относительное позиционирование
position: relative;
получает свойства top, bottom, left, right
top: 20px; - вниз
на 20px
top: -20px; -вверх
Элемент сдвигается относительно своего положения. Блок остается в потоке.
top: -20px; -вверх
Элемент сдвигается относительно своего положения. Блок остается в потоке.
Слайд 6Абсолютное позиционирование
position: absolute;
Выпадает из потока. Начинает позициониоваться относительно спозиционированного родителя. Становиться
блоком. Ширина устанавливается по содержимому(не вся свободная). Покидает свое место, другие элементы занимают его место. Свойства top,bottom,left,right отсчитываются от спозиционированного родителя.
Задайте родителю relative, а потомку absolute.
Задайте родителю relative, а потомку absolute.
Слайд 7Фисированное позиционирование
position: fixed
Позиционируется относительно window
При прокрутке страницы - фиксированный блок не
прокручивается вместе со страницей.
Слайд 8z-index
Работает с спозиционированными элементами.
Чем выше z-index, тем выше находиться элемент над
другими элементами с меньшими z-index.
Слайд 9overflow
Отображение наполнения блока, если выходит за пределы элемента
overflow: visible -
отображает содержание в любом случае
overflow: hidden - все, что выходит за блок - скрыто
overflow: scroll - добавляет прокрутку
overflow:auto - добавляет прокрутку, только если нужно
overflow: hidden - все, что выходит за блок - скрыто
overflow: scroll - добавляет прокрутку
overflow:auto - добавляет прокрутку, только если нужно
Слайд 10box - sizing
Ширина/высота блока = width/height + margin + padding +
border
width и height - размер контента внутри блока, блок под них подстраивается.
Box - sizing меняет эту ситуацию.
box - sizing: content-box Самостоятельно
box - sizing: border-box
box - sizing: padding - box
width и height - размер контента внутри блока, блок под них подстраивается.
Box - sizing меняет эту ситуацию.
box - sizing: content-box Самостоятельно
box - sizing: border-box
box - sizing: padding - box
Слайд 11Float
float: left | right | none - прижимает элемент к краю,
текст обтекает, блоки не замечают и поднимаются(которые ниже). Подходит для кроссбраузерности.
Зафлоченный строковый элемент получает свойства блочного. Контент ужимается по ширине. Выпадает из потока.
Зафлоченный прижимается к зафлоченному блоку.
Для того, чтоб блок ниже увидел зафлоченный блок - clear: left | right | both
Зафлоченный строковый элемент получает свойства блочного. Контент ужимается по ширине. Выпадает из потока.
Зафлоченный прижимается к зафлоченному блоку.
Для того, чтоб блок ниже увидел зафлоченный блок - clear: left | right | both
