شکاف یا شکاف است?

دیجیتال اقیانوس محصولات ابری را برای هر مرحله از سفر شما فراهم می کند. با 200 دلار اعتبار رایگان شروع کنید!

ویژگی شکاف در سی اس اس مختصر برای ردیف شکاف و ستون شکاف است, مشخص کردن اندازه ناودان, که فضای بین سطر و ستون در شبکه است, انعطاف پذیری, و طرح بندی چند ستون.

با استفاده از نوار لغزنده در نسخه ی نمایشی زیر برای دیدن ویژگی شکاف در عمل:

شکاف یک یا دو مقدار را می پذیرد:

• یک مقدار واحد هر دو فاصله ردیف و شکاف ستون را با یک مقدار تنظیم می کند.
• هنگامی که دو مقدار استفاده می شود, اولین مجموعه ردیف-شکاف و دوم مجموعه ستون-شکاف .

مشخصات ماژول چیدمان شبکه سی اس اس فضای بین مسیرهای شبکه را با استفاده از ویژگی شکاف شبکه تعریف می کند. گپ قصد دارد جایگزین گپ شود تا بتوان شکافها را در روشهای چیدمان سی اس اس چندگانه تعریف کرد, مانند فلکسباکس, اما گرید گپ هنوز هم باید در مواردی استفاده شود که یک مرورگر ممکن است گرید گپ را پیاده سازی کرده باشد اما هنوز شروع به پشتیبانی از ویژگی جدیدتر گپ نکرده است.

شکاف مقادیر زیر را می پذیرد:

• عادی: (پیش فرض) مرورگر یک مقدار استفاده شده از 1 را برای طرح بندی چند ستونی و 0 پیکسل را برای سایر زمینه های طرح بندی (یعنی شبکه و فلکس) مشخص می کند.
• : هر طول سی اس اس معتبر و غیر منفی, مانند پیکسل , اونا , رم و%, درمیان دیگران.
• : اندازه شکاف به عنوان یک مقدار درصد غیر منفی نسبت به بعد عنصر. (برای اطلاعات بیشتر به زیر مراجعه کنید.)
• اولیه: تنظیمات پیش فرض ملک را اعمال می کند که طبیعی است .
• وراثت: مقدار شکاف والدین را تصویب می کند.
• تنظیم نشده: شکاف فعلی را از عنصر حذف می کند.

درصد در خواص شکاف

هنگامی که به اندازه یک ظرف در بعد شکاف قطعی است, شکاف برطرف درصد در برابر اندازه جعبه محتوای ظرف در هر نوع طرح.

به عبارت دیگر وقتی مرورگر اندازه ظرف را بداند می تواند مقدار درصد شکاف را محاسبه کند . مثلا, زمانی که ارتفاع ظرف است 100پیکسل و شکاف تنظیم شده است 10%, مرورگر می داند که 10% از 100پیکسل است 10پیکسل.

اما زمانی که مرورگر نمی داند اندازه, تعجب خواهد کرد, " 10% از چه?"در این موارد, شکاف رفتار متفاوت در نوع طرح بر اساس.

در یک طرح شبکه, درصد حل و فصل در برابر صفر برای تعیین سهم اندازه ذاتی, اما حل و فصل در برابر جعبه محتوای عنصر هنگام تخمگذار از محتویات جعبه, به این معنی که فضای بین اقلام قرار داده اما فضای اندازه ظرف را تحت تاثیر قرار نمی.

در این نسخه ی نمایشی ارتفاع ظرف مشخص نیست. ببینید وقتی اندازه شکاف را افزایش می دهید چه اتفاقی می افتد. سپس شکاف را در واحدهای پیکسل تنظیم کنید و دوباره امتحان کنید:

در یک طرح فلکس, درصد در برابر صفر حل و فصل در تمام موارد, به این معنی که شکاف نمی خواهد اعمال می شود زمانی که به اندازه ظرف است به مرورگر شناخته شده نیست:

با استفاده از کالک() تابع با شکاف

برای تعیین اندازه شکاف می توانید از تابع کالک() استفاده کنید اما در زمان نگارش این مقاله هیچ پشتیبانی در سافاری و ایوس وجود ندارد.

ویژگی شکاف برای استفاده در شبکه طراحی شده, انعطاف پذیری و چند ستون پوسته. بیایید چند نمونه را بررسی کنیم.

در نسخه ی نمایشی زیر, شما می توانید ببینید شکاف استفاده می شود برای مشخص کردن خواص ردیف شکاف و ستون شکاف در یک ظرف شبکه, تعریف ناودان بین ردیف شبکه و ستون شبکه, به ترتیب:

اعمال شکاف به محور اصلی یک ظرف فلکس نشان می دهد فاصله بین اقلام فلکس در یک خط از طرح فلکس.

در اینجا شکاف ستون در جهت ردیف استفاده می شود:

در اینجا ردیف شکاف مورد استفاده در جهت ستون:

اعمال شکاف در محور متقاطع یک ظرف فلکس نشان دهنده فاصله بین خطوط فلکس طرح فلکس است.

در اینجا فاصله ردیف در جهت ردیف وجود دارد:

در اینجا شکاف ستون در جهت ستون وجود دارد:

ستون-شکاف در طرح بندی چند ستون به نظر می رسد برای ایجاد شکاف بین جعبه ستون, اما توجه داشته باشید که ردیف-شکاف هیچ تاثیری از ما تنها در ستون کار. شکاف هنوز هم می تواند در این زمینه استفاده می شود, اما تنها ستون-شکاف اعمال خواهد شد.

همانطور که شما می توانید در نسخه ی نمایشی بعدی را ببینید, اگر چه اموال شکاف دارای ارزش 2رام, این تنها موارد جدا به صورت افقی به جای هر دو جهت از ما در حال کار در ستون:

هرچه بیشتر بدانید…

یک زن و شوهر از چیزهایی که شایان ذکر است در مورد کار با اموال شکاف وجود دارد.

این یک روش خوب برای جلوگیری از فاصله ناخواسته است

شما تا کنون حاشیه برای ایجاد فاصله بین عناصر استفاده می شود? اگر ما مراقب باشید, ما می توانیم تا پایان با فاصله اضافی قبل و بعد از گروه از اقلام.

حل این مشکل معمولا مستلزم افزودن حاشیه منفی یا توسل به شبه انتخابگرها برای حذف حاشیه از موارد خاص است. اما نکته خوب در مورد استفاده از شکاف در روش های طرح بندی مدرن تر این است که شما فقط بین موارد فاصله دارید. کاردستی اضافی در شروع و پایان هرگز مشکلی نیست!

ولی, هی, اگر شما می خواهید به فضای اطراف اقلام در حالی که با استفاده از شکاف, قرار دادن بالشتک در اطراف ظرف مثل این:

اندازه ناودان همیشه برابر با مقدار شکاف نیست

ویژگی شکاف تنها چیزی نیست که می تواند فضای بین اقلام را قرار دهد. حاشیه, بالشتک, توجیه-محتوا و چین-محتوا همچنین می توانید به اندازه قطره قطره شدن را افزایش می دهد و ارزش شکاف واقعی را تحت تاثیر قرار.

در مثال زیر, ما در حال تنظیم یک شکاف 1م اما, همانطور که می بینید, فضای بسیار بیشتری بین موارد وجود دارد, ناشی از استفاده از صف توزیع, مانند توجیه-محتوا و چین-محتوا :

نمایش داده شد از ویژگی های معمولا یک راه خوب برای بررسی اگر یک مرورگر پشتیبانی از یک ویژگی خاص, اما در این مورد, اگر شما برای اموال شکاف در فلکسباکس را بررسی کنید, شما ممکن است یک مثبت کاذب به دلیل یک پرس و جو ویژگی نمی خواهد بین حالت های طرح تشخیص. به عبارت دیگر, ممکن است در یک طرح انعطاف پذیر پشتیبانی شود که منجر به نتیجه مثبت می شود, اما اگر در یک طرح شبکه استفاده شود در واقع پشتیبانی نمی شود.

طرح شبکه با کالک () ارزش

طرح شبکه با مقدار درصد

مشخصات استفاده از شکاف با فلکسباکس در حال حاضر در وضعیت پیش نویس کار است.

این داده های پشتیبانی مرورگر از کانیوز است که جزییات بیشتری دارد. تعداد نشان می دهد که مرورگر پشتیبانی از ویژگی های که نسخه و تا.