m5 - (divspan(marginpadding display display Zindex

m5 - (divspan(marginpadding display display Zindex

This preview shows page 1 - 4 out of 16 pages.

Формирование блочной модели Основные теги для верстки (div и span). Отступы элементов (margin и padding). Обтекаемые элементы. Позиционирование блоков. Оглавление Свойство display Значения свойства display Схлопывания Формирование блочной модели Обтекаемые элементы Позиционирование блоков Абсолютное позиционирование Относительное позиционирование Фиксированное положение Значение по умолчанию Совмещенное значение Z­index
Image of page 1
Практика Создание основной структуры сайта Домашнее задание Дополнительные материалы Используемая литература © geekbrains.ru 1
Image of page 2
Свойство display При помощи css можно изменить тип элемента, т.е. блочный тег можно сделать строчным, а строчный ­ блочным. Для этого существует css свойство ­ display. Вернёмся к предыдущему примеру и для элементов <div> задать значение свойства display: inline;, а для <span> ­ значение display: block; div , span { border : 1px solid #000; width : 400px; height : 50px; } div { display : inline; } span { display : block; } В этом случае получается, что элементы поменялись местами, <div> стал строчным элементом, и ему теперь невозможно задать ни ширину, ни высоту, а <span> стал блочным, и ему теперь можно задать и ширину и высоту. Значения свойства display none (скрыть); block (блочный); inline (строчный); inline­block (строчно­блочный); table­cell (ячейка таблицы); flex (гибкий). Блочный элемент (display: block;) создает разрыв строки перед тегом и после него. Он образует прямоугольную область, по ширине занимающую всю ширину веб­страницы или блока­родителя, если для него не задано значение width. Блочные элементы могут содержать внутри себя элементы любого типа. Нельзя размещать блочные элементы внутри строчных, за исключением элемента <img>. Для блочных элементов можно задавать margin и padding.
Image of page 3
Image of page 4

You've reached the end of your free preview.

Want to read all 16 pages?

  • Spring '11
  • B
  • Домашнее задание  Дополнительные материалы , <div ​ class​, background­color​ : #2118FF; , CSS  div ​, hidden​ ; , HTML  <div>​

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern

Stuck? We have tutors online 24/7 who can help you get unstuck.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes