б) left, top (right, bottom)

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

абсолютные значения - абсолютные единицы измерения CSS
проценты - величина смещения вычисляется как соответствующий процент от ширины/высоты родительского контейнера
auto - браузер самостоятельно определяет позицию элемента (по умолчанию)

Значения могут быть и отрицательными. Свойства right и bottom идентично-противоположны свойствам left и top, полезны при необходимости разместить элемент справа или снизу контейнера неопределённого размера.

Примеры:
Текст1 <img src=pic.jpg style="position:relative; left:10%; top:-15px"> - Текст1

Текст1 <span style="position:relative; left:-10px; top:5px">Текст2</span> - Текст1 Текст2

Текст1 <span style="position:relative; right:10px; bottom:-5px">Текст2</span> - Текст1 Текст2

в) min-height, min-width, max-height, max-width

Минимально и максимально возможные размеры элемента. В качестве значений можно использовать

абсолютные значения - абсолютные единицы измерения CSS
проценты - но когда дело касается высоты, то не во всех случаях
auto - ограничения убираются (по умолчанию)

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

Пример:
<div style="max-width:70%; min-height:50px; background-color:lightgrey">результат воздействия</div> -

результат воздействия

г) position

Позволяет задать местоположение элемента. Вернее, определяет точку, от которой при задании местоположения элемента начинается отсчёт свойств left и top. Возможные значения:

static - статическое позиционирование: элемент отображается в общем потоке текста. Если поставить свойства left и top, то они будут проигнорированы. (по умолчанию)
absolute - абсолютное позиционирование: значения свойств left и top рассматриваются относительно верхнего левого угла родительского элемента.
relative - относительное позиционирование: значения свойств left и top рассматриваются относительно точки, в которой бы находился элемент при отображении в общем потоке текста. (Но текст, следующий за смещённым элементом, при этом всё равно выводится так, как будто элемент никуда не перемещался.)
fixed - фиксированное позиционирование: координаты отсчитываются относительно левого верхнего угла окна web-браузера, влияние на другие элементы не оказывает. Кроме того, при перемотке текста объект по-прежнему остаётся неподвижным. (Но обнаружила нюанс. Если документ находится не в строгом режиме, то для работы данного свойства в IE необходимо, чтобы в первой строке был дополнительно указан URL-адрес с DTD-определением используемой версии HTML. Т.е. документ должен быть оформлен по полной программе. По крайней мере в IE7.)

Примеры:

Ещё пример с различными способами позиционирования блоков.

д) z-index

Определяет порядок перекрытия элементов. Если несколько элементов наложены друг на друга, то сверху будет отображён тот, z-index которого больше. Это свойство следует использовать только для элементов, у которых значение position задано как absolute, fixed или relative. В качестве значений рассматриваемого свойства используются целые числа (положительные, отрицательные и ноль), а также слово auto (по умолчанию). Но с отрицательными значениями следует быть очень внимательными, поскольку подобные элементы могут "спрятаться" за элементами без явно указанного z-index-а, к примеру, за текстом с фоновым цветом.

Примеры:
<img src=pic.jpg style="z-index:1"><img src=pic2.jpg style="position:relative; left:-25px"> -

<img src=pic.jpg style="position:relative; z-index:2"><img src=pic2.jpg style="position:relative; left:-25px; z-index:1"> -

(Буква "z" в названии свойства подразумевает под собой ось Oz в декартовой системе координат. Если более научно, то ось аппликат.)

2. Форматирование

а) clear

Если имеется обтекаемый текстом объект (обычно рисунок), то свойство clear, установленное в обтекающем блочном элементе, подтверждает или отменяет это обтекание. Говоря более просто, можно заставить очередную порцию информации вывестить сразу под нижнюю кромку обтекаемого объекта. Данное свойство имеет эффект, будучи вставленным только в элементы, задающие блочную структуру, такие как div, p, различные списки (т.е. в те, в которых свойство display имеет значение block или list-item). Не имеет смысла вставлять свойство clear в элементы наподобие span или font (т.е. в те, в которых свойство display имеет значение inline, inline-block или none).

Возможные значения:

Значение	Объяснение	Пример с рисунком, выровненным по левому краю	Пример с рисунком, выровненным по правому краю
none	стандартный перевод строки(по умолчанию) (отменяет запрет на обтекание, который, к примеру, был установлен в заголовке веб-документа)	ТЕКСТ	ТЕКСТ
left	перевод строки под объект, выровненный по левому краю (запрещает обтекание по левой стороне)	ТЕКСТ	ТЕКСТ
right	перевод строки под объект, выровненный по правому краю (запрещает обтекание по правой стороне)	ТЕКСТ	ТЕКСТ
both	следующая строка начнётся под объектом вне зависимости от того, по какому краю тот выровнен (запрещает обтекание по обеим сторонам)	ТЕКСТ	ТЕКСТ

(В качестве примеров были использованы различные варианты написания строки
<img src=pic.jpg style="float:left"><div style="clear:none">ТЕКСТ</div> )
Если в вышеприведённом примере дескриптор div заменить на span, то рассматриваемые принципы обтекания работать не будут.)

(clear - англ.очищать
both - англ. оба)

б) clip

Вырезает из элемента прямоугольную область, которая будет выведена на экран. Всё что окажется за этими границами, будет обрезано. Работает только с абсолютно-позиционированными элементами. Формат записи значения имеет вид clip: rect(сверху, справа, снизу, слева), в которую вставляется расстояния от границ элемента до границ вырезки. Можно использовать абсолютные единицы измерения, проценты или значение auto (по умолчанию).

Пример (во всплывающем окне) >

(clip - англ. отрезать, отсекать)

в) display

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

Значение	Объяснение	Пример
block	элемент отображается в виде отдельного блока , занимает всю ширину родительского элемента. Значение block по умолчанию умеют теги <div> и <p>	Текст до Подопытный текст Текст после
inline	элемент отображается встроенным в общий поток, занимает только необходимое для отображения содержимого пространство. Значение inline по умолчанию имеют теги <span>, <br> и другие	Текст до Подопытный текст Текст после
inline-block	аналогично inline, но дополнительно можно задать размеры и другое форматирование, применяемое для блочного элемента. Значение inline-block по умолчанию имеет тег <img>	Текст до Подопытный текст Текст после
list-item	элемент становится позицией списка (внимательнее с положением маркера, тот располагается за границей текстового блока)	Текст до Подопытный текст Текст после
none	Браузер игнорирует существование данного элемента, как будто его вообще нет	Текст до Подопытный текст Текст после

Также существуют различные table-значения, мною не рассматриваемые, наподобие table, inline-table, table-caption и т.п. И ещё несколько значений, поддерживаемых не всеми браузерами, вроде run-in, compact, marker.

В качестве примеров были использованы различные варианты написания строки
Текст до <span style="display:block">Подопытный текст</span> Текст после

(На всякий случай уточню, что для корректного отображения примера с list-item во все ячейки примеров был добавлен крупный отступ слева. - но отображается он или нет, зависит от заголовка веб-страницы)

Свойство в основном предназначено для работы со скриптами, но может использоваться и для оформления, несколько примеров показаны здесь.

Ещё один пример, демонстрирующий работу свойства.

(display - англ. показывать)

г) float

Выравнивание элемента по левому или правому краю. При этом другие будут его обтекать. Возможные значения:

none	без выравнивания (по умолчанию)	До До До До До До До До До До До До До До До До ДоПосле После После После После После После После
left	выравнивание по левому краю (другие элементы обтекают данный справа)	До До До До До До До До До До До До До До До До ДоПосле После После После После После После После
right	выравнивание по правому краю (другие элементы обтекают данный слева)	До До До До До До До До До До До До До До До До ДоПосле После После После После После После После

В качестве примеров были использованы различные варианты написания строки
...До<img src=pic.jpg style="float:left">После...

Обтекание можно скорректировать с помощью свойства clear, вставленного в обтекающий блочный элемент.

Пример использования свойства float для компоновки страницы.

(float - англ. поплавок, плавать)

д) overflow

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

Значение	Объяснение	Пример с длинным текстом	Пример с коротким текстом
hidden	Содержимое элемента, не помещающееся в отведённую область, будет обрезано.	Сижу за решеткой в темнице сырой. Вскормленный в неволе орел молодой, Мой грустный товарищ, махая крылом, Кровавую пищу клюет под окном, Клюет, и бросает, и смотрит в окно, Как будто со мною задумал одно; ...	текст
scroll	Создаются полосы прокрутки, причём в любом случае.	Сижу за решеткой в темнице сырой. Вскормленный в неволе орел молодой, Мой грустный товарищ, махая крылом, Кровавую пищу клюет под окном, Клюет, и бросает, и смотрит в окно, Как будто со мною задумал одно; ...	текст
auto	Создаются полосы прокрутки, но только в том случае, если они действительно нужны.	Сижу за решеткой в темнице сырой. Вскормленный в неволе орел молодой, Мой грустный товарищ, махая крылом, Кровавую пищу клюет под окном, Клюет, и бросает, и смотрит в окно, Как будто со мною задумал одно; ...	текст
visible	Если содержимое элемента не помещается в отведённые границы, оно будет отображено за их пределами. Сами же границы блока при этом не меняются. (по умолчанию)	Сижу за решеткой в темнице сырой. Вскормленный в неволе орел молодой, Мой грустный товарищ, махая крылом, Кровавую пищу клюет под окном, Клюет, и бросает, и смотрит в окно, Как будто со мною задумал одно; ...	текст

В качестве примеров были использованы различные варианты написания строки
<div style="background-color:yellow; border:dashed blue; width:200px; height:100px; overflow:auto"> ... </div>

(overflow - англ. избыток, переливание через край
hidden - англ. скрывать, прятать
scroll - англ. прокручивать, перемещать
auto - англ. автоматический
visible - англ. видимый)

е) vertical-align

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

1-ый случай. Вертикальное выравнивание содержимого ячеек таблицы. (Если применить к элементам наподобие <div> и <p>, то не сработает.) Возможные значения:

top	по верхнему краю	пример
middle	по центру (значение по умолчанию)	пример
bottom	по нижнему краю	пример

В качестве примеров были использованы различные варианты оформления ячейки таблицы
<td style="vertical-align:middle">пример

2-ой случай. Вертикальное выравнивание относительно окружающего текста. Возможные значения:

text-top	выравнивание по верху строки	До До До До До До До До До До До До До До До До ДоПосле После После После После После После После
middle	выравнивание по центру строки	До До До До До До До До До До До До До До До До ДоПосле После После После После После После После
baseline	выравнивание по базовой линии строки (по умолчанию)	До До До До До До До До До До До До До До До До ДоПосле После После После После После После После
text-bottom	выравнивание по низу самого низко посаженного символа алфавита	До До До До До До До До До До До До До До До До ДоПосле После После После После После После После
sub	элемент становится подстрочным (обычно используется при создании подстрочного текста, см. также >)	До До До До До До До До До До До До До До До До ДоПосле После После После После После После После
super	элемент становится надстрочным (обычно используется при создании надстрочного текста, см. также >)	До До До До До До До До До До До До До До До До ДоПосле После После После После После После После
абсолютные единицы	величина поднятия элемента над базовой линией текста (а также опускания под неё) точно указывается в абсолютных единицах CSS	vertical-align:10px : До До До До До До До До До До До До До До До До ДоПосле После После После После После После После
% (проценты)	величина поднятия элемента над базовой линией текста (а также опускания под неё) указывается в процентах, как я поняла, от расстояния между базовыми линиями соседних строк при их стандартном расположении	vertical-align:100% : До До До До До До До До До До До До До До До До ДоПосле После После После После После После После

(Предостережу от использования в подобных целях значения bottom. Оно работает в MF, IE, Safari и GCh, не отличаясь от text-bottom, но не воспринимается в Oper-е, по крайней мере v11. Значение top наботает везде, не отличаясь от text-top, но не привожу его, чтобы не смущало.)

В качестве примеров были использованы различные варианты написания строки
... До<img src=pic.jpg style="vertical-align:text-top">После ..

(sub - англ. приставка под-)

ё) visibility

Виден элемент или нет. Возможные значения:

visible	Элемент отображается, вне зависимости от видимости родителей	Текст До пример Текст после
hidden	Элемент скрывается, независимо от видимости родителя. Точнее, делается полностью прозразным: он по-прежнему занимает своё место на странице и влияет на расположение других блоков	Текст До пример Текст после
collapse	Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse по отношению к ячейкам таблицы они реагируют, словно к ним было добавлено display: none. Строки и колонки убираются, а таблица перестраивается по новой. Не поддерживается IE	Текст До пример Текст после
inherit	Свойство наследуется от родителя (по умолчанию)	—

В качестве примеров были использованы различные варианты написания строки
Текст До <span style="visibility:hidden">пример</span> Текст после

Ещё один пример, демонстрирующий работу свойства.

(visibility - англ. видимость
visible - англ. видимый
hidden - англ. спрятанный, скрытый
collapse - англ. обвал, крушение
inherit - англ. наследовать)

1. Позиционирование

2. Форматирование