Шино мекунанд CSS: тавсиф, объектҳои

Шино - яке аз вазифаҳои асосии забон ба CSS (доранд, обшорӣ сабку услубҳо ба - форматкунонии обшорӣ). Ин забон аз соли 1996 вуҷуд дорад ва то ҳол идома дорад, ба рушди. Дар ҳоли ҳозир, таҳиягарони нусхаи сеюми CSS истифода кардаанд. Бо забони барномасозӣ CSS мумкин аст, ки ба эҷоди як сомонаи зебо ва писандида, ки на хоҳад пайдо кўњна ё нороҳат барои корванд, ҳатто агар шумо JavaScript истифода набаред. имкониятҳои муосири нусхаи сеюми иҷозати.

Ҳамчунин, таҳиягарон метавонад имконоти қулай форматонӣ, ба монанди Flexbox ё мавқеи барои тағйир унсури майдони дар сомона, балки он чи аввал аввал истифода баред. Барои оғоз барои фаҳмидани афзалиятҳо ва нуқсонҳои шино хосиятҳои.

CSS шино мекунанд - чаро он зарур аст?

Шино - молу мулк барои элементҳои Мавқеияти. Ҳар рӯз, он метавонад дар саҳифаҳои рӯзнома ва маҷаллаҳо дида, нигариста, ба расмҳои ва матни, ки хеле Бодиккат печад онҳо дар атрофи. и CSS при использовании функции Float должно произойти то же самое. Дар ҷаҳон аз HTML ва рамзи CSS бо истифода аз функсияи шино мекунанд, бояд ҳамин рӯй медиҳад. Аммо аз он хотир, ки таҳрир тасвир аст, ҳамеша мақсади асосии ин функсия нест. Он метавонад истифода шавад барои сохтани ҷойгиршавии машҳур унсурҳои сомона дар ду, се, чор сутун. Дар асл, амволи CSS шино аст, қариб ҳар HTML-унсури истифода бурда мешавад. Донистани асосҳои таҳрири унсурҳои тарҳбандии, ки бо истифода аз вазифаи шино мекунанд, ва он гоҳ, ки амволи, барои сохтани ҳар гуна тарҳи сомона нахоҳад кард душвор хоҳад буд.

Барномаҳои DTP махсуси баъзан метавонад тасвирҳои нодида бигиред ва ба онҳо рафтан. чи монанд Кофӣ рӯй ва веб-дизайн, танҳо бо нури матн, на аз баромадан дар расм нишон дода мешавад (агар нодуруст истифода бурда шино хосиятҳои) навбатӣ ба он, ё дар зери он, лекин на ҳамеша дар он шумо лозим аст, ки таҳиякунанда.

CSS тавсифи молу мулки ба шино мекунанд

Дар асл, қобилияти истифода бурдани молу мулки шино мекунанд дар як карта хеле хуб дар сӯрохи барои ҳар ороишгари веб аст. Вале, мутаассифона, набудани дарки чӣ гуна ин кор метавонад ба collisions ва унсурҳои дигари дардҳост сайти ин гуна оварда мерасонад. Пештар низ чунин ҳолатҳо аз сабаби хатоҳои дар браузерҳои рӯй медиҳад. Акнун сирри гуна ба таври дуруст истифода бурдани молу мулки шино мекунанд, ки кушода хоҳад шуд, ва ҳеҷ мушкилот бо он бояд бошад бузургтар.

Мо шино молу мулки дорои чор арзишҳои:

• Шино: мерос;
• Шино: рост;
• Шино: чап;
• Шино: ҳеҷ;

Барои онон, ки забони англисӣ медонед, арзишҳои параметри шино амвол бояд равшан бошад. Аммо барои онҳое, ки намедонанд, шумо метавонед баёни каме меорад. Параметри: чап; Ин бармеангезад, мақоми унсури дар гӯшаи шадид бештар чапи унсури волидайн. Дар ҳамон чизе рӯй медиҳад (танҳо роҳи дигар), вақте ки bcgjkmpjdfybb параметри: рост; . Манфиат: мерос; фармон унсури дар њолате, ҳамон тавре, ки танзимоти аз волидайн. Чунин унсурҳои даъват кўдак ҳам, чунон ки онҳо бевосита дар давоми рамзи HTML-дар волидайн ҷойгир шудааст. A амвол: ҳеҷ; Ин имкон медиҳад, ки унсури ба маҷрои муқаррарии санад, ки аз ҷониби пешфарзӣ барои ҳамаи қисмҳои кодекси вайрон аст.

Чӣ тавр ба шино кор мекунад?

молу мулки CSS шино кор хеле танҳо. Ҳамаи ин ки дар боло тавсиф шудаанд, метавонад бидуни мушкилоти зиёд анҷом дода мешавад. Баъд аз ин, ҳама чиз хоҳад шуд, чунон ки осон аст. Вале пеш аз он ки ман давом омӯзиши хосиятҳои шино мекунанд, ба маблағи назар каме ба назарияи. Ҳар сомона унсури блоки аст. Ин осон аст, ки ба дидани ин кушодани консол дар Google Chrome ба воситаи пахшкунии Ctrl + Shift + матн J., унвони, тасвир, пайвандҳо, ва ҳамаи компонентҳои дигар сомона блокҳои, танҳо андозаи гуногун нишон дода шавад. Дар аввал, ҳамаи ин блокҳои пайравӣ ҳар дигар. Тавре ки дар мисоли зер нишон дода шудааст, сатри рамзи рафта яке аз паси якдигар, ва то онҳо пайдо шавад таври қатъӣ яке аз паси дигар.

Ин аст, як ҷараёни оддии (маҷрои муқаррарӣ) номида мешавад. Вақте ки ҳамаи ин гуна блокҳои дар дохили ҳар як дигар (ҷисм бе убур аз унсурҳои) амудӣ афтод. Дар аввал, ҳамаи мӯҳтавои саҳифаҳои интернетӣ ҷойгир дар ин роҳ. Бо вуҷуди ин, ҳангоми истифодаи, барои мисол, ба хосияти CSS шино унсури забони чап тарк мавқеи табиии худ дар саҳифаи ва иқдомҳои аз ҷониби чап. Ин рафтори боиси ба бархӯрд бо касоне, ногузир унсурҳое, ки дар Ҷараёни амалияи маъмулии ҷо будаӣ.

Ба ибораи дигар, элементҳои доранд, ба ҷои амудӣ мавқеъи, ҳоло шафати якдигар. Агар унсури волидайн фазои кофӣ аст, то ки дар он ду даруни хобгоҳро, ки бархӯрд дар ҳақиқат рух нест, вагар на, ҷорӣ намудани як объект ба дигар ногузир аст. Хеле муҳим аст, ки ба хотир барои дарки хосияти CSS шино мекунанд.

Функсияи Clear барои ҳалли масъалаҳои

Мо шино Хусусиятҳои дили ҳар як - Тоза. Якҷоя онҳо - об љањонро нест. Ҳар дуи ин хусусиятҳо якдигарро пурра ва таҳиякунанда хушбахт. Тавре ки дар боло зикр шуд, ҳуҷайраҳои ҳамсоя аз ҷараёни фаъолияти худ рафта ва ҳам ба «шино» ҳамчун унсури, ки ба молу мулки шино мекунанд, ки истифода бурда шудааст (масалан, CSS шино мекунанд Top) оғоз меёбад. Дар натиҷа, ба ҷои як унсури шинокунанда меорад ду, ва на дар ҷое ки мехостанд, барои ба тартиб таҳиякунанда. Аз ин лаҳза аст, танҳо оғози ҳамаи мушкилоти.

Дар Тоза Функсияи панҷ арзишҳои:

• : Чап;
• : Right;
• : Ҳар ду;
• : Мерос;
• надорам;

Бо қиёси мо метавонем дарк вақте ки аз он беҳтар аст, ки ба истифодаи вазифаи Тоза. Агар мо ба хати шино мекунанд рамз навишта: рост; (CSS-рамзи маънои аст), функсияи бояд равшан бошад: ҳуқуқи ;. Дар ҳамин хосияти сангҳо ва шино: чап; он Тоза пурра: чап; . Ҳангоми навиштани коди Clear: ҳар ду; аз он рӯй, ки унсури, ки ба он истифода бурда мешавад, ин хусусият хоҳад поёнтар аз унсурҳои ба он истифода бурда функсияи шино мекунанд бошад. Ба мерос мегирад танзимоти аз унсури волидайн, вале ҳеҷ ягон тағйирот дар сохтори сомона намекунад. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. Агар шумо дарк, ки чӣ тавр ба шино мекунанд ва функсияҳои Тоза, шумо метавонед HTML беназир ва ғайриоддӣ ва CSS шино-рамзи, ки сомонаи худ беназир дар шакли натуралї он хоҳад нависед.

Истифодаи шино мекунанд сохтани сутунҳои

Шино хусусияти махсусан фоиданок ташкили сутунҳо дар сомона (ва ё маҳалли ҷойгиршавии маводи CSS шино дар маркази саҳифаи интернетӣ). Ин аст, ин рамзи аст, ки беҳтарин ва қулай, бинобар ин шумо бояд аз имконоти якчанд барои сохтани Шаблон сомона муқаррарии иборат аз ду сутун дида бароем. Барои мисол, як сомонаи стандартӣ бо муҳтавои дар лавҳаи новбари чап (Бар гаштан) ба тарафи рост, сарлавҳаи ва поёни номаи. Рамзи монанди ин:

Акнун мо бояд донем, ки чӣ дар ин ҷо навишта шудааст. Дар унсури падару модар, ки дар он қисми асосии HTML-коди номида зарф (зарф). Ин ба шумо имкон медиҳад пешгирии унсурҳои аст, ки истифода бурда функсияи шино мекунанд, парокандаашон соз, дар самтҳои гуногун. Агар на он буд, он гоҳ ин унсурҳо ба ҳудуди браузери шино кардаанд.

Сипас, дар кодекси ва рафта, #navigation #content. Ин унсурҳои шудаанд Функсияи шино мекунанд истифода бурда мешавад. #content фиристод, то ки ба чап ва рост ба #navigation аст. Он барои сохтани як сомона бо ду сутун зарур аст. Бинобар ин, ба муайян паҳнои, ба тавре ки объектҳои якдигар мепушонанд нест. Шумо метавонед паҳнои ва фоизи муайян мекунад. Пас, ҳатто бароҳат бештар дар пикселҳо. Масалан, 45% ба 45% ва #content барои #navigation, ва боқимонда 10% ба дод маржаи амвол.

Амволи равшан, ки дар #footer, оё #navigation номаи ва #content пайравӣ нест, вале он баргҳо ба ҷои ҷое ки буд. Чӣ рӯй дода метавонад? Агар шумо молу мулки равшан муайян нест? Дар ин рамзи #footer танҳо боло рафта, зери #navigation бошад. Ин воқеа бо сабаби он, ки #navigation фазои кофӣ барои қаноатманд бештар аз як унсури. Дар ин мисол намоиш аз он аст, ба таври равшан намоён, ки чӣ тавр хосиятҳои равшан шино ва якдигарро пурра.

Душвориҳои шумо шояд рӯ ба рӯ, вақте ки навиштани коди

Намунаҳои дар боло оддӣ мебошанд. Лекин онҳо метавонад боиси пайдоиши мушкилиҳо мегардад. Умуман, дар асл, ба мушкилиҳо дучор ногаҳонӣ рӯй дода метавонад, ба шино Функсияи. Новобаста аз он, ки чӣ тавр бегона, аммо мушкилоти одатан бо CSS рӯй надиҳад, ва HTML-коди. Дар ҷойгиршавии ки дар элементи бо функсияи шино дар HTML-коди бевосита ба кори ниҳоӣ таъсир мерасонад. Бо мақсади роҳ надодан ба намудҳои гуногуни мушкилот, аз он беҳтар аст, ки ба пайваст ба қоидаҳои оддии - унсурҳои Мавқеияти шино Функсияи Кодекси аввал. Қариб ҳамеша ба он кор мекунад ва ба ҳадди ақал расонидани рафтори ғайричашмдошт аст.

бархӯрди унсурҳои

Бархӯрд рух унсури волидайн дорои кўдак гуногун метавонанд ҳамаи онҳо хобгоҳро нест, ва он ки бо якдигар мепушонанд. Он ҳатто рӯй, ки адад, то пайдо нест, ва аз байн аз сомонаи. Ин аст, ки браузери ишколи нест, ва он дар назар аст, ва рафтори дурусти унсурҳои бо функсияи шино мекунанд.

Аз сабаби он, ки ин унсурҳо ҳастанд, аввал дар Ҷараёни амалияи маъмулии, ва он гоҳ онро шикаста аст браузери амволи шино наметавонад онҳоро аз сомонаи тоза кунед. Вале рӯҳафтода нашавед, зеро ки ҳалли оддӣ ва равшан аст, - истифодаи амвол Cear. Ин мумкин аст, ки ҳамаи роҳҳои аз ин мушкилот, истифодаи Clear самаранок аст.

Аммо масъалаи бархӯрд унсурҳои саҳифаи интернетӣ метавонанд дар роҳи дигар ҳал карда мешавад. ҳастанд, на камтар аз ду роҳ вуҷуд дорад:

• Вазифа истифодаи функсияи;
• ариза Flexbox.

Функсияи Вазифа аст, аксар вақт як алтернативаи хуб ба шино мекунанд CSS. Дар маркази саҳифаи интернетӣ дар сурати истифодаи Вазифа беҳтар аст, ки ба мавқеъи тасвир. Агар арзишҳои дуруст истифода бурда мешавад: мутлақ ва: нисбӣ, элементҳои ба ҷои фурӯ резанд, ва аз якдигар низ натавонанд мепушонанд.

Таҳлили Вазифа ва шино мекунанд рамзи функсияи

и CSS Float заменить на Position. Он бояд бо роҳи дар HTML ва шино мекунанд CSS иваз Вазифа сару. Дар асл он хеле оддӣ. Биё мегӯянд аст #container элементи ва #div нест.

#container {

Бари: 40%;

шино: чап;

маржа: 10px;

}

#div {

Бари: 40%;

шино: рост;

маржа: 10px;

}

#footer {

равшан: ҳар ду;

}

Дар ин мисол, истифодаи функсияҳои дар зарф дуюм (CSS Лиг) шино мекунанд кӯмак мекунад, ки ба таъсиси як сомонаи стандартии ду сутун. Ҳеҷ гоҳ функсияи Тоза фаромӯш. Бе он танҳо унсурҳои бар болои якдигар хоҳанд њамроњшавии.

Пас, чӣ тавр шумо ба CSS тағйир ва шино рамзи истифода Postion? Хеле оддӣ аст:

#container {

Бари: 40%;

мавқеи: нисбии;

маржа: 10px;

}

#div {

Бари: 40%;

мавқеи: нисбии;

маржа: 10px;

}

Дар ин ҳолат #div #container ва андешидани мавқеи зарурии таҳиякунанда дар унсури волидайн. Хӯроки асосии? гузошта #div ва #container як унсури падару модар, ки ба андозаи худ мувофиқ хоҳад кард.

Flexbox - ин функсия шино мекунанд CSS иваз?

Flexbox - роҳи пешрафтаи барои сохтани сомонаҳои дар ҳоли ҳозир, то ин вазифа бо нусхаҳои калонсол браузерҳо дастгирӣ нашуда истодааст. Дар ҳамин ҳол, арзон карда намешавад, барои истифодабарандагони бо версияҳои калонсол браузерҳо, ҳаргиз натавонед, ки ба дидани нусхаи дурусти сомона.

Flexbox аст, моликият, модули алоҳида нест. Аз ин рӯ flexbox дастгирӣ як қатор объектҳои, ки танҳо бо Ӯ кор мекунанд. Ғайр аз ин, функсияи Намоиши, ки дорои се параметри Inline, басташавӣ ва Inline-басташавӣ дар flexbox Танҳо як FLEX-ҷараёни нест.

Чӣ тавр Flexbox?

Ин технология кӯмак таҳиякунанда ба осонӣ мутобиқ унсурҳои уфуқӣ ва амудӣ. Flexbox инчунин метавонед самт ва тартиби унсурҳои экран тағйир диҳед. Дар ин технология, ду меҳварҳоро нест: Саҳифаи асосӣ меҳвари ва Салиби меҳвари, дар атрофи он тамоми Flexbox сохта. Он инчунин дур шино таъсири ва вазифаҳои Тоза. Ӯ месозад низоми худ дар коди, ки истифода мебарад беҳамто ба молу мулки худ, то, мутаассифона, на бошад, қодир ба такрор дар ҳуҷайраҳои дигар объектҳо, ба монанди шино мекунанд ва Вазифа. Ва аз он бояд хеле осони, зеро, чунон ки дар боло зикр, Flexbox танҳо дар версияҳои навтари браузерҳои кор мекунанд.

Қобили хотир дорад, ки дар охири Низомнома, шино Flexbox ва ҳамин аст, - эҷод тарҳи ғайриоддӣ ва аслии сомонаи Шумо. Ҳар як версияи баррасӣ дар мақолаи ба он мекунад, ки дар роҳи худ ва, бинобар ин, дорои ду афзалиятҳо ва нуқсонҳои. Илова бар ин, он рӯй, ки вазифаи шино мекунанд дар ҷое комил (масалан, дар сайти бо сохтори оддӣ), аммо дар ҷое, беҳтар истифода Низомнома ё Flexbox.

Дучандон маржаи хатоҳои

Бо вуҷуди ин, баъзан, мутаассифона, ҳар мушкилоти тањиягари барҳез ва аз рамзи навишта нашудааст, ки бо иштибоҳ ва дар баъзе шакли мушаххас браузери. Масалан, дар Internet Explorer аст, ишколи, ки номида ҳошияи хатоҳои дугона нест. Ӯ подоши Параметри маржа ду, ки дар натиҷа дохилӣ унсурњои сайти сарҳади браузер. Барои роҳ надодан ба ин, ба он ишора ба Фоизи параметри маржа кифоя аст. Одатан, ин ишколи рух медиҳад, ки арзиши банди маржаи шино мекунанд Y ва хосиятҳои.

#div {

шино: чап;

маржа-чап: 10px;

}

Ин кодекс хоҳад унсури дар Internet Explorer 20 ҳимоя карда чап наларзонад. Шумо метавонед рамзро зайл тағйир:

#div {

шино: чап;

маржа-чап: 10%;

}

ва ё то

#div {

шино: чап;

маржа-рост: 10px;

}

Ҳар дуи ин имконоти хоҳад мушкилоти унсурҳои дохилӣ ҳал кунад.

браузери иштибоҳ ва сомонаи Намоиши нодуруст

аст, ки танҳо дар браузери, ки метавонад хатоҳои рӯй надиҳад - Қобили ба ёд доред, ки Internet Explorer аст. Версияҳои калонсол аз Google Chrome ва Mozilla низ нодуруст нишон додани як хел унсурҳои сомонаҳои муосир. Барои ҳар яке аз ин Раесат, шумо метавонед ҳалли ёфт. Дар маҷмӯъ, мо қайд кард, ки истифодаи шино хоҳад намунаи аслӣ ва диққатҷалбкунанда сомона эҷод. Фаҳмидани асосҳои ва принсипҳои ин молу мулк кӯмак хоҳад кард хатоҳои ва ҳаёти осонтар барои таҳиякунанда.