Подписка
Email
Fb
RSS
Twitter
Email

Видео уроки CSS. Часть8

Здравствуйте, уважаемые читатели блога DenWeb.Ru!

Продолжаем наши уроки CSS. Для тех, кто здесь впервые — первый урок здесь.

Тема же сегодняшнего урока очень важна, потому что она содержит моменты, знание которых поможет Вам избежать в дальнейшем ошибок при верстке сайтов.

Сегодня будем говорить о блочной модели. Что же такое блочная модель? Для того, что бы это понять смотрим видео, в котором я постарался все подробнейшим образом разъяснить.

Итак, каждый элемент на html странице представляет собой самостоятельный блок. Причем не надо путать это понятие («блок») с блочными и строчными элементами в html. То есть, строчный элемент, можно назвать блоком, имеющим свои свойства или параметры (ширину, высоту...).

Любой блок представляет собой прямоугольник определенной высоты и ширины.

Ширина блока складывается из ширины контента (задается свойством width), значений полей (padding), значений границ (border) и значений отступов (margin). Высота аналогично. Нагляднее это видно на схеме:

Это все, что я хотел рассказать о блочной модели. В следующем уроке поговорим о позиционировании элементов.

Вы можете оставить комментарий.

21 комментариев к записи “Видео уроки CSS. Часть8”

  1. спасибо) так и не могу себя заставить верстать блоками, всё также по старинке верстаю таблицами.

  2. Семён:

    Огромное спасибо за проделанную работу admin! и по HTML и по css! всё разжёвано досконально очень помогают твои уроки разобраться во всем этом!

  3. admin:

    Пожалуйста!

  4. Дмитрий:

    я тоже благодарен! сделано хорошо, спасибо!только одно пожелание: сделайте ссылку на следующий урок после каждого предыдущего — станет в сто раз удобнее проходить курс не отвлекаясь на поиск следующего урока)

  5. Алексей:

    Большое спасибо автору за проделанный труд!

  6. Денис, огромное спасибо за знания которые ты даёшь! Ещё ни один учебник  и ни один человек так понятно не объяснял.

  7. Alex:

    Спасибо за уроки. 5+. У меня вопрос: какой прогой рисуете квадратики. Не похоже на Picpick

  8. Андрей:

    Добрый день. А можно с помощью css нарисовать круг, треугольник и другие фигуры  ?

  9. Андрей:

    Где можно скачать маленькие  метки вместо кружочков для маркера?

  10. Никита:

    Ден а что блок и рамка почти одно и тоже? на рамку могут заходить элементы. а блок это тоже самое только на него не могут заходить элементы?

  11. Даша:

    Здравствуйте, Ден. Столкнулась с проблемой — абсолютно одинаковые значения свойств отображаются по-разному. Вот я пробовала для случаев, когда контент — текст и когда контент -табличка. В случае таблицы размер блока, отображаемого в браузере, уже на 45 px. В чем моя ошибка?html:  <p id="abzac"> ...</p>  <table class="table"  border="1" cellspacing="0"> ...</table>сss:#abzac {    width: 300px;    margin-left: 10px;    border: 3px dashed #999;    padding: 20px;}.table {    width: 300px;    margin-left: 10px;    border: 3px dashed #999;    padding: 20px;}

  12. Максим:

    Дэн, огромное спасибо тебе за такие безценные уроки!Ребят, минимум, что мы можем сделать в знак благодарности автору — пощёлкать ту же рекламу)

  13. Егор:

    Денис, огромное спасибо за уроки! У меня есть к тебе маленькая поправка и пожалуйста не принимай на свой счет, но ты деловой человек, а как деловой человек должен самосовершенствоваться :) Так вот пожалуйста прими во внимание свое произношение англ. яз. слов. например width это совсем не вич) Я тебе нисколько  не укоряю  просто в дальнейшем, если ты захочешь выйти  на новые горизонты ( а без англ  там нельзя ) то потом самому будет очень сложно переучиваться. Заранее извини и еще раз спасибо за ценнейший опыт, который я получил на твоих уроках. Желаю успехов

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика