въехать в позиционирование дивов

[https]

подскажите как быстрее всего въехать в магию позиционирования дивов?

стоит только сменить inline-block на block и все тут же разваливается

 

[Switch74]

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

 

так же на всех них влияют такие свойства как float, position, margin, clear и в определенных комбинациях может быть разный результат

[https]

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

я сам веб программист и постоянно путаюсь в этих позиционированиях и позициях с выравниваниями

[Switch74]

по мне словами это просто не описать, в любом случае получится заумная статья...

проще всего рассмотреть это на примерах, а примеров этих из данных параметров можно создать уйму...

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

[Mozzie]

https://webref.ru/layoutвроде где-то в курсах было про это.

[https]

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

[Mozzie]

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

https://webref.ru/layout/howtocodeinhtml/chapter10

[Switch74]

Сразу про все не помню. Выше указанная статья сравнивает по сути block и inline

могу посоветовать посмотреть

http://habrahabr.ru/post/161581/- подробно про inline и float

+ http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell

ну и как это все в купе работать должно http://habrahabr.ru/post/9476/

[SvDen]

Вот просто отличная статья, должно помочь: https://webref.ru/layout/magic-of-css/layout

[GTX59]

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

Все элементы на странице начинают выстраиваться слева-направо и сверху-вниз,

Строчные элементы выстраиваются в строку в соответствии с направлением текста хватает места, если не хватает места - перепрыгивают на следующую строку, имеют отступы и выравниваются по высоте в зависимости от высоты строки.

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

 

 

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

[Анна]

но если перед блочным элементом стоит элемент которому задано обтекание, то блочный элемент занимает всё свободное место сбоку от него

 

то блочный элемент не замечает зафлоаченный блок и занимает его место(подтягивается вверх), а вот текст в этом блочном элементе да, обтекает зафлоаченный элемент

[Vlad]

Вот хороший материал про позиционирование.

https://webref.ru/layout/learn-html-css/positioning-content