Краток преглед на CSS обложување

CSS рамката е една од својствата на моделот CSS кутија . Ова стенографско својство го поставува обележувањето околу сите четири страни на елементот HTML. CSS проследување може да се примени на речиси секоја HTML таг (освен некои од табелата тагови). Дополнително, сите четири страни на елементот можат да имаат поинаква вредност.

CSS Сопственост

За да го користите стенографија на CSS, можете да го користите Mnemonic "TRouBLe" (или "TRiBbLe" за навивачите на Star Trek). Ова стои за врвот , десницата , дното и лево , а се однесува на редоследот на ширината за полнење што сте го поставиле во стенографијата. На пример:

Соочувајќи: горниот десен лев лев; padding: 1px 2px 3px 6px;

Ако ги искористивте вредностите наведени погоре, ќе применат различна вредност за полнење на секоја страна од кој било елемент на HTML што го применувате. Ако сакате да го примените истото дополнување на сите четири страни, можете да го поедноставите вашиот CSS и едноставно да напишете една вредност:

Соочувајќи се: 12px;

Со таа линија на CSS, 12-те пиксели за дополнување ќе се применуваат на сите 4 страни на елементот.

Ако сакате бајкањето да биде иста за горниот и долниот и левиот и десниот, можете да напишете две вредности:

padding: 24px 48px;

Првата вредност (24 пиксели) ќе се применува на врвот и на дното, додека втората ќе се применува на лево и десно.

Ако напишете три вредности, тоа ќе го направи истото хоризонтално дополнување (лево и десно), при менување на горниот и долниот дел:

Соочи: горниот десен и лев дното; Обележување: 0px 1px 3px;

Според модел на кутија CSS, базната е најблиска до самиот елемент / содржина. Ова значи дека базната е додадена на елемент помеѓу ширината или висината на содржината и сите гранични вредности што ги користите. Ако подлогата е поставена на нула, тогаш таа има иста работ како содржината.

CSS вредности за опаѓање

Содржината на CSS може да ја земе секоја не-негативна вредност на должина. Бидете сигурни да го наведете мерењето, како px или em. Исто така можете да наведете процент за вашето дополнување, кое ќе биде процент од ширината на блокот што содржи елемент. Ова ги вклучува и горните и долните подлоги. На пример:

#container {width: 800px; висина: 200px; } #container p {ширина: 400px; висина: 75%; Соочи: 25% 0; }

Висината на параграф во внатрешноста на елементот # контејнер ќе биде 75% од висината на # контејнерот , плус 25% од ширината за врвот, и 25% од ширината за долната подлога. Ова изнесува 300 + 200 + 200 = 700px.

Ефекти од додавање на CSS Облека

На блок-ниво елементи , баласт се применува на четири страни. Бидејќи елементот е веќе блок или кутија, базната страна се применува на страните на кутијата.

Кога додавањето на CSS се додава во внатрешни елементи , може да има некое преклопување на елементите над и под вградениот елемент ако вертикалното дополнување ја надминува висината на линијата, но нема да ја притисне висината на линијата надолу. Хоризонталното пополнување на CSS кое се применува на вградените елементи ќе биде додадено на почетокот на елементот и крајот на елементот. И салата може да заврши линии. Но, тоа нема да се однесува на сите линии на повеќелиниски елемент, па затоа не можете да користите подлога за да навлезете во сегмент на повеќелиниски вградени содржини.

Исто така, во CSS2.1, не можете да создавате контејнерски блокови, каде што ширината зависи од елемент со проценти за ширини (или ширина на подигање). Ако го направите резултатот не е дефиниран. Прелистувачите и понатаму ќе ја прикажуваат содржината, но можеби нема да ги добиете резултатите што ги очекувате. Ако размислите за тоа, има смисла, како да елементот на контејнерот треба да ја знае ширината на нејзините дете елементи за да ја дефинира неговата ширина, како на пример кога нема претходно дефинирана ширина, а еден или повеќе ширина поставена како процент од садот елемент, ова поставува кружен синџир без одговор. Ако користите проценти за ширината на нешто на вашиот документ, треба да бидете сигурни дека родителските елементи на елементите исто така се дефинирани.