Допълване, марж и граничен

Допълване, Марж и Гранична - попитайте в CSS вътрешна и външна облицовка, както и ramkidlya всички страни (горе, долу, ляво, дясно)

Здравейте, скъпи читатели на блога KtoNaNovenkogo.ru. Днес искам да продължи проучването на тема CSS (Cascading Style Sheets) и да разгледа правилата за стил, които ви позволяват да се определят граници и граници за Html елемента: граница, маржин и подложка.

Преди да имаме време да се проучи по-скоро прости свойства, които контролират шрифтове (Font Тегло, Семейство, размер, стил) текстът (текст декорация, вертикална подравняване, текст подравняване) и преглед на модела на фона на CSS чрез фонов режим.

Да, дори и ние, и как да се използва селектори е трябвало да разгледа всички детайли (обхваща период от няколко статии). Сега е време да се премине към правилата, които са в основата на строителни книжа (уеб страници), а ние ще я стартирате с модела на блок (взаимоотношения Html елементи).

По принцип, аз написах за оформление блок Div и модерно оформление на сайта. Е, днес ще бъде нетен специфика. Ако искате да се запознаете с предишни публикации по темата, тогава сте добре дошли в указателя.

Блок модел в CSS - уплътнение, марж и граничен

За Firefox браузър има голяма добавка, наречена Faerbag. която имам за дълго време и подробно писа.

Тази диаграма показва ясно, че за всеки елемент в Html CSS може ясно да се определят размерите на четири правоъгълни площи. Вътре в цялата структура е, в действителност, съдържанието на маркера (например текст или образ), който на свой ред може да включват други вложени елементи (например Таблица клетки и тяхното съдържание).

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

След от центъра към периферията, ще имаме след рамката, за да зададете областта на външната вдлъбнатината използване на марджин. Тя ви позволява да се коригира границите на отношенията с други единици. Например, чрез създаване на отрицателен отстъп CSS правило Мерсин, е възможно да се постигне някои блокове наслагване уеб страница, за други съседни блокове на една и съща страница.

Веднага казвам, че можете да зададете на марджин и уплътнение, както и граница на размера рамки отделно за всяка страна на блок (правоъгълна област), които са дефинирани като:

1. отгоре (горе) - например, подложка-отгоре, Марги-отгоре, граничен-горния
2. дъно (дъно)
3. ляв (вляво)
4. надясно (вдясно)

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

По принцип, за да го разбере, първо трябва да се разбере, че всеки Html елемент се намира в определена област. Тази област е в CSS се нарича контейнер. и обикновено е контейнер за единица площ на съдържанието на неговата майка елемент.

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

Оказа се, е малко объркващо, но начина, по който се случва винаги в началото. С течение на времето, вие всички сте в моите ustakanilos на главата и блок модел ще се изчисти и стройна форма. В противен случай той не може.

Margin (горе, долу, ляво, дясно) - външна облицовка в CSS

Да започнем нашето разглеждане на CSS свойства да се уточни уплътнение и граници с марджин. Ясно е, че това правило може да се запише по отделно за всяка страна на модела на блок, и това е допустимо да се използва от следните стойности:

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

Ами, на първо място, това е един магически Auto. които са предоставени на изчисляване на тези браузър-външният маржове. Ясно е, че браузърите на изчисленията се използва някои стойности и всичко е далеч от тривиално. Докато ние се отбележи, че за себе си марж Auto изисква отделен изчисляване на тези ценности от браузъра.

На второ място, като стойностите за марж-нагоре, надясно, надолу и наляво може да се използва триизмерни ценности Ем Екс или Px.

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

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

Е, няма нужда да казвам, че има сглобяема CSS правило маржа, които в много случаи може да намали размера на кода, използван за извършване на необходимия външен подложка. Последователността на ценности в него е строго регулиран (те са предписани от интервал характер) и трябва да отговаря на модела:

Т.е. списък започва с горния (отгоре) и продължава по часовниковата стрелка, докато пълен кръг отстъп надясно (вдясно). Тя може да изглежда по следния начин:

И това ще означава, че браузърът е на върха на нашия блок трябва тире от 20 пиксела, нали - 10, от дъното - 40, а в ляво - с други думи, 30 Този пост е еквивалентно на това:

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

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

Последното може да се пропусне:

Тези две правила записи готови да направят същото. Ето защо, ако видите запис с три стойности в полето, след което стойността на четвъртия (вдясно) може да Peep в секунда (вляво).

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

Ако в допълнение към равенство на външен отстъп от ляво и от дясно, което трябва да бъде равенство на стойности по-горе и по-долу:

или това, което е едно и също нещо (по силата на параграф 1):

Това е сглобяема правило могат да бъдат написани само с две стойности, отхвърляне на последния, който е същият като първите;

В този случай, първата стойност описва външните граници на вертикалата, а вторият - хоризонталата.

И накрая, ако всички стойности в правило колекция ще бъде един и същ:

или това, което е едно и също нещо (по силата на параграф 2):

Това ще бъде възможно да се използва намален максимално тип запис (изхвърляне на последната стойност съвпада с първия):

Това би означавало, една и съща външна подложка от всички страни на нашия Html елемент.

Когато говорим за външната подложка, заслужава да се спомене за тази схема, тъй като «Марж-colloapse» или, от друга, "колапс марж." С две думи същността на това явление е, както следва.

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

Например, когато се определя към горния блок следва:

Тогава на долната граница на горната част на блока (200px) усвояване на горната граница на по-ниска (100 пиксела, но дори това да стане равна 199px нищо не се променя) и получената външна вдлъбнатината между двата блока ще продължи да бъде равен 200px. Т.е. Тя се взема предвид само в по-голям марж модул, и това не се връзва с брояч стойност на съседния вертикален елемент.

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

Така например, в този случай:

Получената разстоянието между блоковете е равна -10px, т.е. дъното на горната 10px naedet Html елемент.

Друга особеност на използването на марджин в правилото за CSS е, че предписаната стойност на договорените вертикалните елементи на се игнорира. конкретизиране на:

Например, за линка. който е линия елемент, ние наистина виждам само тиретата в хоризонтално и вертикално без промяна.

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

В случай на маркер блок (позиции, параграфи) се увеличават Padding вертикално преместени в тази позиция в сравнение с други съседни блокове.

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

Допълване и гранично - уплътнение и граници

Нека сега се обърнем към задачата на вътрешните попълващи отстъпи, използвайки правилата и да видим какви стойности може да отнеме:

Както можете да видите, че не се споменава на авто, и това CSS правило не позволява използването на отрицателни стойности (те могат да бъдат само положителни - от нула нагоре). Т.е. използване на съдържание Padding извън рамката да настоява не работи. Максимумът, който може да се направи е да се съберат съдържание в близост до рамката.

Процентите него се считат за точно същата като в полето - по отношение на ширината на контейнера (изходен съдържание площ), която е затворена в нашата елемент. Сглобяеми правило Padding в Css се формира и се подчинява на същите закони, и се смята за малко по-високо:

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

И най-накрая, днес бих искал да видя - това е рамката, която се уточняват от границата. Те имат три типа параметри:

1. Гранична ширина - дебелина рамка определя
2. Гранична цвят - задава цвета
3. Гранична стил - тип рамка или линия тип, които ще бъдат предоставени

През всички тези три правила CSS имат валиден набор от ценности:

ширината на линията за рамка (Border-ширина) може да се даде с цифри в Ем Екс или Px и думите,

1. Тънък - тънка линия;
2. Средна - среден (това е по подразбиране);
3. Дебела - дебел.

Стойността на цвета на рамката (Border-цвят) могат да бъдат взети, за да използвате цветовете в Html начини за работата си (шестнадесетичен код на думи и т.н.):

По подразбиране, ако не е посочено ясно цвета на рамката, той ще използва този, който се използва за текст в този елемент.
CSS Гранична стил имот ви позволява да настроите рамката въведете думите:

1. Няма - без рамка (по подразбиране)
2. Пунктирана линия - съставен точки
3. Подчертан - пунктирана линия
4. Твърди - плътна линия
5. Двойна - двойна линия
6. Groove - изрязана рама
7. Ridge - издут
8. Вътрешен и начало - Игра с сянка

Естествено е, че има четири пъти от всяка единица, тя може да се използва като общо правило, и отделно за всяка от страните:

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

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

На добър час! Ще се видим скоро на страниците на блога KtoNaNovenkogo.ru