CSS Layout | слои, абсолютное и относительное позиционирование и плавающие элементы

  1. Работа с divs
  2. Плавающие элементы
  3. CSS Позиционирование
  4. Абсолютное позиционирование
  5. Позиционирование слоев
  6. Относительное позиционирование
  7. Горизонтальное центрирование

Путь // → → CSS LAYOUT

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

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

Эта страница была последняя обновленный 2012-08-21 Эта страница была последняя обновленный 2012-08-21


Работа с divs

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

Тег div имеет несколько собственных атрибутов (за исключением align = "left | right | center"), и все его форматирование применяется через таблицы стилей . Чтобы настроить простой блок навигации, мы будем использовать такой код (с CSS в внешний файл .css или блок стиля):

div # navigation {width: 200px; фон: серый; отступы: 10 пикселей; }

<div id = "navigation"> ... навигационные ссылки ... </ div>

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

Плавающие элементы

Поскольку деления выполняются на уровне блоков (т. Е. По умолчанию они равны 100% доступной ширины экрана и добавляют разрывы строк между собой), все они будут просто складываться друг под другом, если вы не расположите их каким-либо образом. Самый простой способ сделать это - использовать свойство float CSS, которое является основой большинства макетов CSS. Вы можете перемещать любой элемент влево или вправо, и он будет выравниваться по сторонам любого элемента, в котором он содержится.

# column1 { float: left; ширина: 200 пикселей; отступы: 10 пикселей; }
# column2 { float: left; ширина: 200 пикселей; отступы: 20 пикселей; }

Чтобы создать макеты с колоннами, вы просто перемещаете все подразделения столбцов в одну сторону, и они будут располагаться рядом друг с другом, пока они подходят. Такое размещение контента имеет непосредственные преимущества, такие как последовательная загрузка (когда текст загружен, он сразу же отображается на странице, поэтому ваш посетитель может читать, когда страница формируется вокруг текста). Вы также можете дать каждому столбцу поля и отступы , предоставляя вам большую свободу для размещения вашего контента. Ниже приведен пример кода, похожего на CSS выше, с обоими элементами div с плавающей точкой: left; имущество:

Колонка 1

Колонка 2

С помощью этих плавающих элементов вы можете имитировать структуру таблицы и иметь свою страницу в традиционном макете без всех недостатков таблиц. Плавающие элементы требуют немного практики (особенно если столбцы имеют разную высоту), но могут привести ко многим традиционным и нетрадиционным макетам. Но CSS не хотел просто эмулировать механизмы разметки прошлого - теперь вы можете контролировать положение элементов на странице вплоть до пикселя.

CSS Позиционирование

Есть два других типа позиционирования за пределами плавающего: абсолютное и относительное . Коды, которые вы будете использовать:

tag { position : choice; верх : 0px; низ : 0px; слева : 0px; справа : 0px; }

Примечание о совместимости браузера:

Абсолютное и относительное позиционирование является особенностью спецификации CSS2 и поэтому поддерживается »Internet Explorer 4+ , »Мозилла , " Fire Fox , »Опера а также »Сафари , Для достижения наилучших результатов используйте новейшие доступные браузеры, так как они будут иметь улучшенные и более точные возможности рендеринга. Не используйте их, если ваши пользователи могут использовать старые браузеры.

Абсолютное позиционирование

Если вы разместите элемент (изображение, таблицу или что-то еще) абсолютно на своей странице, он будет отображаться в точном пикселе, который вы укажете. Скажем, я хотел, чтобы изображение отображалось в 46 пикселях сверху страницы и в 80 пикселях справа, я мог это сделать. Код CSS, который вам нужно добавить в изображение:

img {position: absolute ; верх: 46 пикселей; справа: 80 пикселей; }

Вы просто добавляете, какой метод позиционирования вы используете в начале, а затем выталкиваете изображение из сторон, к которым оно будет ближе всего. Вы можете добавить CSS непосредственно в тег, используя атрибут style (как показано на введение в таблицы стилей ), или вы можете использовать классы и идентификаторы и поместите их в свою таблицу стилей. Это работает так же. Рекомендуемый метод заключается в добавлении классов для элементов макета, которые будут отображаться на каждой странице, но вставлять код в строку для разовых вещей.

Изображение появится вот так , Как вы можете видеть, возможно, чтобы вещи пересекались с абсолютным позиционированием.

Позиционирование слоев

Чтобы создать то, что мы называем слоями с тегом div, используйте код, подобный следующему:

< div style = "position: absolute; left: 610px; верх: 80px; высота: 400px; ширина: 100px; отступ: 1em;"> материал слоя </ div>

Сначала вы указываете положение слоя, а затем его размеры (что является необязательным, слой будет сам изменять размеры). Если вы хотите придать цвет фону слоя, добавьте background-color: red; приписать с остальной частью вашего кода CSS. Как обычно, вы можете использовать веб-безопасные цвета , или же названные цвета ,

Все, что может попасть на обычную страницу, может быть размещено с помощью div. Они загружаются намного быстрее, чем, скажем, макет таблицы. Таблицы не отображаются на экране, пока они не будут полностью загружены. Со слоями вся информация, которая нужна браузеру, содержится в добавленных вами атрибутах стиля. Следовательно, он будет отображаться, как только будет загружена любая его часть.

Чтобы слои перекрывали друг друга, вам нужно использовать команду z-index . Добавьте z-index: 1 с кодом позиционирования, и этот элемент будет отображаться над всем без этой команды. Если вы хотите, чтобы что-то еще проходило через этот слой, добавьте z-index: 2 и так далее. Чем выше индекс, тем ближе будет div к передней части страницы.

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

Чтобы увидеть примеры дизайнов с плавающим и абсолютным позиционированием, посмотрите на мой переделывается раздел.

Относительное позиционирование

Когда вы позиционируете что-то относительно, вы изменяете его положение с того места, где оно было бы, если бы вы ничего не изменили. Я считаю, что это самый простой способ думать об этом. Например, в следующем предложении я сместлю некоторые слова на 12px вниз и 22px вправо относительно их начальной позиции.

Ну, вот несколько слов (несколько слов)

Слова в скобках - это слова в исходном положении, а жирным шрифтом - перемещенные слова. Код CSS для их перемещения был

<span style = "position: относительный ; верхний: 12px; оставленный: 22px;"> некоторые слова </ span>

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

Чтобы переопределить унаследованное свойство position и снова сделать элемент просто нормальной частью страницы, установите его в положение: static.

Горизонтальное центрирование

Центрирование div или любого другого на уровне блоков Горизонтальный элемент - это особый случай макета CSS, тем более, что в реализации Internet Explorer стандартного способа это есть. Стандартный способ состоит в том, чтобы установить значения поля по горизонтали для элемента auto, например, так:

#wrapper {width: 760px; поле: 0 авто; }

Это будет работать в браузеры как Firefox, Safari или Opera. Однако это не будет иметь эффекта в версиях Internet Explorer ниже 7. Однако мы можем использовать хак, чтобы получить горизонтальное центрирование во всех браузерах. Ничуть, IE неправильно центрирует на уровне блоков элементы, если к элементу, в котором они содержатся, применяется text-align: center. Таким образом, мы можем применить это свойство к элементу body, и все элементы в нем будут центрированы.

body {text-align: center; }

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

body {text-align: center; }
#wrapper {width: 760px; поле: 0 авто; выравнивание текста: слева; }

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

#wrapper {position: относительный; ширина: 760 пикселей; поле: 0 авто; выравнивание текста: слева; }

Это создаст внутренний элемент, который вы обязательно разместите, например, на вершине: 0; слева: 0; появляются в верхнем левом углу оболочки, а не в верхнем левом углу всего окна.

Следующая остановка: добавление границы к вашим элементам.