CSS բոց: նկարագրություն, հատկությունները

Float - մեկը հիմնական գործառույթներից է լեզվի CSS- ը (են Cascading է Style թերթ - Ձեւավորման cascading): Այս լեզուն գոյություն ունի, քանի որ 1996 թ., Եւ դեռ շարունակում է զարգանալ: Ներկայումս, մշակողները են օգտագործել երրորդ տարբերակը CSS. Հետ CSS ծրագրավորման լեզվի, դա հնարավոր է ստեղծել մի գեղեցիկ ու հաճելի կայքը, որը չի հայտնվում հնացած կամ անհարմար մասին, նույնիսկ եթե դուք չեք օգտագործում JavaScript: Ժամանակակից հնարավորությունները երրորդ տարբերակի թույլտվության:

Բացի այդ, մշակողները կարող են օգտագործել ավելի հարմար չափագրումը տարբերակներ, ինչպիսիք են Flexbox կամ պաշտոնի փոխելու տարրը տարածության վրա տեղում, բայց առաջին բաներ առաջին. To սկսում են հասկանալ, առավելություններն ու թերությունները բոց հատկությունները:

CSS Բոց - ինչու է դա անհրաժեշտ է.

Բոց - գույքը դիրքորոշման տարրերի. Ամեն օր, ապա դա կարելի է տեսնել էջերում թերթերի եւ ամսագրերի, նայում նկարները եւ տեքստի, որը շատ neatly բոլորի նրանց շուրջը: и CSS при использовании функции Float должно произойти то же самое. Է աշխարհում HTML եւ CSS կոդը օգտագործելով բոց գործառույթը պետք է տեղի ունենա նույնն է: Բայց դա արժե հիշել, որ պատկերը խմբագրում միշտ չէ, որ հիմնական նպատակը այս գործառույթը: Այն կարող է օգտագործվել է ստեղծել հայտնի Որտեղից տարրերի կայքի երկու, երեք, չորս սյուների. Ի դեպ, բոց CSS գույքը օգտագործվում է գրեթե ցանկացած html-տարր. Իմանալով, հիմունքների խմբագրման դասավորությունը տարրերը օգտագործելով բոց գործառույթը, ապա գույքը, ինչպես նաեւ ստեղծել ցանկացած դիզայնի կայքի դժվար չի լինի:

Հատուկ DTP ծրագրերը կարող են երբեմն անտեսում են պատկերները, եւ գնալ ավելի քան նրանց. Բավարար նմանատիպ բաներ են լինում, եւ վեբ-դիզայն, միայն լույսի ներքո տեքստի, այլ ոչ թե բարձրանալ վրա պատկերված է դրսեւորվում (եթե ճիշտ օգտագործվում բոց հատկությունները) կողքին ես, կամ տակ է, բայց ոչ միշտ, որտեղ դուք պետք է մշակողի.

CSS Բոց գույքի նկարագրությունը

Ի դեպ, կարողություն օգտագործել բոց սեփականությունը շատ լավ ace ի անցքը ցանկացած վեբ դիզայներ: Բայց, ցավոք սրտի, այդ բացակայությունը հասկանալու, թե ինչպես է այս աշխատանքները կարող է հանգեցնել բախումների եւ այլ տարրերի Կայքի տառապանքներից այս տեսակի. Ավելի վաղ նույնպես նման իրավիճակներ առաջանալ, քանի որ bugs է բրաուզերների. Այժմ գաղտնիքը, թե ինչպես պետք է ճիշտ օգտագործել բոց գույքը կբացվեն, եւ ոչ մի խնդիր դրա հետ չպետք է լինի ավելի մեծ է.

Մենք Բոց գույքը ունի չորս արժեքները:

• Բոց: ժառանգեն.
• Բոց: Աջ;
• Բոց: ձախ;
• Բոց: none;

Նրանց համար, ովքեր գիտեն անգլերեն, պարամետրի արժեքները բոց գույքը պետք է լինի պարզ է. Բայց նրանց համար, ովքեր չգիտեն, որ դուք կարող եք բերել մի քիչ բացատրություն: Պարամետր: ձախ; Այն շարժվում տարր մարմնին առավել ծայրահեղ ձախ անկյունում մայր տարր. Նույնը տեղի է ունենում (միայն այլ ճանապարհ), երբ bcgjkmpjdfybb պարամետր: Աջ; , Արժեքը: ժառանգեն. հրամայում տարրը ստանձնելու նույն կոնֆիգուրացիան, քանի որ այդ ծնողի: Նման տարրեր կոչվում երեխան դեռ, քանի որ նրանք գտնվում են ուղղակիորեն շրջանակներում մայր է HTML-ի կոդը: Գույքը: none; Այն թույլ է տալիս տարրը չի խանգարել սովորական հոսքը փաստաթղթի, որը սահմանված կարգով default - բոլոր մասերի օրենսգրքի:

Թե ինչպես կարելի է բոց աշխատանքը.

Բոց CSS գույքը աշխատում բավական է պարզապես: Բոլորը, որ արդեն նկարագրված է վերը, կարելի է անել առանց մեծ դժվարության: Դրանից հետո, ամեն ինչ կլինի այնպես, ինչպես հեշտ է. Բայց մինչ ես շարունակելու ուսումնասիրում բոց հատկությունները, արժե մի քիչ նայենք դեպի տեսության: Ամեն կայքը տարր բլոկում. Դա շատ հեշտ է տեսնել այս բացելով մխիթարել Google Chrome- ի սեղմելով Ctrl + Shift + J. տեքստի, վերնագրի, պատկերի, հղումներ, եւ բոլոր մյուս բաղադրիչները կայքի կցուցադրվեն նյութից, պարզապես տարբեր չափերի. Ի սկզբանե, այդ բոլոր արգելափակում հետեւում են միմյանց. Ինչպես ցույց է օրինակ ստորեւ կոդը լարային գնալ մեկը մյուսի հետեւից, եւ որպեսզի նրանք հայտնվում է խիստ մեկը մյուսի ետեւից:

Սա կոչվում է նորմալ հոսք (նորմալ հոսքը): Երբ բոլոր այդպիսի արգելափակում ընկնում շրջանակներում միմյանց հետ (մարմնի `առանց հատելու տարրեր) ուղղահայաց: Ի սկզբանե, բոլոր բովանդակությունը վեբ էջերում գտնվող այս կերպ. Սակայն, երբ, օգտագործելով, օրինակ, հատկությունների CSS բոց Ձախ լեզուն տարր թողնում է իր բնական դիրքորոշումը էջում եւ շարժվում դեպի ձախ: Այս պահվածքը հանգեցնում է անխուսափելի բախման հետ այդ տարրերի, որոնք մնացել են նորմալ հունով:

Այլ կերպ ասած, այդ տարրերն են, այլ ոչ թե դիրքերում ուղղահայաց, այժմ կից մեկը մյուսին: Եթե ծնողը տարրը բավարար տարածք այնպես, որ այն կարող է տեղավորել երկու երեխա ներսում, բախումը չի առաջանում, բայց եթե ոչ, ապա տուգանքի մի օբյեկտից մյուսին անխուսափելի է. Այն չափազանց կարեւոր է հիշել, հասկանալու համար, որ հատկությունների բոց CSS.

Մաքրել ֆունկցիան է լուծել խնդիրները

Մենք Բոց առանձնահատկություններ մի սիրտ յուրաքանչյուրը Մաքրել. Միասին նրանք չեն թափել ջուրը: Այդ երկու հատկանիշները լրացնում են միմյանց, եւ դարձնել ծրագրավորողը երջանիկ: Ինչպես վերը նշվեց, հարեւան բջիջները դուրս գալ իրենց բնականոն ընթացքի, ինչպես նաեւ սկսում է «բոց», որպես տարր է, որի բոց գույքը օգտագործվում էր (օրինակ, CSS բոց Top): Որպես հետեւանք, այլ ոչ թե մի լողացող տարր ստանում երկուսը, եւ ոչ այն վայրում, որտեղ նրանք մտադիր է կազմակերպել մշակողի. Այդ պահից է սկսվում բոլոր խնդիրները:

Ժամը Clear ֆունկցիան ունի հինգ արժեքները:

• : Ձախ;
• : Right;
• Թե;
• : Ժառանգել;
• ոչ մեկը;

Ըստ նմանակը կարող ենք հասկանալ, երբ դա լավագույնս օգտագործել Մաքրել գործառույթը: Եթե մենք գրել մի գիծ է կոդի բոց: Աջ; (CSS կոդ նշանակում), որի գործառույթը պետք է լինի պարզ, ճիշտ ;. Նույն հատկությունները ժայռերի ու բոց: Ձախ, այն լրացնում հստակ: ձախ; , Երբ գրում կոդը Մաքրել `երկուսն էլ: պարզվում է, որ այն տարրը, որը այն կիրառվում, այս հատկությունը կլինի ցածր տարրերի, որոնք կիրառական բոց գործառույթը: Ժառանգել վերցնում կարգավորումներին մայր տարր, բայց ոչ մեկը չի չի կատարել որեւէ բարեփոխեց կայքում. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. Եթե դուք հասկանում եք, թե ինչպես է բոց ու Մաքրել գործառույթները, դուք կարող եք գրել մի յուրահատուկ ու անսովոր HTML եւ CSS բոց-կոդ, որը կդարձնի Ձեր կայքը եզակի է իր տեսակի մեջ:

Օգտագործելով բոց է ստեղծել սյուները

Բոց հատկապես օգտակար առանձնահատկություն, երբ ստեղծելով սյուներ է կայքում (կամ գտնվելու վայրը, CSS բոց բովանդակության կենտրոնում ինտերնետային էջում): Դա սա կոդը է առավել գործնական եւ հարմար, այնպես որ դուք պետք է հաշվի առնել մի քանի տարբերակներ համար ստեղծել սովորական կայքի ձեւանմուշ, որը բաղկացած է երկու սյուների. Օրինակ, մի ստանդարտ կայքը բովանդակության վրա ձախ նավարկություն բար (նավարկություն բար), ինչպես նաեւ աջ, header եւ ստորագիր. Կոդը կարծես այս խմբին:

Այժմ մենք պետք է հասկանանք, թե ինչ է գրված այստեղ: Ծնողը տարր է, որի հիմնական մասն է HTML կոդի կոչվում է կոնտեյներ (կոնտեյներ): Այն թույլ է տալիս Ձեզ է կանխել տարրերը, որոնք կիրառվում բոց գործառույթ թափել են տարբեր ուղղություններով: Եթե դա չի եղել, ապա այդ տարրերը լուղարկել մինչեւ սահմաններում բրաուզերի.

Ապա, վարքականոնի եւ գնալ #content #navigation. Այդ տարրերն են օգտագործվում բոց գործառույթը: #content ուղարկվել է ձախ եւ աջ է #navigation. Անհրաժեշտ է ստեղծել մի կայք, երկու սյուների. Վստահ լինել, նշեք լայնությունը, այնպես, որ օբյեկտները չեն համընկնում իրար. Դուք կարող եք նշեք լայնությունը եւ տոկոսային. Այնպես որ, նույնիսկ ավելի հարմար է, քան պիքսելներով: Օրինակ, 45% 45% եւ #content համար #navigation, իսկ մնացած 10% տալ անշարժ գույքի մարժա:

Պատկանում է պարզ է, որը գործում է #footer, չի հետեւել էջատակի #navigation եւ #content, բայց թողնում այն նույն վայրում, որտեղ նա էր: Ինչ կարող է պատահել: Եթե դուք չեք նշել Մաքրել գույքը: Այս կոդի #footer պարզապես գնալ եւ կլինի տակ #navigation: Սա տեղի է ունենում այն բանի շնորհիվ, որ #navigation բավարար տարածք տեղավորել ավելի քան մեկ տարր. Այս օրինակում դա հստակ տեսանելի է, թե ինչպես հատկությունները Clear բոց եւ լրացնում են միմյանց:

Troubles դուք կարող բախվում գրելիս կոդը

Վերոհիշյալ օրինակները շատ պարզ. Բայց նրանց հետ կարող է առաջացնել խնդիրներ: Ընդհանուր առմամբ, ըստ էության, շատ անսպասելի դժվարության կարող է պատահել բոց գործառույթը: Անկախ նրանից, թե ինչպես է տարօրինակ, բայց խնդիրները սովորաբար չեն ունենում CSS- ի հետ, եւ HTML- կոդ. Այն վայրը, որտեղ տարր է բոց ֆունկցիայի մի HTML- կոդ անմիջականորեն ազդում է վերջնական աշխատանքը: Խուսափելու համար տարբեր տեսակի դժվարություններին, դա լավ է մնում պարզ կանոններ, - Դիրքի տարրեր բոց գործառույթը առաջին օրենսգրքի: Գրեթե միշտ է այն աշխատում եւ նվազագույնի հասցնել իրենց անսպասելի վարքագիծը:

բախում տարրերից

Բախում է տեղի ունենում, երբ ծնողը տարրը պարունակում բազմակի երեխան չի կարող տեղավորել բոլոր նրանց, եւ նրանք համընկնում իրար. Այն նույնիսկ պատահում է, որ տարրերը չեն կարող հայտնվել, եւ անհետանում է կայքում. Սա ոչ թե սխալ է զննարկիչը, եւ սպասվում է, եւ պատշաճ վարքագիծը տարրերի հետ բոց գործառույթից:

Պայմանավորված է այն հանգամանքով, որ այդ տարրերն են ի սկզբանե բնականոն ընթացքում, եւ ապա այն կոտրված բոց գույքը զննարկիչը կարող հեռացնել նրանց կայքում. Բայց չեն հուսահատություն, քանի որ լուծումը շատ պարզ է ու հստակ օգտագործել Cear սեփականությունը: Հնարավոր է, որ բոլոր ելքեր գտնել այս խնդրի, օգտագործումը պարզ է առավել արդյունավետ:

Բայց խնդիրն այն է, բախման, վեբ էջերը կարող է լուծվել մեկ այլ կերպ: Կան առնվազն երկու ուղիները:

• Դիրքորոշումը օգտագործումը ֆունկցիայի.
• դիմումը Flexbox:

Պաշտոն գործառույթը հաճախ լավ այլընտրանք CSS բոց. Ի կենտրոնում վեբ էջի դեպքում հայտի Պաշտոնը լավ է դիրքավորել պատկերը. Եթե պատշաճ կիրառվող արժեքները: բացարձակ եւ հարաբերական, տարրերը Ընկնել տեղը, եւ չի համընկնում իրար.

Պաշտոն վերլուծություն եւ բոց գործառույթը կոդը

и CSS Float заменить на Position. Այն պետք է զբաղվի ավելի հետ Ճանապարհին HTML եւ CSS բոց փոխարինեց Պաշտոնը: Ըստ էության, դա շատ պարզ է. Եկեք ասում են, կա տարր #container եւ #div:

#container {

լայնությունը `40%;

բոց: ձախ;

մարժա: 10px;

}

#div {

լայնությունը `40%;

բոց: իրավունքը;

մարժա: 10px;

}

#footer {

պարզ է: երկուսն էլ.

}

Այս օրինակում, օգտագործումը գործառույթների երկրորդ կոնտեյներ (CSS Div) Բոց կօգնի ստեղծել մի ստանդարտ կայքը երկու սյուների. Երբեք մի մոռացեք, որ հստակ գործառույթը: Առանց ապա դա կլինի միայն պատես տարրերի գագաթին միմյանց.

Այսպիսով, ինչպես եք փոխել CSS, եւ բոց օրենսգրքով օգտագործել postion. Շատ պարզ է:

#container {

լայնությունը `40%;

պաշտոնը: հարաբերական;

մարժա: 10px;

}

#div {

լայնությունը `40%;

պաշտոնը: հարաբերական;

մարժա: 10px;

}

Այս դեպքում #container #div եւ վերցնել անհրաժեշտ դիրքորոշումը մշակողի է մայր տարր. Հիմնական բանը,. դնում #div եւ #container մեկ ծնող տարր, որը կհամապատասխանի նրանց չափի.

Flexbox - այս ֆունկցիան կարող է փոխարինել CSS բոց.

Flexbox - առավել առաջադեմ միջոց է ստեղծել կայքեր, այդ պահին, այնպես որ, այս գործառույթը չի աջակցվում է ավելի հին տարբերակների բրաուզերների. Այս փաստը չի կարող արտոնյալ պայմաններով, այն օգտվողների համար, ինչպես նաեւ ավելի հին տարբերակների բրաուզերների չի կարողանա տեսնել ճիշտ տարբերակը կայքում.

Flexbox չէ սեփականությունը, որպես առանձին մոդուլի. Հետեւաբար flexbox աջակցում է մի շարք հատկություններով, որոնք աշխատում են միայն նրա հետ: Բացի այդ, էկրան գործառույթը, որն ունի երեք պարամետրերը inline, թաղամաս եւ inline-թաղամաս flexbox կա միայն մեկ ՖԼԵՔՍ հոսքը.

Ինչպես է Flexbox.

Այս տեխնոլոգիան օգնում է հեշտությամբ մշակողի align տարրեր հորիզոնական եւ ուղղահայաց: Flexbox կարող եք նաեւ փոխել ուղղությունը եւ կարգը ցուցադրման տարրերից. Այս տեխնոլոգիայով, կան երկու առանցքների հիմնական առանցքը, եւ խաչ առանցքը, որի շուրջ ամբողջ Flexbox կառուցված: Այն նաեւ վերացնում է ազդեցություն բոց ու պարզ է գործառույթները. Նա կառուցում է իր համակարգը օրենսգրքի, որն օգտագործում է մի եզակի է իր սեփականության, այնպես որ, ցավոք սրտի, չի կարողանա վերարտադրել բջիջների այլ հատկություններով, ինչպիսիք են բոց ու Պաշտոնը: Եվ դա կլինի շատ հարմար է, քանի որ, ինչպես վերը նշվեց, Flexbox միայն աշխատել նոր տարբերակների բրաուզերների.

Հարկ է հիշել, որ ի վերջո պաշտոնի Flexbox բոց եւ անել նույն բանը, ստեղծել անսովոր եւ յուրօրինակ դիզայնի ձեր կայքում: Յուրաքանչյուր տարբերակը քննարկվել է հոդվածում դա անում է իր սեփական ճանապարհով, եւ, հետեւաբար, ունի երկու առավելություններն ու թերությունները: Ի լրումն, դա տեղի է ունենում, որ ինչ - որ տեղ կատարյալ բոց գործառույթը (օրինակ, ժամը կայքի հետ պարզ կառուցվածքով), բայց ինչ - որ տեղ ավելի լավ է օգտագործել պաշտոն կամ Flexbox:

Կրկնակի մարժա Bug

Սակայն, երբեմն, ցավոք սրտի, ամեն developer խնդիրներ են առաջանում ոչ թե գրավոր, ինչպես նաեւ bugs եւ որոշ բրաուզերի կոնկրետ ձեւով. Օրինակ, Internet Explorer, կա սխալ, որը կոչվում է կրկնակի մարժա Bug. Նա շատացնում մարժա պարամետր է երկու, որի արդյունքում տեղահանումներ տարրերի կայքի բրաուզերի սահմանի: Խուսափել այդ, դա բավարար է, ցույց են տալիս պարամետր մարժա տոկոսային. Սովորաբար այս bug տեղի է ունենում այն ժամանակ, երբ արժեքը y եւ հատկությունների մարժան բոց կետի:

#div {

բոց: ձախ;

մարժա ձախ: 10px;

}

Այս կոդը պետք է գցի տարր Internet Explorer 20 px, ձախ. Դուք կարող եք փոփոխել կոդը հետեւյալն են:

#div {

բոց: ձախ;

մարժա ձախ: 10%;

}

կամ այնքան

#div {

բոց: ձախ;

աջ լուսանցք 10px;

}

Այդ երկու տարբերակներից կլուծի խնդիրը տեղահանումը տարրերից.

Bugs բրաուզերը եւ սխալ ցուցադրում Կայքի

Հարկ է հիշել, որ Internet Explorer - չէ միակ բրաուզերը, որ կարող է առաջանալ bugs. Ավելի հին տարբերակները Google Chrome եւ Mozilla նաեւ սխալ է դրսեւորել որոշ տարրեր ժամանակակից կայքերում: Յուրաքանչյուրի համար այդ ամրագրում, դուք կարող եք գտնել մի այնպիսի լուծում: Ընդհանուր առմամբ, մենք նշում ենք, որ օգտագործումը բոց կստեղծի օրիգինալ եւ գրավիչ կայքը դիզայն. Հասկանալով հիմունքների եւ սկզբունքները, այս սեփականության մասին կօգնի խուսափել սխալներից եւ կյանքը ավելի հեշտ է ցանկացած մշակողի.