Css — Разметка страницы CSS


Содержание

Блочная верстка или основы анатомии скелета сайтов

Сайты тоже имеют свой скелет. Но о его особенностях спрашивать врачей бесполезно. Да и ветеринары тоже не в курсе строения сайта. Об этом ведомо лишь верстальщикам. Именно от них зависит строение скелета будущего ресурса. А главным способом создания костей его скелета является блочная верстка.

Верстка сайта – ремесло для посвященных

Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:

Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html кода и таблиц css скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.

В процессе верстки кодом html происходит разбивка « скелета » сайта на части. А с помощью css ( каскадных таблиц стилей ) задаются размеры его « костей », цвет и расположение.

Различают несколько видов верстки:

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

и его дочерние теги. Верстка с помощью таблиц позволяет наиболее пропорционально расположить все элементы дизайна относительно друг друга. Но в тоже время такой код получается слишком объемным:

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

Содержимое страницы, сверстанной на основе таблиц, не будет отображено до тех пор, пока не загрузятся все данные. Блочная верстка позволяет отображать каждый загруженный элемент отдельно.

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

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

II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:

  • Отделение стиля элементов от кода html ;
  • Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.
  • Лучшая индексация поисковиками;
  • Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;
  • Легкость создания визуальных эффектов ( выпадающих меню, списков, всплывающих подсказок ).

Основным недостатком блочной верстки является некая « двусмысленность » понимания ее кода различными браузерами. Поэтому часто html страницы приходится « доводить » путем использования специальных хаков.

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

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

Основным элементом, применяемым в блочной верстке, является тег

Как происходит блочная верстка?

Перед началом верстки готовый psd макет сайта в графическом редакторе разрезают на блоки ( слои ). В отдельную папку помещают вырезанные фоновые картинки, которые будут прикрепляться отдельно к каждому слою:

Для примера возьмем вот такой макет сайта, созданный в Photoshop . Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id . Получается такая структура:

Затем к готовой структуре сайта на html строкой
прикрепляем файл css . После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры.

Полный код примера index.html :

Содержимое файла style.css :

Вот так наш пример блочной верстки сайта выглядит в окне браузера:

Конечно, этот пример является лишь наглядным пособием для демонстрации того, как происходит блочная верстка. Настоящая верстка происходит с использование фоновых изображений и логотипов, подключаемых в css . А также с включением в html и css кода хаков для оптимизации отображения во всех браузерах.

Для редактирования кода страниц сайта используются специальные редакторы html . Многие из них способны автоматически генерировать код визуальных элементов, создаваемых в них пользователем в режиме « дизайн ». Но такой код не является валидным, и чаще всего нуждается в « ручной » доводке:

Свое роднее!

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

Css — Разметка страницы CSS

Блочная разметка страниц средствами CSS чаще всего применяется для размещения блоков текста (или графики) на странице. Что-то вправо, что-то влево, основное в центре.

Как правило, при этом применяют кучу так называемых «хаков»— участков кода описания стилей, которые читаются только одним броузером или, наоборот, только одним броузером не читаются.

Все это понятно, когда заказчику надо что-то определенное, уже обговоренное ранее.

А если проект под себя делается?
Может, есть возможность сделать все описания стилей в одном файле не используя всяких хаков?

Кроме того— может быть стоит отказаться от стандартов, установленных табличной версткой?

Итак, свой проект

  1. проект свой— дизайн и размещение блоков на наше усмотрение
  2. проект информационный, основное— текст

НачинаемШапка

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

Ну, давайте три возьмем.. Для кучи. Колонка содержимого в центре, колонка меню справа, колонка новостей слева.

Ну, конечно. Адреса, копирайты, пару счетчиков.
А что там еще? А ничего. видимо.

Три колонки

Что если просто сделать? Задать ширину в процентах, спозиционировать по абсолютному типу, правый угол тоже зафиксировать в процентах?

#left <
width: 18%;
border: 1px solid #000000;
position: absolute;
left: 1%;
>
#center <
width: 60%;
border: 1px solid #000000;
position: absolute;
height: auto;
left: 20%;
>
#right <
width: 18%;
border: 1px solid #000000;
position: absolute;
left: 81%;
>

Получили три колонки, не зависящие ни от ширины экрана, ни от прочих мелочей :)

Теперь шапку и футер сделаем.
Делаем три блока шириной в сто процентов, с отступами «0».

Один блок будет для шапки, один для текста, один под футер.

#left <
width: 18%;
border: 1px solid #000000;
position: absolute;
left: 1%;
>
#center <
width: 60%;
border: 1px solid #000000;
position: absolute;
height: auto;
left: 20%;
>
#right <
width: 18%;
border: 1px solid #000000;
position: absolute;
left: 81%;
>
#top <
background-color: #009999;
display: block;
margin: 0px;
padding: 0px;
width: 100%;
height: 100px;
>
#text <
background-color: #FFFFFF;
display: block;
margin: 0px;
padding: 0px;
width: 100%;
>
#fut <
background-color: #999999;
display: block;
margin: 0px;
padding: 0px;
width: 100%;
height: 100px;
>

Итак, почти все есть. Надо только с отступами разобраться в текстовом блоке.

#left <
width: 18%;
border: 1px solid #000000;
position: absolute;
left: 1%;
>
#center <
width: 60%;
border: 1px solid #000000;
position: absolute;
height: auto;
left: 20%;
>
#right <
width: 18%;
border: 1px solid #000000;
position: absolute;
left: 81%;
>
#top <
background-color: #009999;
display: block;
margin: 0px;
padding: 0px;
width: 100%;
height: 100px;
>
#text <
background-color: #FFFFFF;
display: block;
padding: 0px;
width: 100%;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
border: 2px solid #9999FF;
height: auto;
>
#fut <
background-color: #999999;
display: block;
padding: 0px;
width: 100%;
height: auto;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-top: 0px;
border: 1px solid #CC3399;
>
#text1 <
background-color: #FFFFFF;
display: block;
margin: 0px;
padding: 0px;
width: 90%;
float: right;
border: 1px solid #009900;
>
#text2 <
background-color: #FFFFFF;
display: block;
margin: 0px;
width: 90%;
float: left;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 50px;
padding-left: 0px;
border: 1px solid #FF0000;
>

Основы CSS: разметка страниц

Создание сайтов – это работа не для людей со слабыми нервами. Помимо знаний нужно обладать креативным мышлением, задатками перфекциониста и филигранной точностью при разметке страницы. CSS в этом вопросе просто незаменим. И знать его основы необходимо каждому вебмастеру.

Что такое CSS?

Тем, кто знаком с HTML, не нужно рассказывать, что это язык разметки страницы. Но его создатели решили добавить в него теги, отвечающие за внешний вид и дизайн. Вот только при таком подходе код страницы становился слишком объемным и практически нечитабельным. Естественно, этот путь вел в никуда, поэтому было принято комплексное решение: HTML отвечает за разметку страниц, CSS – за визуальное оформление.

Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадная таблица стилей). Она состоит из параметров, что отвечают за визуальное оформление объектов на странице.

Преимущества CSS

Каскадная таблица стилей позволяет вебмастеру не только создать красивый ресурс, но и сделать код читабельным, значительно сократив его размер. Используя CSS, можно задавать такие параметры, что невозможны в HTML-разметке страницы.

С CSS можно буквально в несколько кликов изменять внешний вид страниц ресурса. Это очень удобно, особенно если сайт многостраничный. Все изменения дизайна производятся в каскадной таблице стилей, а не путем замены параметров на каждой странице ресурса. И только благодаря CSS можно осуществить блочную разметку.

Подключение CSS

Говоря о базовых принципах CSS, первым делом нужно научиться подключать каскадную таблицу стилей к HTML-файлу. Этот процесс достаточно прост. Первым делом необходимо создать HTML-документ. Для тех, кто еще не знает, его создают в программе «Блокнот». Потом при помощи функции «Сохранить как» необходимо задать расширение HTML.

Точно таким же образом создается и каскадная таблица стилей, только файлу следует задать расширение css. Полученный документ нужно сохранить в той же папке, где и HTML файлы. Допустим, документ таблицы стилей носит название style.css. Чтобы подключить его к HTML-документу, необходимо воспользоваться тегом
, что отвечает за подключение внешних файлов. Между тегами , необходимо вписать следующее:

Пожалуй, это один из самых удобных способов подключения внешних файлов.

Правило CSS

Изучение CSS разметки должно начинаться с изучения синтаксиса. В каскадной таблице стилей не существует тегов, скриптов или параметров. Здесь есть только правило, которому необходимо следовать. Состоит оно из селектора и блока стилей. Допустим, в каскадной таблице стилей задана позиция: body.

Здесь body и есть селектором, отвечающим за стилевое форматирование тела сайта; background:black и color:white — это свойства и их значения. Они записываются через точку с запятой. Такая позиция делает фон сайта черным, а текст белым.

Селекторы

Что ж, продолжаем интенсивное введение в CSS. Разметку страниц будет достаточно сложно сделать без знаний о селекторах. Если со свойствами и их значениями все понятно, то дополнительные знания о селекторах помогут сделать желаемую разметку страницы.

Что же нужно знать о селекторах? Во-первых, их разновидности:

  • Идентификатор. В качестве селекторов могут использоваться названия элементов страниц. В случае, когда, к примеру, необходимо выделить какой-то абзац текста другим цветом, добавляют идентификатор. Его задают параметром id.

Стоит помнить, что один идентификатор можно использовать только раз. В этом примере селектор получил название pink, если нужен еще один идентификатор, то ему просто нужно присвоить другое имя (pink2, green и т. д.).

Классы. Селектор по классу используется, если для нескольких объектов нужно задать одинаковые параметры. К примеру, для двух абзацев текста необходимо задать красный цвет.

Объектов с классами может быть сколько угодно.

Для одного и того же объекта можно указать и класс, и идентификатор — это не противоречит CSS разметке. Но поскольку идентификатор имеет больший приоритет, то для объекта будет использован именно его стиль. При разметке страницы в CSS это стоит учитывать.

Идентификаторы и классы можно применять для любых объектов. И если возникает необходимость задать один стиль для текста и картинки, то можно не указывать имя элемента, как это было в примере (p#pink, p.red). Можно просто поставить точку или решетку. Также селекторы можно группировать. Например, h1, h2, h3.

Разметка страниц

Изучая разметку страниц, можно понять, что существует несколько ее разновидностей:

  • Табличная. Когда еще не было каскадной таблицы стилей, эта разметка была основной. Она позволяла максимально точно разместить объекты ресурса друг от друга. Но код получается слишком большим и плохо индексируется поисковиками. Еще один недостаток такого метода – скорость загрузки. Пока не загрузится вся таблица, пользователь не увидит даже начало текста.
  • Блочная. Сейчас это основной способ разметки страниц. Его использование стало возможным только благодаря развитию и совершенствованию таблицы стилей.

Преимущества блочной верстки

Блочная разметка страницы средствами CSS имеет несколько неопровержимых преимуществ. Во-первых, стиль объектов находится отдельно от HTML документа, что значительно повышает читабельность кода и позволяет быстро производить визуальные изменения. Во-вторых, есть возможность наложить один слой на другой, а это в несколько раз облегчает процесс позиционирования. Естественно, такие сайты быстрее загружаются и индексируются поисковыми системами. Разметка страницы в CSS позволяет легко задавать современные визуальные эффекты.

Единственный недостаток такого подхода – разное «понимание» браузерами. Некоторые отображают ресурс в таком виде, в каком видит его веб-мастер. Но есть браузеры, что искажают изображение, поэтому при большом количестве классов и селекторов необходимо использовать хаки, что сделают код кроссбраузерным.

Как сделать блочную верстку сайта?

Первое, с чего стоит начать, — с создания макета. Это должно быть обычное изображение с расширением psd. После его создания (приобретения или скачивания) необходимо разрезать изображение на блоки и поместить в одну папку (желательно отдельную). Эти фрагменты будут использоваться, как фон для блоков.

В HTML документе для блочной верстки используют тег

Первое, что нужно сделать после того, как макет сайта будет разрезан на части, в HTML задать структуру сайта, используя тег

Задаем параметры

На примере хорошо видно, как задаются параметры для блоков CSS. Позиционирование разметки страницы задано в пикселях, хотя в большинстве случаев лучше использовать проценты. В окне браузера этот сайт будет иметь вид «скроенного из разных частей полотна» так как в примере были использован только цвет области блока. Но если заменить его фоновым изображением, то можно получить не только красивый, но и достаточно функциональный продукт.

Этот пример — лишь небольшая часть всего того, с чем должен будет столкнуться веб-мастер, работая над качественными характеристиками ресурса. При создании хорошего веб-ресурса, нередко могут быть использованы хаки для приобретения функции кроссбраузерности. Редактировать коды страниц можно в специальных редакторах, что значительно упрощает работу, хотя не избавляет веб-мастера от необходимости ручного редактирования.

Создать сайт самостоятельно может каждый. Главное — понимать, что и CSS, и HTML были созданы людьми и предназначены для людей. Основы разметки страниц доступны всем, а создание веб-ресурсов не только прерогатива избранных, но и может быть вполне обыденной деятельностью каждого желающего.

Разметка страницы CSS

Делаю сайт, хочется, чтобы блоки (1,2) были зафиксированы, а блок 3 был с прокруткой (https://pp.vk.me/c614719/v614719543/1ccae/RjgviyZ3MeE.jpg).

Подскажите, как это реализовать можно, пытался сделать, но у меня во время прокрутки 3 блок выходит за пределы (https://pp.vk.me/c614719/v614719543/1ccb7/Rdm2ReuC8ss.jpg). Также надо, чтобы, когда блок 3 и блок 2 сравняются снизу, прокрутка остановилась.

2 ответа 2

Используйте котнейнер div и css свойство overflow и почитайте эту статью.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками веб-программирование html css или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.13.35429

HTML разметка текста

Основные термины и понятия в HTML разметке:

  1. Article >, nav >, header >, footer > — HTML теги, которые используются для разделения информации на блоки.
  2. Футер — нижняя часть веб-страницы. Содержит в себе контактную информацию.
  3. Шапка — верхняя часть страницы. Содержит в себе логотип, а также навигационную панель.

В этой статье мы поговорим с вами о том, как создать каркас страницы, а также о том, в каких блоках располагать те или иные элементы.

Блочная верстка стала довольно популярной и используется практически везде. Раньше, в HTML 4, блочные конструкции создавались с помощью блоков div. Если открыть любой сайт 2012-2014 года, а затем открыть его исходный код, то вы увидите длинный и сложный код нагроможденный блоками div >.

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

Основная проблема — большое количество блоков div >, их могло быть и до 50,100 и даже 200. Такое нагромождение могло вызвать путаницу в коде — многие разработчики очень часто путались в своем коде. Это делало разработку медленной.

HTML 5 изменил эту проблему, добавив несколько семантических блоков. Каждый блок был настроен под определенную информацию, как «nav» для навигационной панели, или «footer» для подвала.

Кроме этого, новая версия HTML уделила большое внимание семантическому ядру сайта. Поисковики имели лучшее понимание информации, которая расположена в определенном блоке.

Семантические элементы. HTML 5

Перед тем как говорить о разметке веб-страницы, давайте рассмотрим основные теги-контейнеры:

  1. Header > — необязательный тег, который может использоваться для навигации, главного заголовка, либо же для размещения отдельного блока с информацией.
  2. Nav > — контейнер для навигации страницы или сайта. Может находиться в теге header, но это необязательно. На странице может присутствовать несколько блоков

Антигерой CSS-разметки — свойство «display: table»

Восстановление подмоченной репутации CSS-таблиц

Антигерой — один из центральных персонажей фильма, книги или пьесы, не обладающий обычными героическими качествами.

Использование таблицы в разметке — щекотливая тема. Для многих веб-разработчиков табличная вёрстка — табу. Хотя существует множество доводов против этого, большинство разработчиков не могут внятно объяснить, почему нельзя использовать табличную разметку, кроме того, что «таблицы — это плохо».

Импульс от давнего начала движения против использования HTML-таблиц был силен. Он оказал влияние на многие поколения разработчиков, заставив их думать, что любое использование таблиц — зло.

Надо признаться, я один из тех разработчиков, кто избегает табличной вёрстки даже для представления табличных данных. Мало того, я даже упрекал своих коллег, когда они использовали display: table для колоночной разметки (или разметки «Holy Grail»).

Оглядываясь назад, я понимаю, что с упрямством, достойным лучшего применения, тратил огромное количество времени на то, чтобы «заточить» CSS под нужную мне задачу.

Два типа табличной разметки

Использовать таблицы в вёрстке можно двумя способами: это HTML-таблица и CSS-таблица.

HTML-таблица — это когда для создания таблицы используется нативный HTML-тег

, а CSS-таблица — это имитация того же поведения, но с помощью CSS-свойств.

Есть ключевое различие

Как и те, кто учился по «CSS Zen Garden», я испытываю отвращение к табличной вёрстке в HTML. Сам того не понимая, я позволял обманчивым предубеждениям ввести себя в заблуждение, преувеличивая взаимосвязь между HTML- и CSS-таблицами.

Если нечто выглядит, работает и ведёт себя как таблица, то оно ведь должно быть таблицей? Неправильно!

На самом деле, у CSS-таблиц есть одно ключевое отличие от HTML-таблиц: они могут перестать быть таблицами, стоит только изменить их CSS-свойства. А HTML-таблицы на такое не способны. Это открывает перед нами широкие возможности выборочного использования в вёрстке нужных табличных особенностей.

Ниже вы найдёте несколько примеров использования display: table :

Динамическое вертикальное выравнивание по центру

Нажимайте на кнопку, чтобы добавить строчки.

Это, пожалуй, самый распространённый способ использования display: table . С его помощью можно получить истинное выравнивание по вертикали элементов с динамической высотой.

Есть также другой, более короткий, способ вертикального выравнивания, который может вас заинтересовать:

Динамическое горизонтальное выравнивание по центру

Чтобы горизонтально расположить по центру динамический элемент, можно сделать его блочно-строчным ( display: inline-block ). Затем внешнему контейнеру этого элемента нужно задать свойство text-align: center . Недостаток этого способа состоит в «побочном эффекте» выравнивания текста по центру. Все дочерние элементы внутри контейнера унаследуют свойство text-align: center , которое может переопределить существующие свойства.

Благодаря @mojtabaseyedi я нашёл новый способ выравнивать динамические элементы по горизонтали без побочных эффектов. Нужно применить к динамическому элементу display: table и margin: auto .

Адаптивная вёрстка

Уменьшите окно до , чтобы увидеть адаптивность в действии.

Как я уже упоминал, CSS-таблица может вести себя не как таблица, когда это необходимо. Переключив у элемента свойство display с table-cell на block , мы сможем расположить элементы в стопку.

Порядок следования меняется с 1-2-3 на 2-3-1

Можно даже изменить порядок следования блочных элементов. Подробнее об этом приёме можно почитать здесь.

Динамический прилипающий подвал

Прилипающий подвал должен соответствовать двум требованиям:

  1. Подвал должен прилипать к низу страницы, когда основного контента слишком мало, чтобы заполнить всю страницу по высоте.
  2. Подвал должен следовать в потоке как обычно, если объём контента превышает высоту страницы.

Если вы когда-нибудь искали решение этой задачи, то вам, возможно, попадались эти полезные варианты от Chris Coyier и Ryan Fait.

Эти решения отлично работают, но у них есть один недостаток: подвал должен быть фиксированной высоты. Эту проблему можно обойти средствами JavaScript, но я всё же предпочитаю использовать для этого CSS. С помощью display: table можно сделать прилипающий подвал с динамической высотой.

Разметка «Holy Grail»

Разметка «Holy Grail» (от A List Apart) — это вариант разметки страницы с шапкой, тремя равными по высоте колонками (две фиксированных боковых колонки и тянущийся центр) и прилипающим подвалом.

Разметка «Holy Grail»

Такая разметка должна по мере возможности удовлетворять следующим требованиям:

  1. Центральная колонка должна тянуться, а боковые — иметь фиксированную ширину.
  2. Центральная колонка может идти первой в разметке.
  3. Любая колонка может быть больше остальных по высоте.

Разметка «Holy Grail» с помощью display: table

В примере выше показана разметка «Holy Grail». Можете менять размеры окна, чтобы средняя колонка тянулась по ширине; также можно добавить контент, чтобы посмотреть, как работает прилипающий подвал. Единственное требование, которому эта разметка не соответствует, — это пункт 2: «Центральная колонка может идти первой в разметке».

Наверно, это нужно для поисковой оптимизации. То есть если соображения SEO для вас не стоят на первом месте, с помощью display: table вы сравнительно легко сделаете разметку «Holy Grail».

Вы шутите? Flexbox всё решит!

Это действительно так. Ознакомьтесь, например, с решением вышеприведённых задач с помощью flexbox от Phillip Walton. Однако, я бы не торопился его применять. На долю IE8 и IE9 до сих пор приходится 32% рынка десктопных браузеров — а это слишком много пользователей, чтобы отказываться от них ради удовольствия применить flexbox. Если только ваш сайт не рассчитан целиком на мобильный трафик — в чём я сильно сомневаюсь, — стоит выбрать display: table .

Уточнение: Я работаю на консалтинговую компанию, поэтому заинтересован в поддержке десктопов. Но если вам нужно поддерживать только мобильные браузеры, можете смело использовать flexbox.

Заключение

Надеюсь, с помощью приведённых примеров мне удалось продемонстрировать полезные свойства несправедливо пренебрегаемого display: table . Однако должен подчеркнуть, что CSS-таблицы — не панацея для разметки. Используйте их уместно, это позволит вам избежать длительных ночей правки CSS-кода.

Верстка блоками DIV. С самого начала

15.09.2015 в 12:27, joey

Верстка блоками div давно уже стала стандартом и имеет ряд преимуществ перед табличной версткой. Однако на деле начинающие разработчики путаются в поведении этих самых блоков.

Давайте разберем основные моменты при блочной верстке. Сейчас мы не будем брать во внимание стандарт html5, а просто рассмотрим основу основ при верстке блоками div, которая используется при создании макета или же какого то отдельного компонента страницы.

Что считать блочным элементом?

Область такого элемента на странице представлена прямоугольником, по умолчанию занимает все доступную ширину и начинается с новой строки.
Самым распространённым элементом, используемым в блочной верстке, является универсальный элемент

Итак, от простого к сложному. Посмотрим, как отобразятся блоки div по умолчанию без стилей, влияющих на их положение. Для наглядности стили к элементам будем добавлять инлайново, через атрибут style.

Добавим значение ширины для каждого блока:

Видно, что каждый блок согласно спецификации располагается с новой строки. Это их нормальное поведение.

Теперь возникает вопрос, как расположить блоки div на одной строке, друг за другом?

Для этого существует свойство float, которое определяет, с какой стороны блок будет принудительно выровнен. При этом с другого края, он может обтекаться другими элементами.

Свойство float имеет следующие значения:

  • left – блок выравнивается по левому краю, обтекание справа
  • right – блок выравнивается по правому краю, обтекание слева
  • none – обтекание не задано, блок ведет себя по умолчанию, как в предыдущих примерах.

Добавим float:left к нашим блокам, чтобы блоки выровнялись по левому краю:

В результате, блоки выстроились на одной строке. Хорошо, допустим, мы захотели добавить еще один div снизу, и сделаем это без указания свойства float:

Видно, что блок добавился как то криво. Кажется, что он добавился с новой строки под Блок 1. На самом деле, Блок 4 занимает место от начала Блока 1 и на 450 пикселов вправа. Вот посмотрите:

Почему так вышло? Вкратце, так происходит, потому что элементы с float выпадают из потока документа. Однако, это тема отдельной статьи. Здесь же мы познакомимся с новым свойством clear, которое управляет поведением плавающих элементов:

  • left – запрещает обтекание с левой стороны, все элементы будут показаны с новой строки (под элементом)
  • rigth – запрещает обтекание элемента с правой стороны
  • both – запрещает обтекание элемента с обоих сторон, рекомендуется использовать, когда явно надо показать элемент с новой строки или неизвестно с какой именно стороны возможно обтекание другими элементами

Добавим Блоку 4 свойство clear:left, которое запретит этому элементу обтекание других плавающих элементов с левой стороны.

Блок 4 разместился с новой строки, как нам надо.

В данном случае мы знаем как располагаются другие блоки, потому в примере сразу указали clear:left. Бывают ситуации, когда мы точно не знаем, с какой стороны встретится плавающий блок, поэтому в таких случаях стоит указывать clear:both, отменяющий обтекание с обеих сторон. Теперь мы разобрались как расположить блоки div на одной строке горизонтально.

Следует помнить, что блоки со значением float располагаются на одной строке, если позволяет ширина родительского элемента. Если блочные элементы не умещаются в ряд, они будут переноситься на новую строку. Если это критично, например, при верстке макетов, нужно это учитывать и у блоков с float обязательно задавать ширину – фиксированную (px) или резиновую (%, rem и т.д.). Дальше посмотрим на такие ситуации.

Как повлиять на блоки, если мы хотим разместить эти блоки по центру?

Классическим решением будет добавление блокам родителя и использование свойства margin: 0 auto;

Почему собственно родителю мы дали класс .wrapper ? «wrapper» в переводе означает «обертка». Это некая общепризнанная практика, определяющая название класса, когда элемент оборачивает другие блоки и тем самым позволяет управлять/влиять на них посредством изменения самого родителя.

Возьмем разметку из предыдущих примеров и усовершенствуем её.

Здесь вроде всё просто.

А если нам не нравится, что текст вплотную прилипает к краю родительского блока и хотим добавить поля без внесения изменений в разметку, только с помощью css. Добавим элементам свойство padding:

И видим, что наша верстка рассыпалась! Блок 3 куда то уехал. Почему так вышло? Ответ прост. Добавив поля элементам мы увеличили их ширину. Теперь значения таковы:

Блок 1: 10 + 200 + 10 = 220px

Блок 2: 10 + 150 + 10 = 170px

Блок 3: 10 + 100 + 10 = 120px

Блок 4: 10 + 450 + 10 = 470px

220 + 170 + 120 = 510px

Общая ширина трех блоков 510, они не умещаются в ширину родителя (450) и потому переносятся на новую строку.

Как поправить? Можно сделать следующее:

  1. Задать заново значения ширины для каждого блока с учетом полей. Уменьшив размеры блоков. Все снова аккуратно встанет в одну строку. Согласитесь, это неудобно? Каждый раз лезть в верстку и что-то править.
  2. Использовать свойство box-sizing: border-box. Чтобы расчет брался из общей ширины блока. Советую узнать, что такое блоковая модель сss.

Используем второй вариант, получается так:

Теперь соберём всю полученную информацию воедино и попробуем создать простенький типовой трёхколоночный макет с резиновой версткой, который будет растягиваться максимально до 900px, после чего весь макет будет позиционироваться по центру.

Создаем разметку макета:

Если что-то непонятно — спрашивайте в комментариях.

— Egor , 24.06.2020 в 13:37 ответить #

— Роман , 04.12.2020 в 13:42 ответить #

— joey , 12.12.2020 в 10:55 ответить #

— Я новичок , 19.12.2020 в 06:04 ответить #

Создаем разметку сайта без изображений с помощью HTML5/CSS3 – часть 2

Дата публикации: 2011-04-02

От автора: В первой части этой статьи — Создаем разметку сайта без изображений с помощью HTML5/CSS3 – часть 1 мы закончили объяснять все элементы HTML5, используемые в коде нашей демо-страницы index.html и сегодня обсудим свойства CSS, применяемые для того, чтобы сделать ее красивой.

Вот вам памятка о том, как будет выглядеть разметка после того, как мы закончим использовать все свойства CSS3:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

CSS3 — украшаем свою страницу

После того, как основа HTML распланирована, пора сделать страничку красивой при помощи изящного CSS3. Я сосредоточусь на свойствах CSS3, сведя до минимума комментарии к остальному CSS. Но, как обычно, если что-то останется непонятным, пожалуйста, разместите комментарий, и я расскажу о предмете больше.

CSS Reset

Очень помогает создавать совместимые с разными браузерами страницы CSS Reset Эрика Майера (Eric Meyer). Я слегка модифицировал reset, чтобы исключить элементы HTML, по каким-либо причинам отсутствующие в спецификации HTML5.

basefront, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex и dir более не являются частью спецификации HTML.

Я добавил элементы HTML5, которые мы использовали для reset, а также установил их свойства display на block. Так мы отдаем указание браузерам относиться к ним как к элементам block-level.

Новыми дополнениями к CSS reset являются следующие элементы: header, nav, article, aside, footer, hgroup и section.

Конечно, для других страниц/вебсайтов вы бы включили в reset и другие используемые элементы HTML5.

Объявления @font-face

Для того, чтобы сделать демо-страницу необычнее, мы используем два ненадежных шрифта. Это HighlandGothic и Colaborate, и оба доступны бесплатно на сайте Font Squirrel как удобные наборы шрифтов @font-face.

Объявления @font-face CSS работают, создавая новое семейство шрифтов, которое можно применять на странице. После объявления названия семейства нужно сослаться на фактический файл шрифтов, и вот тут все осложняется, потому что разные браузеры поддерживают разные форматы.

Как видно из вышеприведенной таблицы, самый короткий способ охватить все свои основные потребности – это включить нужную версию шрифта в TTF(TrueType Font), или OTF (OpenType Font) и EOT (Embedded OpenType). Вы, скорее всего, найдете нужный вам для вставки шрифт в форматах TTF и/или OTF, а Font Squirrel придет на помощь со своим набором @font-face Generator, когда вам придется конвертировать их в EOT (и один или оба других формата). С помощью генератора можно конвертировать все шрифты в любые нужные форматы в зависимости от необходимости, а также он предлагает опцию построения файлов Cufón.

Обратите внимание, что каждый источник во втором свойстве src для лучшей читабельности расположен на отдельной строке; в настоящем файле CSS я поместил их в одну строку.

Синтаксис объявления @font-face, использованный здесь, основан на синтаксисе Пола Айриша (Paul Irish) Bulletproof @font-face. Я не буду вдаваться в подробности, так как Пол все объяснил в своей статье. Таким образом, после определения названия семейства шрифтов, мы сначала ссылаемся на местоположение файла шрифтов EOT, которые будут предназначаться для Internet Explorer. После того мы повторяем свойство src и, пока Internet Explorer не понимает определение local, файлы шрифтов, на которые ссылаются во втором дескрипторе src, загружаться IE не будут. Что касается расположения различных шрифтовых форматов во втором свойстве src, вот что об этом говорится в спецификации W3C:

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

Таким образом, учитывая, что браузер станет использовать первый поддерживаемый им формат, порядок таков: WOFF → OTF/TTF → SVG. Если знать о том, что WOFF расшифровывается как Web Open Font Format (Открытый сетевой формат шрифтов) недостаточно для доказательства его превосходства над OTF/TTF и SVG. Хотя, если серьезно, одно ее преимущество состоит в том, что она довольно короткая, а другое – в том, что содержит подробные метаданные о происхождении шрифта и прочем. Причина, по которой шрифты SVG поставлены в самый конец, это факт того, что в основном они производны: конвертированные из файла шифров OTF или TTF и, весьма возможно, потерявшие что-нибудь в процессе конвертации.

Показывать текст на своей странице встроенными шрифтами довольно просто, все, что нужно сделать – это установить список названий семейства шрифтов в объявлении @font-face в свойстве font(-family) нужных селекторов CSS. Например, мы использовали шрифт HighlandGothic для логотипа сайта, и объявление CSS для этого элемента выглядит так:

Краткий справочник по HTML, XHTML и CSS

Что мне нравится в стандартах, так это то, что их всегда очень много, и я могу выбирать из огромного списка.

Andrew S. Tannenbaum

Сравнение стандартов HTML и XHTML

Тем, кто не знает, что такое HTML советую в первую очередь ликвидировать безграмотность в этом вопросе, прочитав об истории появления и развития языка разметки гипертекста (ссылка ниже). Что касается XHTML, то это новое поколение языка разметки интернет страниц, созданное на базе XML, в то время как HTML был разработан на основе SGML. Далее ссылки, которые помогут читателю разобраться во всех этих аббревиатурах:

Итак, язык XHTML повторяет и дополняет функциональность HTML, а зачем он это делает, я как раз и попытаюсь изложить в этом разделе. Поскольку XHTML является расширением XML, то все требования к правильно сформированному (well-formed) XML документу сохраняются. Вот те самые дополнительные требования к разметке документа, если он должен соответствовать стандарту XHTML:

  1. Каждый тег XHTML должен быть закрыт. Если HTML позволял конструкции типа
    или , то в XHTML они должны выглядеть только так:
    . Менее тривиальным является следующий вариант разметки, который устраивает HTML, но не является корректным с точки зрения XML: Правильным XHTML аналогом будет являться следующая разметка На основе приведенного примера, первое ограничение я бы дополнил формулировкой: XHTML не допускает частичного пересечения области действий тегов разметки. Если это обстоятельство и создает какие-то дополнительные сложности верстальщикам, то эти сложности с лихвой компенсируются контролем над ошибками со стороны сервисов XML. Причины всех этих ограничений проявятся дальше.
  2. XHTML не поддерживает сокращенной формы записи атрибутов. Это означает, что в XHTML нет сокращенной формы записи булевых атрибутов, а само значение атрибутов всегда должно быть в кавычках. Если в HTML следующий код считался корректным , то в XHTML приведенная конструкция должна выглядеть следующим образом:
  3. Специальные символы в XHTML должны быть представлены в виде кодов. Это означает, например, что символы и > , если они не являются частью разметки, должны в тексте обозначаться, как и > соответственно. Если такой вариант не устраивает, например, если требуется в разметку добавить программный код (Java-script, VBScript), то для этих целей следует использовать раздел CDATA, содержимым которого может быть любая символьная информация, в том числе специальные символы разметки. Вот пример:
  4. Все символы, используемые в именах тегов и атрибутов должны быть строчными. Вот это ограничение уже не является наследием XML, поскольку XML настаивает только на том, чтобы и открывающий и закрывающий теги были записаны одинаковым набором символов, в который могут входить как строчные, так и заглавные символы. Это ограничение, скорее, результат стремления избежать путаницы и оптимизировать скорость обработки документа. Кодировка символов в XHTML, как и в XML по умолчанию UTF-8.
  5. Корневой элемент в XHTML должен быть один. Другими словами это означает, что тег HTML должен присутствовать в XHTML всегда! Стандарт HTML не настаивал на присутствии тегов и – разметку можно было начинать с любого тега и корневого элемента могло не быть вообще.

Теперь пару слов о менее очевидных отличиях между двумя этими стандартами. Повторюсь, что все “разногласия” между HTML и XHTML являются следствием того, что XHTML является расширением XML, а HTML нет.

Обработчик HTML является, по сути, интерпретатором. Он обрабатывает документ последовательно, и именно это обстоятельство позволяет ему исправлять ошибки разметки. Многим известно, что документ HTML в памяти браузера представлен в виде объектной модели DOM. Именно DOM является основой DHTML (Dynamic HTML) – симбиоза HTML и Java Script, который способен “оживлять” статичную разметку, обрабатывая события пользователя. Код java-script и DOM способны одни фрагменты документа “на лету” заменять другими или существенно изменять стиль их отображения. Преобразования эти осуществляются на стороне клиента, благодаря чему перезагрузки страницы не требуется. Все выглядит красиво и динамично. Именно благодаря DOM стали возможны все выпадающие меню и списки на страницах браузера. Для корректного формирования объектной модели интерпретатору HTML жизненно необходимо исправлять ошибки верстальщиков, добавляя закрывающие теги, исправляя частичные пересечения области действия тегов разметки (пример выше) и т.п. Обработчик XML, в свою очередь, больше походит на компилятор: он обрабатывается сразу весь документ. Если документ не является well-formed, то обработчик (парсер) сообщает об ошибке и отменяет формирование DOM целиком. Логично, что в случае XHTML происходит все то же самое. Для XML и его расширений действует правило: “Либо все, либо ничего”, в то время как парсер HTML не сообщает об ошибках, старается их исправлять и практически всегда производит, как минимум, частичную обработку HTML страницы. Кому-то такое поведение HTML интерпретатора может нравиться больше, чем категоричность XHTML обработчика, но позволю себе сделать следующее замечание. Исправление HTML происходит на стороне клиента, т.е. интернет браузером. Различных браузеров достаточно много, не говоря уже о большом количестве версий каждого из них. Это обстоятельство не гарантирует вам, что во всех случаях ошибки будут исправлены одинаково и результат этого исправления вас устроит. Также можно утверждать, что на исправление ошибок тратится дополнительное время. Не стоит в этом полагаться на браузер.

Как итог всему вышесказанному. На данный момент не все интернет браузеры поддерживают XHTML. Для того чтобы поэкспериментировать с этим новым стандартом локально, достаточно файлу с гипертекстом дать расширение .xhtml и открыть его в поддерживающем XHTML интернет браузере, например, в Opera. Если разметка не будет соответствовать well-formed XML, то браузер выведет сообщение об ошибке. Если у тега не будет определено пространство имен xmlns=http://www.w3.org/1999/xhtml , то вы увидите просто xml. Ниже приведен пример XHTML разметки страницы:

Как заставить браузеры использовать XHTML обработчик для страниц, размещенных на удаленных серверах, вы можете найти в интернете, но заниматься этим сейчас, с моей точки зрения, не обязательно. При разработке сайтов я рекомендую придерживаться правил XHTML, и проверять страницу на соответствие этому стандарту локально. А какой обработчик будет использован браузером пользователя не так важно, поскольку если страница соответствует синтаксису XHTML, то синтаксису HTML она соответствует точно. Принудительно использовать парсер XHTML можно заставить браузер в любой момент, настроив должным образом заголовки интернет страниц на сервере. Далее будет приведен краткий справочник по HTML/XHTML.

Справочник по HTML/XHTML

Следующий текст может быть полезен как авторам интернет ресурсов и начинающим веб-мастерам, так и программистам, использующим HTML, как инструмент оформления отчетов в процессе трансформации данных из других форматов, в том числе из формата XML посредством XSL. Если формируемая разметка не должна стать частью интернет ресурса общего пользования, то на все рассуждения про оптимизацию страниц с целью продвижения их в поисковой выдаче можно не обращать особого внимания. Материал предлагаю воспринимать, как краткий справочник-учебник по основам языка разметки гипертекста и применения каскадных таблиц стилей.

Шаблон XHTML страницы интернет ресурса

Следующим образом должен выглядеть шаблон интернет страницы на XHTML:

Я сделал акцент на словосочетании интернет страница не случайно. Помимо самой разметки, для поисковых систем в интернете (Google, Яндекс и других) важна метаинформация о странице. К метаинформации относят содержимое мета-тегов ( ) и тега заголовка страницы ( ). Если располагать их по степени важности для поискового сервиса, то на первом месте идет содержательность и уникальность (по отношению к другим страницам интернет ресурса) заголовка страницы, на втором месте — более развернутое (символов 150-250) описание страницы ( description ) и на третьем месте уже список ключевых слов ( keywords ) через запятую.

В чем их важность? Во-первых, содержимое заголовка – это подпись-ссылка на вашу страницу в поисковой выдаче, а содержимое тега description – это один из кандидатов на роль сниппета (краткого описания страницы) все в тех же результатах поиска (см. рисунок ниже). На самом деле те же Google и Яндекс стараются создать сниппет из основного текста вашей страницы, но это у них не всегда получается, поскольку текста может быть совсем мало или не быть вообще, к примеру, на странице размещены только картинки, видео или анимация. В этом случае им не остается ничего другого, как обратиться к краткому описанию страницы. Имея возможность управлять представлением ссылки на ваш сайт, вы можете сделать ее более привлекательной для пользователей поисковой системы и тем самым повысить ее показатель CTR (click-through rate) – количество переходов, деленное на количество показов страницы в результатах поиска. Во-вторых, исходя из назначения мета-тегов, они должны содержать именно заголовок, отражающий тему страницы, ее краткое описание и ключевые слова. Следовательно, сопоставив мета-теги и само содержание страницы можно понять, насколько оно (содержание) может соответствовать ожиданиям потенциальных пользователей, когда те увидят заголовок и сниппет на странице результатов поискового запроса и примут решение перейти по ссылке. В информационном поиске это соответствие также называют степенью релевантности или просто релевантностью результатов запроса, и именно релевантность, представленная в виде числовых величин, полученных по тщательно скрываемым от общественности алгоритмам оказывает значительное влияние на позиции того или иного сайта в рейтингах поисковиков.

Заголовок и описание (сниппет) веб-страницы в результатах поискового запроса.

Мета-теги с атрибутом http-equiv играют роль заголовков HTTP запросов, и содержат различного рода системные настройки и параметры, необходимые браузеру, чтобы корректно отображать содержимое веб-страниц. В данном примере с помощью такого тега браузеру сообщается, что формат страницы – это текст или гипертекст text/html , для отображения которого следует использовать кодировку windows-1251 . В русскоязычном сегменте всемирной паутины в основном используют указанному мной кодировку или “универсальную”, построенную на основе 8-ми битного представления юникода, кодировку UTF-8 . Если кодировка в мета-теге указана не будет, а браузер пользователя не сможет определить ее самостоятельно, то текст может предстать в нечитаемом виде.

Мета-теги могут содержать и другие метаданные, например информацию об авторе ( author ) и авторских правах ( copyright ). Для этого достаточно добавить еще тегов с соответствующими значениями атрибутов name и content .

Заголовки

Для любой интернет страницы также важно сообщать пользователю о чем она. Важно это и для “поисковиков” при оценке релевантности страницы определенному запросу информационного поиска. Релевантность в данном контексте – это соответствие содержания интернет страницы ожиданиям пользователя. Не стоит пренебрегать заголовками различного уровня, но не стоит ими и злоупотреблять: добавлять их в большом количестве, не подкрепляя содержанием. Вот так может выглядеть разметка заголовков:

Крайне желательно, чтобы текст в заголовках перекликался с содержанием заголовка самой станицы и соответствующих мета-тегов: описанием страницы и списком ключевых слов. Если это не так, то вы рискуете, что робот поисковой системы отнесет ваш шедевр к категории “спам”. Эти замечания касаются не только заголовков, но и всего остального содержания страницы.

Списки

Списки в HTML представлены тремя видами: обычный или маркированный список (ul), нумерованный список (ol) и список определений (dl). Содержимое списков первых двух видов состоит из набора элементов (li). Каждый элемент списка определений состоит из термина (dt) и, собственно, его определения (dd). Список определений можно сконструировать и из других элементов разметки, но не стоит забывать про различные сервисы, которые видят особый смысл в используемых верстальщиком конструкциях. Иначе, зачем авторам HTML создавать специальную разметку для таких списков? Следующий пример демонстрирует разметку маркированного списка и двух вложенных в него списков: нумерованного и списка определений. Сложность иерархии списков ограничивается только фантазией автора страницы и требованиями к желаемому результату. Любой из этих списков может быть как основным, так и вложенным.

Маркированный список поддерживает три вида маркера: окружность (circle), диск (disc) и квадрат (square), но его можно заменить произвольной картинкой.

Будет неплохо, если с использованием списка определений будет сформирован небольшой предметный указатель с исчерпывающей, но краткой информацией по ним.

Таблицы

Таблицы (table) в HTML, как в прочем и везде состоят из названия таблицы (caption), заголовка, состоящего из описания колонок и строк с ячейками таблицы. Заголовок – это та же строка таблицы (tr), только вместо тега ячейки таблицы (td) используется тег заголовка колонки (th). Естественно, что можно заголовок соорудить с использованием обычных ячеек таблицы, но в этом случае сложнее будет его выделить графически. И еще один момент. Ячейки в таблице можно объединять, как по горизонтали, так и по вертикали с использованием атрибутов colspan и rowspan , а текст выравнивать определением значения атрибута align .

Строчные и блочные элементы разметки

Строчный элемент разметки – это тэг, который позволяет выделить часть строки или несколько строк (зависит от размера окна браузера) и изменить их представление: выделить другим шрифтом, цветом, рамкой и т.п. Для таких элементов ( , , и др.) нельзя задать ширину и высоту, поскольку значения этих параметров определяются содержимым строчного элемента: текстом, изображениями и другими вложенными тегами.

Блочный элемент разметки – это тэг, область которого представлена прямоугольником (

,

,
    и др.). Если такому элементу не задать явно ширину, то она будет соответствовать всей области, предоставленной элементом — контейнером. Высота блочного элемента, так же, как и строчного по-умолчанию определяется его содержимым. Каждый новый блочный элемент появляется в новой строке, если иной способ размещения не задан с использованием атрибута float : left – элемент сдвигается влево, а последующие (если позволяет их ширина) выстраиваются за ним справа; right – наоборот, предписывает обтекание элемента его последователями слева, а сам элемент будет, по мере необходимости, сдвинут вправо. Ширину и высоту блочного элемента можно задать явно с использованием атрибутов width и height , как в абсолютных значениях (px), так и в процентах (%) от максимально возможных значений.

Описанные ранее таблицы, списки и даже заголовки являются блочными элементами. К строчным элементам относятся ссылки и изображения, о которых речь пойдет чуть ниже. Строчные элементы могут располагаться внутри блочных, но не наоборот. Далее, представлен пример с использованием блочных элементов

(абзац), а также, строчного элемента (участок или интервал). С помощью элемента

Первый абзац выравнивает текст по левому краю.

Верстка блоками DIV. С самого начала

15.09.2015 в 12:27, joey

Верстка блоками div давно уже стала стандартом и имеет ряд преимуществ перед табличной версткой. Однако на деле начинающие разработчики путаются в поведении этих самых блоков.

Давайте разберем основные моменты при блочной верстке. Сейчас мы не будем брать во внимание стандарт html5, а просто рассмотрим основу основ при верстке блоками div, которая используется при создании макета или же какого то отдельного компонента страницы.

Что считать блочным элементом?

Область такого элемента на странице представлена прямоугольником, по умолчанию занимает все доступную ширину и начинается с новой строки.
Самым распространённым элементом, используемым в блочной верстке, является универсальный элемент

Итак, от простого к сложному. Посмотрим, как отобразятся блоки div по умолчанию без стилей, влияющих на их положение. Для наглядности стили к элементам будем добавлять инлайново, через атрибут style.

Добавим значение ширины для каждого блока:

Видно, что каждый блок согласно спецификации располагается с новой строки. Это их нормальное поведение.

Теперь возникает вопрос, как расположить блоки div на одной строке, друг за другом?

Для этого существует свойство float, которое определяет, с какой стороны блок будет принудительно выровнен. При этом с другого края, он может обтекаться другими элементами.

Свойство float имеет следующие значения:

  • left – блок выравнивается по левому краю, обтекание справа
  • right – блок выравнивается по правому краю, обтекание слева
  • none – обтекание не задано, блок ведет себя по умолчанию, как в предыдущих примерах.

Добавим float:left к нашим блокам, чтобы блоки выровнялись по левому краю:

В результате, блоки выстроились на одной строке. Хорошо, допустим, мы захотели добавить еще один div снизу, и сделаем это без указания свойства float:

Видно, что блок добавился как то криво. Кажется, что он добавился с новой строки под Блок 1. На самом деле, Блок 4 занимает место от начала Блока 1 и на 450 пикселов вправа. Вот посмотрите:

Почему так вышло? Вкратце, так происходит, потому что элементы с float выпадают из потока документа. Однако, это тема отдельной статьи. Здесь же мы познакомимся с новым свойством clear, которое управляет поведением плавающих элементов:

  • left – запрещает обтекание с левой стороны, все элементы будут показаны с новой строки (под элементом)
  • rigth – запрещает обтекание элемента с правой стороны
  • both – запрещает обтекание элемента с обоих сторон, рекомендуется использовать, когда явно надо показать элемент с новой строки или неизвестно с какой именно стороны возможно обтекание другими элементами

Добавим Блоку 4 свойство clear:left, которое запретит этому элементу обтекание других плавающих элементов с левой стороны.

Блок 4 разместился с новой строки, как нам надо.

В данном случае мы знаем как располагаются другие блоки, потому в примере сразу указали clear:left. Бывают ситуации, когда мы точно не знаем, с какой стороны встретится плавающий блок, поэтому в таких случаях стоит указывать clear:both, отменяющий обтекание с обеих сторон. Теперь мы разобрались как расположить блоки div на одной строке горизонтально.

Следует помнить, что блоки со значением float располагаются на одной строке, если позволяет ширина родительского элемента. Если блочные элементы не умещаются в ряд, они будут переноситься на новую строку. Если это критично, например, при верстке макетов, нужно это учитывать и у блоков с float обязательно задавать ширину – фиксированную (px) или резиновую (%, rem и т.д.). Дальше посмотрим на такие ситуации.

Как повлиять на блоки, если мы хотим разместить эти блоки по центру?

Классическим решением будет добавление блокам родителя и использование свойства margin: 0 auto;

Почему собственно родителю мы дали класс .wrapper ? «wrapper» в переводе означает «обертка». Это некая общепризнанная практика, определяющая название класса, когда элемент оборачивает другие блоки и тем самым позволяет управлять/влиять на них посредством изменения самого родителя.

Возьмем разметку из предыдущих примеров и усовершенствуем её.

Здесь вроде всё просто.

А если нам не нравится, что текст вплотную прилипает к краю родительского блока и хотим добавить поля без внесения изменений в разметку, только с помощью css. Добавим элементам свойство padding:

И видим, что наша верстка рассыпалась! Блок 3 куда то уехал. Почему так вышло? Ответ прост. Добавив поля элементам мы увеличили их ширину. Теперь значения таковы:

Блок 1: 10 + 200 + 10 = 220px

Блок 2: 10 + 150 + 10 = 170px

Блок 3: 10 + 100 + 10 = 120px

Блок 4: 10 + 450 + 10 = 470px

220 + 170 + 120 = 510px

Общая ширина трех блоков 510, они не умещаются в ширину родителя (450) и потому переносятся на новую строку.

Как поправить? Можно сделать следующее:

  1. Задать заново значения ширины для каждого блока с учетом полей. Уменьшив размеры блоков. Все снова аккуратно встанет в одну строку. Согласитесь, это неудобно? Каждый раз лезть в верстку и что-то править.
  2. Использовать свойство box-sizing: border-box. Чтобы расчет брался из общей ширины блока. Советую узнать, что такое блоковая модель сss.

Используем второй вариант, получается так:

Теперь соберём всю полученную информацию воедино и попробуем создать простенький типовой трёхколоночный макет с резиновой версткой, который будет растягиваться максимально до 900px, после чего весь макет будет позиционироваться по центру.

Создаем разметку макета:

Если что-то непонятно — спрашивайте в комментариях.

— Egor , 24.06.2020 в 13:37 ответить #

— Роман , 04.12.2020 в 13:42 ответить #

— joey , 12.12.2020 в 10:55 ответить #

— Я новичок , 19.12.2020 в 06:04 ответить #

Цукерберг рекомендует:  Обучение - Как оплатить обучение
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих