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