qwe

Vadim Ovchinnikov

8:11 AM

@Dimon А зачем вам чат для такого простого случая?

Dimon

он не простой

на примере будет понятней

Vadim Ovchinnikov

Какого ещё примера?

Dimon

секунду

<!DOCTYPE HTML>
<html>
<head>
<style>

#asd{
width:300px;
height:200px;
background-color:blue;

position:absolute;
left:0px;
right:0px;
top:0px;
bottom:100px;
/*margin:auto;*/
margin-top:auto;
margin-bottom:auto;
margin-left:auto;
margin-right:auto;
}

</style>
</head>
<body>
<div id="container">
<div id="asd">
</div>
</div>
</body>
</html>

Vadim Ovchinnikov

Ну хорошо, есть такой пример, что вы от меня хотите?

Dimon

так нагляднее

Vadim Ovchinnikov

8:17 AM

Ну хорошо

Dimon

вопрос в том, что, если я уберу bottom, то перечтает работать выравнивание по высоте

Vadim Ovchinnikov

По поводу стандарта если 'top', 'height', and 'bottom' не auto (по умолчанию значение), то margin-top, margin-bottom дают выравнивание

two margins get equal values

Что непонятного?

Dimon

если я убираю bottom, то он становится авто?

Vadim Ovchinnikov

Да

значение по умолчанию, значит, что вы можете не указывать.

w3schools.com/cssref/pr_pos_bottom.asp

default: auto

Dimon

получается, что если я ЗАДАЛ 'top', 'height', and 'bottom', то margin-top, margin-bottom рассчитаются так, что будет выравнивание по высоте

если я какое-то из трех свойств 'top', 'height', and 'bottom' не задал руками, то выравнивание не отработает

правильно я понял?

у меня проблемы с пониманием auto

как оно рассчитывается?

есть какая-то общая идея?

или для каждого свойства надо лезь в стандарт и читать, как работает авто для данного свойства?

Vadim Ovchinnikov

8:25 AM

Да, для каждого свойства надо лезь в стандарт и читать, как работает авто для данного свойства

Dimon

я тоже из Харькова)

спасибо

Vadim Ovchinnikov

Но ещё лучше использовать другие реценты для выравнивания

Более изящные

Dimon

джаваскриптом все это можно сделать

Vadim Ovchinnikov

Вот это точно идея так себе

Dimon

а как изящнее сделать?

через table-cell и vertical-align?

Vadim Ovchinnikov

8:28 AM

А вам надо абсолютно позиционируемый элемент или нет?

Dimon

это не принципиально

Vadim Ovchinnikov

Как вариант через table-cell, если вам надо поддерживать старые браузеры.

Dimon

можно и без позиционирования

Vadim Ovchinnikov

Совет №1: используйте абсолют, только когда это реально надо.

Модальные окна, выпадающие списки, более сложные, чем стандартный select и т.д.

Или для рецептов вроде текстовое поле с картинкой.

Dimon

вообще, насколько я понял, в данном примере когда я задаю top и bottom + height, то получается КОНФЛИКТ

то, есть высота как бы от низа до верха вьюпорта + задаю фиксированную высоту

Vadim Ovchinnikov

8:33 AM

Можете для начала отметить мой ответ как принятый если он вам помог?

Dimon

отмечу. я вам плюс поставил

отметил

Vadim Ovchinnikov

Так вот без абсолюта если это
1. Именно элементы.
контейнеру display: flex; ребёнку
если верт. и гор. — margin: auto;

если верт. — margin-top: auto; margin-bottom: auto;

если гор. — margin-left: auto; margin-right: auto;

Dimon

с display: flex я еще не знаком

Vadim Ovchinnikov

2. Если надо просто текст (однострочный):
text-align: center;
line-height = height блока или если высота не фиксированная то просто добавить padding-top = padding-bottom

Dimon

давайте вернемся к вопросу про КОНФЛИКТ

Vadim Ovchinnikov

8:37 AM

А зачем?

Я вам предлагаю верстать по-другому

Dimon

можно двумя путями решить конфликт - если нет margin-top и margin-left авто, то, насколько я понимаю, bottom просто игнорируется

потому что description стоит в ltr

Vadim Ovchinnikov

3. Если абсолютно позиционируемые элементы:
верт:
top: 50%;
transform: translateY(-50%);
гор:
left: 50%;
transform: translateX(-50%)
верт и гор:
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

Dimon

второй вариант решения конфликта с высотой - это задать margin-top и margin-left авто. при этом не будет отбрасываться bottom.

Vadim Ovchinnikov

Я вам предложил варианты

где не надо задавать высоту

Dimon

меня интересует именно этот вопрос. про конфликты

как они решаются

Vadim Ovchinnikov

8:40 AM

Так и задайте вопрос на SO

Я вам и так информации немало дал

SO?

StackOverflow

ладно тогда

А вам видимо оно не надо

И вы не цените моё потраченное время

Dimon

меня интересует вопрос, как конфликт решить

Vadim Ovchinnikov

8:41 AM

Я вам говорю, что это неудобно

Dimon

как они решаются

Vadim Ovchinnikov

А вы продолжаете

Dimon

при чем тут это

я хочу понять, как это работает

а не как удобно

мне удобно джаваскриптом все делать

но я хочу разобраться, как это кссом делать

Vadim Ovchinnikov

Ну так и делайте JavaScript

Dimon

и как ксс работает

Vadim Ovchinnikov

8:43 AM

CSS я вам рассказал

капец как содержательно

Механику для всех случаев в спеке покрыть — это очень долго

Dimon

меня интересовал вопрос, как конфликты решаются при абсолютном позиционировании

Vadim Ovchinnikov

Но если хотите можете исследовать все страницы (по-моему их 800 с чем-то).

Dimon

это перебор

Vadim Ovchinnikov

Какие конфилкты?

кого с чем?

Я тоже думаю, что перебор

Dimon

если я задаю топ и боттом, то я указываю высоту

блока

если если я еще и видз напишу, то это будет ЯВНОЕ указание

идет конфликт по высоте

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

Vadim Ovchinnikov

8:46 AM

Вы явно указываете высоту и ширину — это я понял

Конфликт с кем идёт по высоте, я не понимаю

Dimon

то, есть я говорю "блок такой высоты, что топ равен столько-то, а боттом равен столько-то"

Vadim Ovchinnikov

а руками указана высота совсем другая?

Dimon

а потом говорю "высота хайт равна столько-то пикселей"

Vadim Ovchinnikov

это что значит?

Dimon

да

это и есть конфликт, о котором я написал

Vadim Ovchinnikov

8:48 AM

Не понимаю

Если вы допустим указали 100px, то высота чему равна?

Dimon

если я в примере выше уберу height:200px; , то по высоте блок растянется по всему вьюпорту

потому что указано топ и боттом

Vadim Ovchinnikov

Ну правильно и логично

Dimon

указание топ и боттом - это указание высоты

Vadim Ovchinnikov

И что?

Dimon

а потом я еще раз указываю высоту через хайт

два раза указал двумя способами

браузер должен понимать, что делать - какую высоту брать

меня интересует механизм разрешения конфликта в данном случае

Vadim Ovchinnikov

8:51 AM

Браузер должен работать по спеке

Dimon

это понятно

может быть вы знаете этот механизм, поэтому и спросил

Vadim Ovchinnikov

Если не указываете высоту, и указываете top и bottom, то блок растянется между top и bottom.

Dimon

это я знаю

Vadim Ovchinnikov

А в чём вопрос?

Я здесь не вижу никаких "конфликтов", а вижу поведение по спецификации, вот и всё.

CSS1, CSS2.1 полны странностями, CSS3 в этом отношении мне больше нравится.

Вы здесь?

Dimon

да

я вопрос в пейнте рисую

наглядно

Vadim Ovchinnikov

8:58 AM

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

Dimon

да

Vadim Ovchinnikov

Может вы сами найдёте нужный фрагмент?

Или вы видите какой-то нестандартный случай?

Dimon

ладно. не буду вас задерживать

Vadim Ovchinnikov

Ну хотя давайте

Просто мне не хочется растягивать дискуссии часа на 3

Такая спека

До категории "интуитивно понятна" ей далеко

Dimon

я понимаю, что времени нет

height:200px;

top:200px;
bottom:200px;

высота вьюпорта 804 пикселя

то есть, bottom:200px; ТУПО ИГНОРИРУЕТСЯ

хотя и задано

это конфликт по высоте. он решился так: браузер подвинул на 200 пикселей вниз блок, потом задал ширину 200, а боттом отбросил

хотя он и отображается как 200 пикселей

приоритет - сверху вниз. то есть, топ в большем приоритете, чем боттом. поэтому боттом было отброшено

вот эта схема меня и интересует

Dimon

9:21 AM

еще вопрос есть. если я не задаю какое-то свойство ксс, то берется дефолтное значение этого свойства. та же величина шрифта, например. какие свойства ксс по дефолту в авто? насколько знаю, width:auto - блок всегда по ширине растягивается

Dimon

9:38 AM

ладно. мне пора идти. еще раз спасибо

Vadim Ovchinnikov

По поводу картинки не знаю что прокомментировать

Да, такое поведение, как вы видите.

Какие свойста по default auto

сходу не скажу

просто любое интересующее свойство берёте, гуглите и смотрите default

Transcript for