CSS فلوٹ: وضاحت، خواص

فلوٹ - بنیادی زبان کے افعال میں سے ایک (سٹائل شیٹس جھرن کاری کر رہے ہیں CSS - فارمیٹنگ جھرن کاری). یہ زبان 1996 کے بعد سے موجود ہے اور اب بھی تیار کرنے کے لئے جاری رکھے ہوئے ہے. اس وقت، ڈویلپرز CSS کے تیسرے ورژن استعمال کیا ہے. CSS پروگرامنگ زبان کے ساتھ یہ آپ کو جاوا اسکرپٹ کا استعمال نہیں کیا یہاں تک کہ اگر، صارف کے لئے پرانے یا غیر آرام دہ نظر نہیں آئے گا کہ ایک خوبصورت اور منباون سائٹ بنانے کے لئے ممکن ہے. اجازت نامہ کے تیسرے ورژن کی جدید امکانات.

اس کے علاوہ، ڈویلپرز کو سب سے پہلے اس طرح کی Flexbox یا سائٹ پر جگہ کے عنصر کو تبدیل کرنے کی پوزیشن کے طور پر زیادہ آسان فارمیٹنگ کے اختیارات،، لیکن پہلی چیزیں استعمال کر سکتے ہیں. سمجھنے کے لئے فوائد اور نقصانات کے خواص فلوٹ شروع کرنے کے لئے.

CSS فلوٹ - یہ کیوں ضروری ہے؟

فلوٹ - پوزیشننگ عناصر کے لئے جائیداد. ہر روز، یہ تصاویر اور متن ہے، جس میں بہت صفائی کے ساتھ کے ارد گرد ان کے wraps کو دیکھ کر، اخبارات اور میگزین کے صفحات پر دیکھا جا سکتا ہے. и CSS при использовании функции Float должно произойти то же самое. فلوٹ تقریب کا استعمال کرتے ہوئے ایک ہی ہونا چاہئے کی طرف سے ایچ ٹی ایم ایل اور سی ایس ایس کے کوڈ کا دنیا میں. لیکن یہ یاد ہے کہ تصویر میں ترمیم ہمیشہ اس تقریب کا بنیادی مقصد نہیں ہے کے قابل ہے. اس سے دو، تین، چار کالموں میں ویب سائٹ کے عناصر کی مقبول مقام کا پیدا کرنے کے لئے استعمال کیا جا سکتا ہے. اصل میں، فلوٹ CSS جائیداد عملی طور پر کسی بھی HTML عنصر کے لئے استعمال کیا جاتا ہے. پراپرٹی فلوٹ تقریب کا استعمال کرتے ہوئے ترتیب عناصر میں ترمیم کرتے ہیں، اور پھر، ویب سائٹ کے کسی بھی ڈیزائن تخلیق کرنے کی بنیادی باتیں جاننے والا مشکل نہیں ہو گا.

خصوصی DTP پروگراموں کبھی کبھی تصاویر کو نظر انداز کر سکتے ہیں، اور ان پر جانے کے لئے. بس بہت ہو گیا اسی طرح کی چیزیں اس کے آگے یا اس کے تحت ہونے اور تصویر پر متن میں سے صرف روشنی کی بجائے چڑھنے کے لئے ویب ڈیزائن، (غلط طریقے خواص فلوٹ استعمال کیا تو) ظاہر کیا جاتا ہے، لیکن ہمیشہ نہیں ہے جہاں آپ کو ایک ڈویلپر کی ضرورت ہے.

جائیداد کی سی ایس ایس فلوٹ وضاحت

اصل میں، فلوٹ جائیداد استعمال کرنے کی صلاحیت کسی بھی ویب ڈیزائنر کے لئے چھید میں ایک بہت اچھا اککا ہے. لیکن، بدقسمتی سے، یہ کس طرح کام کرتا تفہیم کی کمی collisions اور اس قسم کی سائٹ غموں کے دیگر عناصر کی قیادت کر سکتے. اس سے قبل بھی اس طرح کے حالات کی وجہ سے براؤزر میں کیڑے کے پائے جاتے ہیں. اب مناسب طریقے سے فلوٹ جائیداد کا استعمال کس طرح کا راز کھول دیا جائے گا، اور اس کے ساتھ کوئی مسئلہ زیادہ نہیں ہونا چاہئے.

ہم فلوٹ جائیداد چار اقدار ہیں:

• فلوٹ: وارث؛
• فلوٹ: حق؛
• فلوٹ: بائیں؛
• فلوٹ: کوئی نہیں؛

انگریزی جانتے ہیں جو ان لوگوں کے لئے، پیرامیٹر اقدار فلوٹ جائیداد واضح ہونا ضروری ہے. لیکن وہ لوگ جو نہیں جانتے کے لئے، آپ کو ایک چھوٹی سی وضاحت کر سکتے ہیں. پیرامیٹر: بائیں؛ اس سے والدین عنصر کے سب سے زیادہ انتہائی بائیں کونے میں عنصر جسم چلتا ہے. ایک ہی چیز ہوتا (صرف دوسرے طریقے سے) جب bcgjkmpjdfybb پیرامیٹر: حق؛ . قدر: وارث؛ والدین کے طور پر ایک ہی ترتیب کے فرض کرنے عنصر حکم. جیسا کہ وہ والدین کے HTML میں کوڈ کے اندر اندر براہ راست واقع ہیں اس طرح عناصر، اب بھی کہا جاتا ہے بچہ. ایک جائیداد: کوئی نہیں؛ یہ عنصر جس کوڈ کے تمام حصوں کے لئے پہلے سے طے شدہ کی طرف سے مقرر کیا جاتا ہے دستاویز، کے معمول کے بہاؤ میں خلل ڈالنے نہیں کرنے دیتی ہے.

کس طرح کام فلوٹ کرنے کے لئے؟

فلوٹ CSS جائیداد کافی صرف کام کرتا ہے. اوپر بیان کیا گیا ہے کہ تمام، زیادہ مشکل کے بغیر کیا جا سکتا ہے. اس کے بعد، سب کچھ صرف کے طور پر آسان ہو جائے گا. لیکن میں فلوٹ کی خصوصیات کا مطالعہ جاری رکھنے سے پہلے، اصول میں ایک چھوٹی سی نظر قابل. ہر ویب سائٹ بلاک کا ایک عنصر ہے. اس کو دبانے کے لئے Ctrl + شفٹ + J. متن، عنوان، تصویر، لنکس کے ذریعے گوگل کروم میں کنسول کھول کر اس کو دیکھنے کے لئے آسان ہے، اور ویب سائٹ کے دیگر تمام اجزاء بلاکس، صرف مختلف سائز دکھایا جائے گا. ابتدائی طور پر، ان تمام بلاکس ایک دوسرے کی پیروی کر رہے ہیں. ذیل کی مثال میں دکھایا گیا ہے، کوڈ سٹرنگ ایک کے بعد ایک جانا، اور تاکہ وہ سختی دوسرے کے پیچھے سے ایک ہونا ظاہر.

یہ ایک عام بہاؤ (معمول کے بہاؤ) کہا جاتا ہے. ایسے تمام بلاکس کو عمودی (عناصر کو پار بغیر جسم) ایک دوسرے کے اندر اندر گر ہو. ابتدائی طور پر، ویب کے صفحات کو اس طرح سے واقع کے تمام مندرجات. تاہم، کا استعمال کرتے ہوئے جب، مثال کے طور پر سی ایس ایس کی خصوصیات بائیں بازو کی زبان عنصر صفحہ اور بائیں کرنے کے لئے اقدامات پر اس کے قدرتی پوزیشن چھوڑ دیتا تیرنے لگتے ہیں. یہ رویے ان عناصر عام حالات میں رہ رہے ہیں اس کے ساتھ ناگزیر تصادم کی طرف جاتا ہے.

دوسرے الفاظ میں، عناصر بجائے عمودی پوزیشن میں ہیں، اب ایک دوسرے سے متصل ہیں. تا کہ اس کے اندر دو بچوں کو ایڈجسٹ کر سکتے والدین عنصر کافی جگہ ہے، تو تصادم نہیں ہوتی ہے، لیکن اگر نہیں، دوسرے ایک اعتراض کا نفاذ ناگزیر ہے. اس فلوٹ CSS کی خصوصیات میں سمجھنے کے لئے یاد کرنے کے لئے بہت اہم ہے.

مسائل کو حل کرنے کے لئے واضح تقریب

صاف - ہم نے ایک دل ہر ایک کی خصوصیات تیرنے لگتے ہیں. ساتھ مل کر وہ - پانی گر نہیں ہے. ان خصوصیات میں سے دونوں ایک دوسرے کی تکمیل اور ڈویلپر خوش کر دے. جیسا کہ اوپر بیان، ہمسایہ خلیات ان کے عام نصاب سے باہر جانے اور بھی ہے جس فلوٹ جائیداد استعمال کیا گیا تھا کرنے عنصر (مثلا، CSS فلوٹ اوپر) کے طور پر "فلوٹ" کرنے کے لئے شروع. اس کے نتیجے کے طور پر، اس کے بجائے ایک تیرتے عنصر کی جگہ وہ ڈویلپر بندوبست کرنے کا ارادہ ہے جہاں میں دو ہو جاتا ہے، اور نہیں. اس لمحے سے صرف تمام مسائل شروع ہو رہا ہے.

واضح تقریب پانچ اقدار ہیں:

• : بائیں؛
• : حق؛
• : دونوں؛
• : وارث؛
• کوئی نہیں؛

یہ سب سے بہتر ہے جب واضح فنکشن استعمال پر قیاس کر ہم سمجھ سکتے ہیں. ہم کوڈ فلوٹ میں ایک لائن لکھی ہے تو: حق؛ (CSS کوڈ مراد ہے)، تقریب واضح ہونا ضروری ہے: حق؛ پتھروں اور کے اسی خواص فلوٹ: بائیں؛ یہ بات واضح کی تکمیل کریں گے: بائیں؛ . کوڈ واضح لکھنا کب: دونوں؛ یہ عنصر ہے جس کے لئے یہ درخواست دی ہے کہ باہر کر دیتا ہے، اس خصوصیت عناصر فلوٹ تقریب اطلاق ہوتا ہے جس کے لئے ذیل ہو جائے گا. کے وارث والدین عنصر سے ترتیبات لیتا ہے، لیکن کسی نے بھی اس ویب سائٹ کی ساخت میں کوئی تبدیلی نہیں کرتا. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. آپ کیسے فلوٹ اور صاف افعال، آپ اپنی نوعیت میں آپ کی ویب سائٹ کو منفرد بنا دیا جائے گا جس میں ایک منفرد اور غیر معمولی HTML اور CSS فلوٹ کوڈ، لکھ سکتے ہیں کو سمجھتے ہیں تو.

کالم پیدا کرنے کے فلوٹ کا استعمال کرتے ہوئے

سائٹ (یا ویب کے صفحے کے مرکز میں سی ایس ایس فلوٹ مواد کے مقام) پر کالم بناتے وقت خاص طور پر مفید خصوصیت تیرنے لگتے ہیں. یہ اس کوڈ سے زیادہ عملی اور آسان ہے ہے، لہذا آپ کو دو کالموں پر مشتمل معمول سائٹ سانچے بنانے کے لئے کئی اختیارات پر غور کرنا چاہئے. مثال کے طور پر، صحیح، ہیڈر اور فٹر کو بائیں نیویگیشن بار (نیویگیشن بار) پر موجود مواد کے ساتھ ایک معیاری ویب سائٹ لے. کوڈ اس طرح لگتا ہے:

اب ہم کو سمجھنے کے لئے یہاں کیا لکھا ہے ضرورت ہے. والدین عنصر ہے جس میں ایچ ٹی ایم ایل کوڈ کا اہم حصہ ایک کنٹینر (کنٹینر) کہا جاتا ہے. یہ آپ کو مختلف سمتوں میں بکھیر فلوٹ تقریب اطلاق ہوتا ہے جس کے عناصر، کو روکنے کے لئے اجازت دیتا ہے. یہ نہیں تھا، تو پھر ان عناصر براؤزر کی حدود تک پیش کر دیا ہے.

اس کے بعد، کوڈ میں اور # مواد #navigation جاؤ. ان عناصر فلوٹ تقریب سے استعمال کیا جاتا ہے. بائیں اور دائیں کرنے کے لئے بھیجا # مواد #navigation ہے. اس سے دو کالم کے ساتھ ایک ویب سائٹ بنانے کے لئے ضروری ہے. اشیاء ایک دوسرے سے متجاوز نہیں ہے تاکہ، چوڑائی کی وضاحت کرنا نہ بھولیں. آپ کی چوڑائی اور فی صد کی وضاحت کر سکتے ہیں. تو اس سے بھی زیادہ آرام دہ پکسلز کے مقابلے میں. مثال کے طور پر، 45٪ اور #navigation لئے # مواد، اور باقی 10٪ کے لئے 45٪ جائیداد مارجن دینے کے لئے.

صاف، #footer میں ہے، جس کی پراپرٹی فوٹر #navigation اور # مواد کی پیروی، لیکن جہاں وہ تھا ایک ہی جگہ پر اس کو چھوڑ دیتا ہے نہیں دیتا. کیا ہو سکتا ہے؟ آپ کو واضح جائیداد کی وضاحت نہیں کرتے تو؟ اس کوڈ #footer میں صرف اوپر اور #navigation تحت ہو گا. یہ ایک سے زائد عنصر کو ایڈجسٹ کرنے #navigation کافی جگہ اس حقیقت کی وجہ سے ایسا ہوتا ہے. اس توضیحی مثال میں یہ بات واضح کی خصوصیات فلوٹ اور ایک دوسرے کی تکمیل کس طرح سے واضح طور پر دکھائی دے رہا ہے.

مشکلات آپ کو کوڈ لکھنے جب سامنا ہو سکتا ہے

مندرجہ بالا مثالوں سادہ ہیں. لیکن ان کے ساتھ مسائل پیدا کر سکتا ہے. عام طور پر، حقیقت میں، غیر متوقع طور پر بہت تکلیف تقریب فلوٹ پر ہو سکتا ہے. کوئی بات نہیں کس طرح عجیب ہے، لیکن مسائل عام طور پر ایک ایچ ٹی ایم ایل کوڈ CSS کے ساتھ نہیں ہو جاتی ہیں، اور. محل وقوع ایک HTML کوڈ میں فلوٹ تقریب کے ساتھ عنصر کو براہ راست فائنل کے کام پر اثر انداز ہوتا ہے. پوزیشننگ عناصر فلوٹ پہلے کوڈ کا تقریب - مشکلات کے مختلف قسم سے بچنے کے لئے، یہ آسان شرائط پر قائم رہنے سے بہتر ہے. تقریبا ہمیشہ ہی یہ کام کرتا ہے اور ان کے غیر متوقع رویے کو کم سے کم کرنے کے لئے.

عناصر کے تصادم

والدین عنصر ایک سے زیادہ بچے پر مشتمل ہے جب ان سب کو ایڈجسٹ نہیں کر سکتے تصادم اس وقت ہوتی ہے، اور وہ ایک دوسرے سے متجاوز. یہ بھی ہوتا آئٹم ظاہر نہیں کر سکتے ہیں، اور ویب سائٹ سے غائب. یہ ایک مسئلے براؤزر نہیں ہے، اور یہ امید کی جاتی ہے اور فلوٹ تقریب کے ساتھ عناصر کی مناسب طرز عمل ہے.

ان عناصر عام حالات میں ابتدائی طور پر ہیں، اور پھر یہ ٹوٹ جاتا ہے فلوٹ جائیداد براؤزر سائٹ سے ان کو ختم کر سکتے ہیں اس حقیقت کی وجہ سے. لیکن حل آسان اور واضح ہے، کیونکہ مایوسی نہیں - Cear جائیداد کا استعمال. یہ ممکن ہے کہ اس مسئلہ سے باہر کے طریقوں میں سے ہے، واضح کے استعمال کی سب سے زیادہ مؤثر ہے.

لیکن ویب صفحہ عناصر کے تصادم کا مسئلہ ایک اور طریقے سے حل کیا جا سکتا ہے. کم از کم دو طریقے ہیں:

• تقریب کے استعمال پوزیشن؛
• درخواست Flexbox.

پوزیشن تقریب اکثر CSS فلوٹ کرنے کے لئے ایک اچھا متبادل ہے. درخواست پوزیشن کی صورت میں ویب پیج کے مرکز میں تصویر کی حیثیت سے بہتر ہے. مطلق اور: مناسب طریقے سے لاگو اقدار تو رشتہ دار، عناصر جگہ میں گر، اور ایک دوسرے سے متجاوز نہیں ہوں گے.

پوزیشن تجزیہ اور فلوٹ تقریب کوڈ

и CSS Float заменить на Position. اس مقام کی طرف سے تبدیل HTML میں راستہ اور CSS فلوٹ کے ساتھ زیادہ نمٹنا چاہیے. سچ تو یہ ہے کہ یہ بہت آسان ہے. فرض کریں کہ ایک عنصر #container اور #div ہے دو.

#container {

چوڑائی: 40٪؛

فلوٹ: بائیں؛

مارجن: 10px؛

}

#div {

چوڑائی: 40٪؛

فلوٹ: حق؛

مارجن: 10px؛

}

#footer {

واضح: دونوں؛

}

اس مثال میں، دوسرے کنٹینر میں افعال کے استعمال (CSS ڈویژن) فلوٹ دو کالموں کا ایک معیاری سائٹ بنانے کے لئے مدد ملے گی. کبھی واضح تقریب میں بھول جاؤ. بغیر یہ صرف ایک دوسرے کے اوپر عناصر اتبشایی گا.

لہذا اگر آپ کو سی ایس ایس کے کس طرح تبدیل اور postion استعمال کرنے کے لئے کوڈ کو فلوٹ کرتے ہیں؟ بہت آسان:

#container {

چوڑائی: 40٪؛

پوزیشن: رشتہ دار؛

مارجن: 10px؛

}

#div {

چوڑائی: 40٪؛

پوزیشن: رشتہ دار؛

مارجن: 10px؛

}

اس صورت #container #div میں اور والدین عنصر میں ڈویلپر کے لئے ضروری پوزیشن لے. اہم بات یہ ہے؟ #div ڈال دیا اور ایک والدین عنصر، ان کے سائز کے مطابق کیا جائے گا جس #container.

Flexbox - اس تقریب CSS فلوٹ جگہ لے لے گا؟

Flexbox - لمحے میں ویب سائٹس کو پیدا کرنے کے لئے سب سے زیادہ جدید طریقہ ہے، تو اس تقریب براؤزر کے پرانے ورژن کی طرف سے حمایت نہیں کر رہا ہے. یہ حقیقت براؤزر کے پرانے ورژن کے ساتھ صارفین کے لئے، رعایتی نہیں رکھا سائٹ کے درست ورژن کو دیکھنے کے لئے نہیں کر سکیں گے.

Flexbox ایک الگ ماڈیول کے طور پر ایک جائیداد، نہیں ہے. لہذا flexbox خصوصیات، صرف ان کے ساتھ کام کرتے ہیں جس کی ایک بڑی تعداد کی حمایت کرتا ہے. اس کے علاوہ، تین پیرامیٹرز ان لائن ہے جس کے ڈسپلے تقریب، flexbox میں بلاک اور ان لائن بلاک وہاں صرف ایک موڑنا بہاؤ ہے.

کس طرح Flexbox کرتا ہے؟

یہ ٹیکنالوجی کو آسانی افقی اور عمودی طور پر عناصر کی سیدھ میں ڈویلپر مدد ملتی ہے. Flexbox بھی سمت اور ڈسپلے عناصر کی ترتیب تبدیل کر سکتے ہیں. مین محور اور کراس محور، تعمیر پورے Flexbox جس کے ارد گرد: اس ٹیکنالوجی میں، دو محور موجود ہیں. یہ بھی اثر فلوٹ اور صاف افعال ہٹا دیتا ہے. انہوں نے کہا کہ کوڈ، ان کی جائیداد کے لئے ایک منفرد استعمال کرتا ہے جس میں ان کے نظام بناتا ہے، اس لئے، بدقسمتی سے، نہیں خلیات میں نقل تیار کرنے کے قابل ہو جیسے فلوٹ اور مقام کی دیگر خصوصیات. اور اس کے اوپر ذکر کیا ہے، Flexbox صرف براؤزر کے نئے ورژن میں کام کرتے ہیں، کیونکہ یہ بہت آسان ہو جائے گا.

یہ آخر مقام، Flexbox فلوٹ میں اس کو یاد رکھنے اور ایک ہی بات کر کے قابل ہے - آپ کی ویب سائٹ کی ایک غیر معمولی اور اصل ڈیزائن بنانے کے. مضمون میں بحث کے ہر ورژن کو اپنے طریقے سے یہ کرتا ہے اور، لہذا، فوائد اور نقصانات دونوں ہے. اس کے علاوہ، یہ کہیں کامل فلوٹ تقریب (مثال کے طور پر ایک سادہ ساخت کے ساتھ سائٹ پر)، لیکن کہیں بہتر پوزیشن یا Flexbox استعمال کرنے کے لئے کہ کیا ہوتا ہے.

ڈبل مارجن بگ

تاہم، بعض اوقات، بدقسمتی سے، ہر ڈویلپر مسائل نہیں لکھا کوڈ سے کیڑے کے ساتھ اور کچھ براؤزر مخصوص شکل میں پیدا ہوتی ہیں. مثال کے طور پر، انٹرنیٹ ایکسپلورر میں، وہاں جس میں ڈبل مارجن بگ کہا جاتا ہے ایک مسئلے سے، ہے. وہ براؤزر سرحد کی ویب سائٹ کے عناصر کی نقل مکانی کے نتیجے میں، دو کو مارجن پیرامیٹر بناتا ہے. اس سے بچنے کیلئے، یہ پیرامیٹر مارجن فی صد اس بات کی نشاندہی کرنے کے لئے کافی ہے. عام طور پر اس مسئلے سے جب اس وقت ہوتی Y اور خصوصیات مارجن فلوٹ نقطہ کی قدر.

#div {

فلوٹ: بائیں؛

مارجن سے بائیں: 10px؛

}

یہ کوڈ انٹرنیٹ ایکسپلورر 20 پکسلز بائیں سمت میں عنصر کو منتقل کریں گے. آپ کو مندرجہ ذیل کوڈ کو تبدیل کر سکتے ہیں:

#div {

فلوٹ: بائیں؛

مارجن بائیں: 10٪؛

}

یا اس کے

#div {

فلوٹ: بائیں؛

مارجن سے دائیں: 10px؛

}

ان اختیارات میں سے دونوں مکانی عناصر کے مسئلے کو حل کریں گے.

کیڑے براؤزر اور غلط ڈسپلے سائٹ

کیڑے ہو سکتا ہے کہ صرف براؤزر نہیں ہے - یہ یاد رکھنا کہ انٹرنیٹ ایکسپلورر کے قابل ہے. گوگل کروم اور موزیلا کے پرانے ورژن بھی غلط طریقے سے جدید ویب سائٹس میں سے کچھ عناصر کی نمائش. ان اصلاحات میں سے ہر ایک کے لئے، آپ ایک حل تلاش کر سکتے ہیں. عام طور پر، ہم نوٹ فلوٹ کے استعمال کو ایک اصل اور کشش ویب سائٹ کے ڈیزائن تخلیق کریں گے. اس پراپرٹی کی مبادیات اور اصولوں کو سمجھنا غلطیوں سے بچنے اور زندگی کے کسی بھی ڈویلپر کے لئے آسان بنانے میں مدد ملے گی.