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

Преди да разгледаме най-често срещаните техники, които биха искали да припомним някои теория. елементи на уеб-страници са разделени на блоков и по-ниска. А разликата между тях е много проста - по-ниската случай могат да бъдат организирани в един ред, и блока - не. Разбира се, това разграничение не свършва, но това е основната разлика. Още в блокове може да бъде разчленена отгоре и отдолу (с малки букви - не), и те могат да се прилагат повече свойства.

Основните начини за изграждане на CSS блокове в един ред

Няма нищо няма да се усложняват нещата, има 3 основни начина:

Конвертиране на единици за по-ниски елементи. В същия блок свойства се губят, така че тази опция е почти никога не се използват

Направете необходимите блокови елементи малки букви. Това е специален вид, в който елементът, който запазва свойствата, но в същото време позволява на други звена в близост.

HTML5 и CSS3 практика от нула до резултата!

Уверете се, плаващи елементи, използващи плувка собственост.

В тези изпълнения, живеят. Fleksboks, табличен дисплей, както и други пъти ние няма да се разгледа. Така че, нека да има 3 субтитрите.

Естествено, всички с CSS свойства трябва да се регистрират в отделен файл (style.css), който трябва да бъде свързан към HTML-документ. В този файл ще пиша минимален стил, само за да се види, нашите субтитри.

Ето кои са те на страницата:

Там те се държат като блокове. Kady намира на своята линия, има пълнеж между тях. Ако желаете, можете да определите какво искате пълнеж и като цяло направи нищо.

Трансформация в съответствие и веднага добави подложка. За да направите това, необходимостта за избор на h3 да добавите следните свойства:

HTML5 и CSS3 практика от нула до резултата!

Както можете да видите, вдлъбнатината не се прилага напълно вярно, то е само защото ние се занимаваме с низове. Ако промените дисплея, за да блокира низ, пълнеж ще бъде добавен правилно. За да направите това, просто променете стойността на имота:

Има 2 основни проблеми, които възникват при използването на тази техника. Първо - това е минималната вдлъбнатината. Тя се формира поради факта, че кодът е едно пространство, което представлява разстоянието между блокове. Ако този проблем трябва да се реши, има 2 основни варианта:

Кодът на HTML, необходима за поставяне на блоковете в един ред, без пропуски

Залепете отрицателен външен отстъп -4 десен пиксел. Това отнема толкова много за едно помещение.

Вторият проблем - с различни височини на елементите може да се появи проблеми с показването. Като цяло, най-добрият вариант - плаващ единици. Вместо дисплей: инлайн блок пиша това:

И всички наши позиции трето ниво ще бъде натиснат наляво. Съответно, също така е възможно да ги натиснете и наляво. При използване на тази техника, описаните по-горе проблеми не се появяват първоначално.

Само за това, което трябва да внимавате в този случай - потокът на закриване. На следващия блок, след като плаващ трябва да поставите ясно имота: и двете, че той не се опитва да обгърне тези блокове и да се намира по-долу, както трябва да бъде.

Блокове в съответствие с рамката

Аз трябва да кажа, че ако ще да се използва всеки нормален CSS-рамка (например, за първоначално зареждане) все още има много по-лесно. Всички CSS код, отговорни за баланса на елементите, които вече е писано, ще трябва само да зададем правилните упражнения. Това е достатъчно, за да се разгледа системата на преносната мрежа, и вие ще бъдете в състояние да направи няколко колони адаптивни шаблони без много затруднения. Най-малко, това ще бъде много по-лесно, отколкото писмено от нулата CSS.

Друг проблем с писане на код от нулата се появява точно когато имате нужда от адаптивен дизайн. Разбира се, че може да се прилага самостоятелно, притежава медийни заявки, но ще бъде много по-трудно, ако имате сложен модел.

Smooth трансфер на темата към рамката за първоначално зареждане, за пореден път ще отбележа, че ако се изправят пред предизвикателството да налага сложна адаптивна шаблон, грях да не се възползват от мрежата. За да направите това, вие дори не е необходимо да се свържете пълната версия на рамката - това е възможно, за да персонализирате и да се спре там само това, което наистина се нуждаят.

HTML5 и CSS3 практика от нула до резултата!

Най-IT новини и уеб разработки на нашия канал Телеграма