Hammasi float xususiyati haqida. Tartibsiz ro'yxatlar bilan Float xususiyati gorizontal navigatsiyasi haqida

Float xususiyati HTML va CSS veb -ishlab chiquvchilari uchun kuchli va kuchli aktivdir. Boshqa tomondan, agar u qanday ishlashini to'liq tushunmasangiz, asabiylashishi va chalkash bo'lishi mumkin.

Maqola tarjimasi CSS suzadi 101... Original alistapart.com

Bundan tashqari, o'tmishda, brauzerda yoqimsiz xatolar bo'lganligi sababli, mulkdan foydalanganda asabiylashish odatiy hol edi suzmoq sizning to'plamlaringizda CSS qoidalari... Ammo keling, asabimizni tinchlantiraylik va umidsizlikni engishga harakat qilaylik. Men sizga float xususiyati elementlaringizga nima qilishini va undan foydalanish qanchalik qulayligini ko'rsataman.

Biz bosma olamda har kuni suzishni ko'ramiz, agar biz jurnalning chap yoki o'ngdagi tasviri va uning atrofida chiroyli joylashtirilgan maqolaga qarasak. HTML / CSS dunyosida matn tasvirga tegishli float xususiyatiga qarab o'raladi. Rasmda float xususiyatidan foydalanish ko'pchilikning birgina misolidir. Misol sifatida, float xususiyatidan foydalanib, biz juda mashhur bo'lishimiz mumkin ikki ustunli tartib... Aslida, siz HTML -dagi har qanday elementni o'zgartirishingiz mumkin. Float xususiyatidan foydalanishni o'rgangan va tushunganingizdan so'ng, siz joylashuv xususiyati bilan bir qatorda o'zingizni qulay va ishonchli his qilishingiz mumkin.

Float ta'rifi

Keling, nima ekanligini aniqlashdan boshlaylik suzmoq.

Float - bu an'anaviy chiziq bo'ylab o'ngga yoki chapga harakatlanadigan quti. Float -ning eng qiziq xususiyati shundaki, tarkib yon tomondan oqishi mumkin. Float: left xususiyatidan foydalanganda, kontent o'ng tomondan pastga, xuddi shunday float: o'ngga, chap tomondan pastga o'raladi.

Float xususiyati biz qo'llashimiz mumkin bo'lgan 4 ta qiymatga ega: chap, o'ng, merosxo'r va yo'q. Har bir ma'no o'z-o'zidan tushunarli. Misol uchun, agar siz float: chapga bir elementga o'tsangiz, u ota-onasining chap-eng chekkasida suzadi. Va agar siz float: o'ngni o'rnatgan bo'lsangiz, element xuddi shunday o'ng tomonga siljiydi. Ixnerit qiymati elementga mulkni ota -onadan meros qilib olishini aytadi. Va oxirgi qiymat hech kim standart emas va mulkni qo'llamaslikni bildiradi suzmoq bu elementga.

#konteyner (kenglik: 960 piksel; chegara: 0 avtomatik;) #kontent (suzish: chap; kenglik: 660 piksel; fon: #fff;) #navigatsiya (suzish: o'ng; kenglik: 300 piksel; fon: #eee;) #oyoq ( aniq: ikkalasi; fon: #aaa; to'ldirish: 10 piksel;)

Bizning #oyog'imiz #navigatsiya bloki ostida qolib ketgan. Bu #navigatsiya bloki ostida #footer uchun joy bo'lgani uchun sodir bo'ldi va bu blok tartibining normal oqimi uchun to'g'ri xatti -harakatlar. Ammo bu biz xohlagan narsa emas, to'g'rimi? O'ylaymanki, siz suzuvchi va aniq o'rtasidagi munosabatni ko'rishingiz va bir -birini qanday to'ldirayotganini tushunishingiz mumkin.

Agar sizda men kabi obsesif-kompulsiv buzuqlik bo'lsa, siz F-misolida #kontent va #navigatsiya ustunlarining har xil balandliklarini payqagan bo'lishingiz mumkin; bir nechta echim bor, lekin bu maqola doirasidan tashqarida. Men Den Sederxolmning "Faux ustunlari" ni o'qishni tavsiya qilaman, ular tarkibidan qat'i nazar, teng balandlikdagi bloklarni yasashni o'rganadilar.

Avval suzish

Hozircha biz bosh og'rig'iga olib kelmaydigan juda oddiy misollarni ko'rdik. Biroq, float xususiyatidan foydalanganda e'tiborga olish kerak bo'lgan ba'zi kamchiliklar mavjud. Ajablanarlisi shundaki, eng katta tuzoqlardan biri CSS emas, balki HTML bilan bog'liq. O'zgaruvchan elementni HTML -ga joylashtirish har xil natijalarga olib kelishi mumkin. H misolini ko'rib chiqing.

Bu erda bizda float bo'lgan kichik blok bor: uning atrofida matnli o'ng tasvir. Bizning CSS quyidagicha ko'rinadi:

#konteyner (kenglik: 280 piksel; chekka: 0 avtomatik; to'ldirish: 10 piksel; fon: #aaa; chegara: 1 piksel qattiq #999;) img (suzish: o'ng;)

Bizning ota -elementimiz, #konteyner, tor kenglikka ega va bizning suzuvchi elementimizni (rasmimizni) o'z chegaralarida saqlaydi. Bizning HTML kodimiz shunday ko'rinadi:

Bu misol bizga kerakli natijani beradi, lekin agar biz HTML -dagi ba'zi elementlarni olib, tartibini o'zgartirsak nima bo'ladi? I misolda men ko'chib o'tdim matndan keyin

Bizning natija biz kutgandek emas. Bizning tasvirimiz o'ngga siljidi, lekin endi biz xohlaganimizcha yuqori burchakda emas, balki paragraf ostiga tushib ketdi; bundan ham yomoni, bu bizning #konteyner ota -onamiz ostidan chiqib ketadi. Nima bo'lyapti?

Birinchidan. Men o'zim uchun topgan qoida - bu elementlarni birinchi bo'lib suzish. Men HTML-da, men deyarli har doim belgilash boshida suzuvchi elementlarni qo'shaman va mening suzuvchi elementlar o'zaro ta'sir qiladigan, masalan, yuqoridagi misoldagi paragraf kabi. Ko'p hollarda bu ijobiy natija beradi.

Ikkinchidan. Rasm bizning #konteyner blokining pastki qismiga yopishib qolganday tuyulishining sababi qulab tushish deb nomlangan narsa bilan bog'liq. Keling, qulash va echim variantlari haqida gapiraylik.

Yiqilmoqda

Yig'ilish - bu har xil miqdordagi suzuvchi elementlarga ega bo'lgan element o'z ichki elementlari atrofida o'z chegaralarini kengaytirmasa, xuddi ichki elementlar suzilmagan bo'lsa.

Endi uni tuzatishga harakat qilaylik CSS yordamida Hujjatimizga avvalgi kabi qo'shimcha HTML formatlashni qo'shish o'rniga. Bosh elementga barcha suzuvchi elementlardan keyin aniq xususiyatni "qo'llash" imkonini beradigan usul mavjud. Buning uchun maxfiy qiymat bilan CSS xususiyatlarini to'ldirishdan foydalaning. Shuni esda tutingki, toshib ketish xususiyati bu maqsadda ishlatilmagan va ba'zi muammolarni keltirib chiqarishi mumkin, masalan, tarkibni yashirish yoki keraksiz aylantirish paneli paydo bo'lishi. Bizning misolimiz uchun, biz hali ham to'ldirishni yashiramiz: ota -onamizga #konteyner:

#idish

Va nihoyat, Erik Meyer bu muammoning uchinchi echimini o'z ichiga olgan suzuvchi maqolasida tushuntiradi. CSS Spec 2.1 ga muvofiq:

float xususiyatiga ega element ichidagi suzuvchi elementlar uchun chegaralarini kengaytiradi.

Shunday qilib, #konteynerga float xususiyatini qo'llagan holda, bizning konteynerimiz yuqorida tasvirlangan usullarga o'xshash rasm va paragrafni o'z ichiga oladi.

Oxir -oqibat, bu qarorlarning hammasi xuddi shunday. Ular asosiy elementlarni oqimdagi suzuvchi elementlarini sanashga majbur qiladi. Usullarning har biri o'zining afzalliklari va afzalliklariga ega. Siz ularning har birini tushunishingiz kerak va keyin sizning holatingiz uchun eng mos keladiganlarini qo'llashingiz kerak.

Xulosa

Float xususiyatidan foydalanib, siz joylashtirish texnikasini sezilarli darajada yaxshilashingiz mumkin. Bu mulkning qanday ishlashini va uning xatti -harakatlariga nima ta'sir qilishini bilish sizga suzuvchi vositalardan samarali foydalanish uchun mustahkam asos yaratadi.

Kaskadli jadvallarni formatlash). Bu til 1996 yildan beri mavjud va hozir ham rivojlanmoqda. Yoqilgan bu lahza ishlab chiquvchilar allaqachon CSS -ning uchinchi versiyasidan foydalanmoqdalar. CSS dasturlash tili yordamida, agar siz JavaScript -ni umuman ishlatmasangiz ham, foydalanuvchi uchun eskirgan yoki noqulay ko'rinmaydigan, butunlay chiroyli va yoqimli sayt yaratish mumkin. Uchinchi versiyaning zamonaviy imkoniyatlari bunga imkon beradi.

Bundan tashqari, ishlab chiquvchilar saytdagi element o'rnini o'zgartirish uchun Flexbox yoki Position kabi qulayroq formatlash variantlaridan foydalanishlari mumkin, lekin birinchi navbatda. Birinchidan, siz Float mulkining afzalliklari va kamchiliklarini tushunishingiz kerak.

CSS Float - nima uchun sizga kerak?

Float - bu elementlarni joylashtirish uchun xususiyat. Buni har kuni gazeta va jurnallar sahifalarida, ularni juda yaxshi o'ralgan rasm va matnlarga qarab kuzatish mumkin. HTML va CSS dunyosida Float funktsiyasidan foydalanganda ham xuddi shunday bo'lishi kerak. Shuni esda tutish kerakki, tasvirni tahrir qilish har doim ham bu funktsiyaning asosiy maqsadi emas. U ikki, uch, to'rtta ustunda sayt elementlarining mashhur tartibini yaratish uchun ishlatilishi mumkin. Aslida, Float CSS xususiyati deyarli har qanday HTML elementiga tegishli. Float funktsiyasidan, so'ngra mulkdan foydalanib, elementlarning joylashishini tartibga solish asoslarini bilib, har qanday veb -sayt dizaynini yaratish qiyin bo'lmaydi.

Dizaynerlarning maxsus dasturlari ba'zida tasvirlarni sezmaydilar, lekin ularning ustidan o'tadilar. Veb -dizaynda ham shunga o'xshash holatlar ro'y beradi, faqat shuni esda tutish kerakki, matn rasmga ko'tarilish o'rniga uning yonida yoki pastida ko'rsatiladi (agar Float xususiyati noto'g'ri ishlatilgan bo'lsa), lekin har doim ishlab chiqaruvchiga kerak bo'lgan joyda emas.

CSS Float xususiyatlarining tavsifi

Darhaqiqat, Float xususiyatidan qanday foydalanishni bilish har qanday veb -dizayner uchun juda yaxshi. Ammo, afsuski, bu funksiya qanday ishlashini tushunmaslik sayt elementlarining to'qnashuviga va boshqa turdagi umidsizlikka olib kelishi mumkin. Ilgari, shunga o'xshash holatlar brauzerdagi xatolar tufayli ham sodir bo'lgan. Endi Float xususiyatidan qanday to'g'ri foydalanish sirlari ochiladi va bu bilan boshqa muammolar bo'lmasligi kerak.

Float xususiyati to'rtta qiymatga ega:

• Float: meros;
• Suzish: o'ng;
• Suzish: chapga;
• Suzish: yo'q;

Ingliz tilini biladiganlar uchun Float xususiyatining parametrlari aniq bo'lishi kerak. Lekin bilmaganlar uchun ozgina tushuntirish berish mumkin. Parametr : chapda; element tanasini asosiy elementning eng chap burchagiga o'tkazadi. Xuddi shu narsa (faqat boshqa yo'nalishda) bcgjkmpjdfybb parametri bilan sodir bo'ladi : to'g'ri;... Ma'nosi : meros qilib olish; elementga ota -ona bilan bir xil sozlamalarni qabul qilishni buyuradi. Bunday elementlarni bola elementlari deb ham atashadi, chunki ular html-kodda to'g'ridan-to'g'ri ota-onaning ichida joylashgan. Va mulk : hech kim; elementning hujjatning normal oqimida qolishiga imkon beradi, u kodning barcha qismlari uchun sukut bo'yicha o'rnatiladi.

Float qanday ishlaydi?

Float CSS xususiyati juda oddiy ishlaydi. Yuqorida tavsiflangan hamma narsani ko'p qiyinchiliksiz bajarish mumkin. Keyin hamma narsa oddiy bo'ladi. Ammo biz Float xususiyatini o'rganishni davom ettirishimizdan oldin, bu nazariyaga arziydi. Veb -saytning har bir elementi blokdir. Buni konsolni ochish orqali tekshirish oson Gugl xrom Ctrl + Shift + J. tugmalar birikmasini bosish orqali saytning matn, sarlavha, rasm, havolalar va boshqa barcha komponentlari bloklarda, har xil o'lchamda ko'rsatiladi. Dastlab, bu bloklarning barchasi bir -birini ta'qib qiladi. Quyidagi misolda ko'rib turganingizdek, kod satrlari ketma -ket ketadi, shuning uchun ular birin -ketin ko'rsatiladi.

Bu normal oqim deb ataladi. Bu oqim bilan barcha bloklar vertikal holda (elementlarning tanasini kesib o'tmasdan) bir -birining ustiga yotadi. Dastlab, veb -sahifaning barcha tarkibi shu tarzda joylashtirilgan. Ammo, masalan, CSS Float Left xususiyatidan foydalanganda, element sahifadagi tabiiy holatini qoldiradi va eng chapga siljiydi. Bu xatti -harakatlar muqarrar ravishda oddiy oqimda qolgan elementlar bilan to'qnashuvga olib keladi.

Boshqacha qilib aytganda, elementlar vertikal joylashish o'rniga, endi bir -birining yonida joylashgan. Agar ota -ona elementi ikkita bolani o'z ichiga joylashtirish uchun etarli joyga ega bo'lsa, unda to'qnashuvlar sodir bo'lmaydi, lekin agar bo'lmasa, bitta ob'ektni boshqasiga qo'yib yuborish muqarrar. Float CSS xususiyati qanday ishlashini tushunish uchun buni eslash juda muhimdir.

Muammolarni hal qilish uchun aniq funktsiya

Float funktsiyasining yurak do'sti bor - Clear. Ular birgalikda - Bu ikkala xususiyat ham bir -birini to'ldiradi va ishlab chiqaruvchini xursand qiladi. Yuqorida aytib o'tganimizdek, qo'shni elementlar odatiy oqimdan chiqib ketadi va xuddi Float xususiyati qo'llanilgan element kabi "suzishni" boshlaydi (masalan, CSS Float Top). Natijada, bitta suzuvchi element o'rniga siz ikkitasini olasiz, lekin ishlab chiqaruvchi ularni joylashtirmoqchi bo'lgan joyda emas. Bu erda hamma muammolar boshlanadi.

Tozalash funktsiyasi beshta qiymatga ega:

• : chapda;
• : to'g'ri;
• : ikkalasi ham;
• : meros qilib olish;
• hech kim;

Taqqoslash uchun, "Tozalash" funktsiyasidan qachon foydalanish yaxshiroq ekanligini aniqlay olasiz. Agar biz kodga qator yozgan bo'lsak Suzish: o'ng;(CSS kodi nazarda tutilgan), keyin funktsiya bo'lishi kerak Aniq: to'g'ri;. Xuddi shu silkinishlar va xususiyatlar Suzish: chapga; uni to'ldiring Aniq: chapda;... Kod yozilganda Aniq: ikkalasi ham; Ma'lum bo'lishicha, bu funksiya qo'llaniladigan element Float funktsiyasi qo'llaniladigan elementlar ostida joylashgan bo'ladi. Meros parametrlarni asosiy elementdan oladi va hech kim sayt tuzilishiga hech qanday o'zgartirish kiritmaydi. Agar siz Float va Clear funktsiyalari qanday ishlashini tushunsangiz, noyob va g'ayrioddiy HTML va CSS Float kodlarini yozishingiz mumkin, bu sizning veb -saytingizni o'ziga xos qiladi.

Ustunlar yaratish uchun Float -dan foydalanish

Float xususiyati, ayniqsa, saytda ustunlar yaratishda (yoki CSS Float tarkibini veb -sahifaning markaziga joylashtirishda) foydalidir. Bu eng amaliy va qulay bo'lgan kod, shuning uchun ikkita ustundan iborat tanish veb -sayt shablonini yaratish uchun bir nechta variantni ko'rib chiqishga arziydi. Masalan, chapda kontent, o'ngda navigatsiya paneli, yuqori va pastki qismli standart veb -saytni olaylik. Kod shunday bo'ladi:

Endi siz bu erda nima yozilganligini tushunishingiz kerak. HTML kodining asosiy qismini o'z ichiga olgan asosiy element konteyner deb nomlanadi. Bu sizga Float funktsiyasi qo'llaniladigan elementlarning turli yo'nalishlarda tarqalishini oldini olishga imkon beradi. Agar u bo'lmaganida, bu elementlar brauzerning chegaralariga qarab suzardi.

Keyin kodda #content va #navigatsiya keladi. Float funktsiyasi ushbu elementlarga qo'llaniladi. #kontent chapga, #navigatsiya o'ngga ketadi. Bu ikki ustunli sayt yaratish uchun kerak. Ob'ektlar bir -birining ustiga chiqmasligi uchun kenglikni belgilashga ishonch hosil qiling. Kenglik foiz sifatida ham ko'rsatilishi mumkin. Bu piksellardan ko'ra qulayroq. Masalan, #kontent uchun 45% va #navigatsiya uchun 45%, qolgan 10% ni esa margin xususiyatiga bering.

#Footer -da joylashgan Clear xususiyati, pastki qismni #navigatsiya va #kontentga rioya qilishiga to'sqinlik qiladi, lekin uni avvalgi joyida qoldiradi. Nima bo'lishi mumkin? agar Clear xususiyatini ko'rsatmasangiz? Bu kodda #footer shunchaki #navigatsiya ostida ko'tariladi. Bu sodir bo'ladi, chunki #navigatsiya boshqa elementni joylashtirish uchun etarli joyga ega. Bu vizual misol Clear va Float xususiyatlari bir -birini qanday to'ldirishini juda yaxshi ko'rsatadi.

Kod yozishda duch kelishingiz mumkin bo'lgan muammolar

Yuqoridagi misollar juda oddiy. Ammo ular bilan muammolar paydo bo'lishi mumkin. Umuman olganda, Float funktsiyasi bilan kutilmagan muammolar ko'p bo'lishi mumkin. Ajabo, lekin muammolar odatda CSS-da emas, balki html-kodda paydo bo'ladi. Float funktsiyali element html-kodda joylashgan joy, ikkinchisining ishlashiga bevosita ta'sir qiladi. Har xil qiyinchiliklarni oldini olish uchun, ularga rioya qilish yaxshiroqdir oddiy qoida- Float funktsiyasi bo'lgan elementlarni birinchi navbatda kodga joylashtiring. Bu deyarli har doim ishlaydi va ularning kutilmagan xatti -harakatlarini kamaytiradi.

Elementlarning to'qnashuvi

To'qnashuv bir nechta bolali ota -onalarning barchasini o'z ichiga olmaydi va ular bir -birining ustiga tushganda sodir bo'ladi. Hatto shunday bo'ladiki, elementlar ko'rsatilmasligi mumkin, lekin saytdan yo'qoladi. Bu brauzer xatosi emas, balki Float funktsiyali elementlarning kutilgan va to'g'ri harakati.

Bu elementlar dastlab oddiy oqimda, keyin esa Float xususiyati buzilganligi sababli, brauzer ularni sayt sahifasidan olib tashlashi mumkin. Biroq, umidsizlikka tushmang, chunki yechim oddiy va tushunarli - Cear xususiyatidan foydalaning. Balki, bu muammoning barcha echimlari ichida Cleardan foydalanish eng samarali hisoblanadi.

Ammo veb -sahifa elementlarining to'qnashishi muammosini boshqa yo'l bilan hal qilish mumkin. Yana ikkita usul bor:

• Manzil funktsiyasidan foydalanish;
• flexbox ilovasi.

Joylashuv funktsiyasi ba'zan CSS Float -ga yaxshi alternativ bo'ladi. Pozitsiyadan foydalanganda rasmlarni veb -sahifaning markaziga joylashtirish yaxshidir. Agar siz: mutlaq va: nisbiy qiymatlarni to'g'ri qo'llasangiz, elementlar joyiga tushadi va bir -birining ustiga chiqmaydi.

Joylashuv va Float funktsiyasi kodini ajratish

HTML va CSS kodlarida Float -ni Pozitsiya bilan qanday almashtirishni batafsilroq tushunishga arziydi. Bu aslida juda oddiy. Aytaylik, sizda #konteyner va #div elementi bor.

Bu misolda, ikkinchi konteynerda (CSS Div) Float funktsiyasidan foydalanish standart ikki ustunli sayt yaratishga yordam beradi. Tozalash funktsiyasini hech qachon unutmang. Bu holda, siz faqat elementlarni bir -birining ustiga qo'yishingiz mumkin bo'ladi.

Shunday qilib, Postion -dan foydalanish uchun CSS va Float kodini qanday o'zgartirish mumkin? Juda oddiy:

lavozim: nisbiy;

lavozim: nisbiy;

Bunday holda, #container va #div ishlab chiqaruvchiga asosiy elementda kerak bo'lgan pozitsiyani egallaydi. Asosiysi? #div va #container -ni bitta ota -onaning o'lchamiga mos kelishi uchun qo'ying.

Bu xususiyat CSS Float -ni almashtirishga qanday yordam beradi?

Flexbox hozirda veb -saytlar yaratishning eng ilg'or usuli hisoblanadi, shuning uchun bu xususiyat brauzerlarning eski versiyalarida qo'llab -quvvatlanmaydi. Bu faktni e'tiborsiz qoldirmaslik kerak, chunki eskirgan brauzer versiyalari bo'lgan foydalanuvchilar saytning to'g'ri versiyasini ko'ra olmaydi.

Flexbox - bu xususiyat emas, balki alohida modul. Shuning uchun, flexbox faqat flexbox bilan ishlaydigan bir qator xususiyatlarni qo'llab -quvvatlaydi. Bundan tashqari, moslashuvchan qutidagi inline, blokli va inline-blokli uchta parametrga ega bo'lgan displey funktsiyasi faqat bitta egiluvchan oqimga ega.

Flexbox qanday ishlaydi?

Ushbu texnologiya ishlab chiqaruvchiga elementlarni gorizontal va vertikal ravishda osongina tekislashga yordam beradi. Flexbox shuningdek elementlarning yo'nalishini va ko'rsatish tartibini o'zgartirishi mumkin. Ushbu texnologiya ikkita o'qga ega: asosiy o'q va o'zaro faoliyat o'q, uning atrofida butun Flexbox qurilgan. Bundan tashqari, Float va Clear funktsiyalarining ta'sirini yo'q qiladi. U o'z tizimini faqat o'ziga xos xususiyatlardan foydalanadigan kodda quradi, shuning uchun, afsuski, Float va Position kabi elementlarning boshqa xususiyatlarini takrorlash mumkin bo'lmaydi. Va bu juda foydali bo'lardi, chunki yuqorida aytib o'tilganidek, Flexbox faqat brauzerlarning yangi versiyalarida ishlaydi.

Shuni esda tutish kerakki, oxirida Position, Flexbox va Float xuddi shunday qilishadi - ular sizning saytingiz uchun g'ayrioddiy va o'ziga xos dizaynni yaratadilar. Maqolada muhokama qilingan har bir variant buni o'z uslubida bajaradi va shuning uchun ham afzalliklari, ham kamchiliklari bor. Bundan tashqari, Float funktsiyasi bir joyda mukammal bo'ladi (masalan, oddiy tuzilishga ega saytda), lekin qaerdadir Position yoki Flexbox -dan foydalanish yaxshiroqdir.

Ikki marjali xato

Ammo, ba'zida, afsuski, har bir ishlab chiqaruvchi yozma kod bilan emas, balki ma'lum turdagi brauzerdagi xatolar bilan bog'liq muammolarga duch keladi. Masalan, ichida Internet Explorer Double Margin Bug deb nomlangan xato bor. U Margin parametrini ikkiga ko'paytiradi, bu esa sayt elementlarining brauzer chegaralaridan tashqariga siljishiga olib keladi. Bunga yo'l qo'ymaslik uchun Marja parametrini foizda ko'rsatish kifoya. Odatda bu xato Margin va Float xususiyatlarining qiymati bir xil bo'lganda paydo bo'ladi.

chap chegara: 10 piksel;

Bu Internet Explorer -da 20 pikselli elementni chapga siljitadi. Siz kodni quyidagicha o'zgartirishingiz mumkin:

chap chegara: 10%;

yoki shunday,

o'ng chegara: 10 piksel;

Ushbu ikkala variant ham ofset elementlari muammosini hal qiladi.

Brauzer xatolari va saytni noto'g'ri ko'rsatish

Shuni esda tutish kerakki, Internet Explorer xatolarni tuzatadigan yagona brauzer emas. Eski Google versiyalari Chrome va Mozilla zamonaviy veb -saytlarning ba'zi elementlarini ham noto'g'ri ko'rsatadi. Bu xatolarning har biri uchun yechim topish mumkin. Umuman olganda, shuni ta'kidlashni istardimki, Float -dan foydalanish o'ziga xos va jozibali veb -sayt dizaynini yaratadi. Ushbu mulkning asoslari va tamoyillarini tushunish xatolardan qochishga va har qanday ishlab chiqaruvchining hayotini osonlashtirishga yordam beradi.

Element qaysi tomonga hizalanishini aniqlaydi, boshqa tomondan uning atrofida boshqa elementlar oqadi. Float xususiyati bo'lmaganida, element odatdagidek sahifada ko'rsatiladi, shu bilan birga bitta matnli satr elementning o'zi bilan bir qatorda bo'lishiga imkon beradi.

qisqa ma'lumot

Sintaksis

suzish: chap | to'g'ri | hech kim

Belgilanishlar

	Tavsif	Misol
<тип>	Qiymat turini ko'rsatadi.	<размер>
A & B	Qiymatlar ko'rsatilgan tartibda ko'rsatilishi kerak.	<размер> && <цвет>
A | B	Tavsiya etilgan qiymatlardan faqat bittasini tanlash kerakligini ko'rsatadi (A yoki B).	normal | kichik qalpoqchalar
A || B	Har bir qiymat yakka o'zi yoki boshqalar bilan birgalikda istalgan tartibda ishlatilishi mumkin.	kenglik || sanash
	Guruh qiymatlari.	[hosil || kesib o'tish]
*	Nol yoki undan ko'p marta takrorlang.	[,<время>]*
+	Bir yoki bir necha marta takrorlang.	<число>+
?	Belgilangan tur, so'z yoki guruh ixtiyoriy.	kiritish?
(A, B)	Hech bo'lmaganda A ni takrorlang, lekin B dan ortiq emas.	<радиус>{1,4}
#	Vergul bilan ajratilgan bir yoki bir necha marta takrorlang.	<время>#

Qiymatlar

chap elementni chapga tekislaydi va boshqa barcha elementlar, masalan, matn o'ng tomonga oqadi. o'ng elementni o'ng tomonga tekislaydi va boshqa barcha elementlar chapga o'tadi. Hech kim elementni o'rab ko'rsatilmagan.

Sandbox

Vinni Pux har doim ozgina tetiklanishni yoqtirmasdi, ayniqsa ertalab soat o'n birlarda, chunki bu vaqtda nonushta allaqachon tugagan edi va kechki ovqat hali boshlanishini o'ylamagan edi. Va, albatta, u quyonning chashka va tarelkalarni olib ketayotganini ko'rib juda xursand edi.

img (float: ((o'yin maydonchasi qiymati));)

Misol

Bixeviorizm, qanchalik paradoksal ko'rinmasin, sublimatsiya qilingan stimulni yoritadi, masalan, Richard Bandler submodalitalarning o'zgarishini samarali davlatlarni qurish uchun ishlatgan.

Ushbu misolning natijasi rasmda ko'rsatilgan. 1.

Guruch. 1. Float xususiyatidan foydalanish

Ob'ektlar modeli

Ob'ekt.style.cssFloat

Eslatma

Internet Explorer 6 ota -ona elementlari ichiga joylashtirilgan suzuvchi elementlar uchun ikki marta chap yoki o'ng to'ldirish xatosini ko'rmoqda. Ota -onaning yoniga qo'shilgan to'ldirish ikki barobar. Muammo odatda float elementga display: inline qo'shish orqali hal qilinadi. Ushbu brauzer, shuningdek, float qiymati berilgan yo'nalishda 3 pikselli to'ldirishni ("uch pikselli xato" deb nomlanadi) qo'shadi.

Xususiyat

Har bir spetsifikatsiya tasdiqlashning bir necha bosqichlaridan o'tadi.

• Tavsiya - Bu spetsifikatsiya W3C tomonidan tasdiqlangan va standart sifatida tavsiya etilgan.
• Nomzod tavsiyanomasi ( Mumkin bo'lgan tavsiya) - standart uchun mas'ul bo'lgan guruh o'z maqsadlariga javob berishidan mamnun, lekin standartni amalga oshirish uchun ishlab chiquvchilar jamoasining yordami zarur.
• Tavsiya etilgan tavsiya ( Tavsiya etilgan tavsiya) - Bu vaqtda hujjat W3C maslahat kengashiga yakuniy tasdiqlash uchun taqdim etiladi.
• Ishchi loyiha - muhokamadan va jamoatchilik tomonidan ko'rib chiqilishidan so'ng loyihaning yanada etuk versiyasi.
• Tahririyat qoralamasi ( Tahririy qoralama) - loyiha muharrirlari tahrir qilgandan so'ng standartning qoralama versiyasi.
• Qoralama ( Loyiha spetsifikatsiyasi) - standartning birinchi loyihasi.

Brauzerlar

Brauzerlar

Brauzer jadvalida quyidagi qoidalar qo'llaniladi.

Bugun men sizga CS: GO kabi elementlarning parametrlari haqida aytib beraman float qiymati yoki o'zgaruvchan qiymat. Bu 1gacha bo'lgan kasrli raqam. Bu raqam qanchalik katta bo'lsa, shuncha ko'p tirnalgan element shunga o'xshash bo'ladi. Nima uchun sotib olishdan oldin buyumning o'zgaruvchan qiymatini bilish muhim?

Qarang, bugun Market Stim -da ikkitasi sotuvda edi taxminan bir xil narxda. Ammo bittasida suzuvchi bor edi 0,54 va boshqasi 0,81 .

Kichkina suzuvchi miltiq ancha jozibali ko'rinishi darhol ravshan bo'ladi. Men hatto aytardimki, u eskirgan ko'rinadi, jangga qodir emas.

Hammasi bo'lib beshta element holati mavjud:

• Jang izlari 1.00 – 0.44
• Yaxshi eskirgan 0.44 – 0.37
• Dalada sinovdan o'tgan 0.37 – 0.15
• Minimal kiyim 0.15 – 0.07
• Zavod yangi 0.07 – 0.00

Shunga ko'ra, bizning AWP | Asimov (jangda yaralangan) float qiymati bilan 0,57 kabi ko'rinadi Shabby.
Sotuvchilar ham yaxshi o'zgaruvchan qiymatni ta'qib qilmoqdalar, chunki bu parametrning yaxshi ko'rsatkichi ba'zi mahsulotlarning narxini deyarli ikki baravar oshirishi mumkin.

Xo'sh, CS: GO -da float qiymatini qanday aniqlash mumkin?

Agar siz inventarizatsiyadagi elementlarning o'zgarishini bilmoqchi bo'lsangiz, csgo.exchange sayti sizga yordam beradi. Saytga o'ting, Steam -ga kirish uchun tugmani bosing va sayt sizning inventarizatsiyangizni yuklashini kuting (qancha element bo'lsa, shuncha uzoq yuklanadi). Keyin qurolga ishora qiling va uning qiymatini ko'ring.

Bozordagi o'zgaruvchan qiymatni qanday ko'rish mumkin?

Yaqinda men plagin haqida sharh yozdim. Shunday qilib, ushbu plaginning yana bir ajoyib xususiyati - bu bozorda sotiladigan mahsulotning ta'rifi. Plaginni o'rnatgandan so'ng, har bir element yonida havola paydo bo'ladi "Glws -da ko'rish", bosish orqali siz boshqa parametrlar qatorida parametr ko'rsatiladigan sahifaga o'tasiz "WEAR_FLOAT".

Float, shuningdek, teri sotish saytlarida sukut bo'yicha yoqilgan. Kabi Opskins.com.

Float -ni ko'rishdan tashqari, men sizga hali ham o'yindagi yoki metjm.net veb -saytidagi har bir elementni alohida ko'rishni maslahat beraman.

Maqolani o'qiganingiz uchun tashakkur. Umid qilamanki, u sizga yordam berdi. Agar shunday bo'lsa, men havola orqali xayriya sifatida har qanday iste'mol tovarlaridan xursand bo'laman. Rahmat.