کلاس این هفته با یک جلسه تجدید نظر آغاز شد. من نکات کلیدی را در اینجا خلاصه کردم. توصیه می کنم خلاصه را در صورتی که چنین نکرده اید ، بررسی کنید. اکنون ، همانطور که توسط مربی ما بحث شده است ، بیایید به طرح شبکه برویم.
طرح شبکه CSS
چیدمان شبکه CSS یک سیستم طرح ریزی دو بعدی قدرتمند است که ایجاد طرح های وب پیچیده و پاسخگو را ساده می کند. این امکان را به شما می دهد تا عناصر را در ردیف ها و ستون هایی با حداقل کد ترتیب دهید.
-
ظرف شبکه: عنصر والدین که وسایل شبکه را در خود جای داده است. شما با تنظیم ویژگی صفحه نمایش آن روی شبکه یا شبکه درون خطی یک ظرف شبکه ایجاد می کنید.
-
تعریف ردیف ها و ستون ها: برای تعریف ساختار شبکه از ردیف های شبکه و ستون های شبکه استفاده کنید. این خصوصیات تعداد و اندازه ردیف ها و ستون ها را تعیین می کنند.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
grid-template-rows: auto auto; /* Two rows with automatic height */
}
-
قرار دادن موارد شبکه: قرار دادن موارد را با استفاده از خواص-ستون و شبکه-ردیف کنترل کنید. به طور پیش فرض ، موارد به ترتیب ظاهر شده در HTML قرار می گیرند.
-
شکاف های شبکه: با استفاده از شبکه شبکه ، ردیف و شکاف ستون فاصله بین وسایل شبکه ایجاد کنید.
.grid-container {
grid-gap: 10px; /* Adds 10px gap between rows and columns */
}
- مناطق شبکه: بخش های خاصی از شبکه را با استفاده از محیط های شبکه ای-منطقه ای نامگذاری کنید و مواردی را در آن مناطق با استفاده از منطقه شبکه قرار دهید.
.grid-container {
grid-template-areas:
'header header header'
'sidebar main main'
'footer footer footer';
}
.header {
grid-area: header;
}
- طراحی پاسخگو: به راحتی طرح های پاسخگو را با کارکردهایی مانند تکرار () و minmax () ایجاد کنید تا شبکه را بر اساس فضای موجود تنظیم کنید.
.grid-container {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
}
شبکه CSS طرح های پیچیده را ساده می کند و قابلیت های طراحی پاسخگو را تقویت می کند.
چیدمان موقعیتی
طرح بندی موقعیتی راهی برای کنترل دقیق قرار دادن عناصر ارائه می دهد و به آنها امکان همپوشانی و جدا شدن از جریان استاندارد می دهد. بر خلاف طرح جریان ، که مانع از اشغال عناصر در همان فضا می شود ، طرح بندی موقعیتی آزادی بیشتری را در موقعیت عناصر فراهم می کند.
برای اجرای طرح موقعیت یابی ، شما از ویژگی موقعیت با یکی از مقادیر زیر استفاده می کنید:
- نسبی: عنصر را نسبت به موقعیت عادی خود در جریان سند قرار می دهد. استفاده از بالا ، راست ، پایین و چپ موقعیت خود را بدون تأثیر در چیدمان عناصر دیگر تنظیم می کند.
.element {
position: relative;
top: 20px; /* Moves the element 20px down from its original position */
}
-
مطلق: این عنصر را نسبت به نزدیکترین اجداد قرار داده شده خود قرار می دهد (یک جد با مقدار موقعیتی غیر از استاتیک). اگر چنین اجدادی وجود نداشته باشد ، نسبت به بلوک حاوی اولیه قرار می گیرد (
element).
.element {
position: absolute;
top: 50px;
left: 100px; /* Positions the element 50px from the top and 100px from the left of its positioned ancestor */
}
- ثابت: عنصر را نسبت به نمای Viewport قرار می دهد ، به این معنی که حتی در هنگام پیمایش صفحه در همان مکان باقی می ماند.
.element {
position: fixed;
top: 0;
left: 0; /* Fixes the element to the top-left corner of the viewport */
}
- چسبناک: عنصر را بر اساس موقعیت پیمایش کاربر قرار می دهد. مانند نسبی رفتار می کند تا اینکه عنصر از یک آستانه مشخص عبور کند ، در این مرحله ثابت می شود.
.element {
position: sticky;
top: 0; /* Sticks the element to the top of the viewport when the user scrolls past it */
}
ویژگی موقعیت را با بالا ، راست ، پایین و سمت چپ ترکیب کنید تا مکان دقیق عنصر موجود در بلوک حاوی آن مشخص شود و طرح های پیچیده و دقیق را فعال کنید.
موقعیت یابی لنگرگاه
موقعیت یابی لنگر شما را قادر می سازد عناصر را نسبت به مکان عنصر دیگر در صفحه قرار دهید. با استفاده از ویژگی لنگر در HTML ، می توانید یک عنصر را به عنوان یک لنگر اعلام کرده و به آن نام دهید. این به شما امکان می دهد عناصر دیگر را در بالا ، راست ، پایین یا چپ (یا معادل های منطقی آنها) از عنصر لنگر قرار دهید.
این روش همچنین در صورت وجود فضای کافی برای لنگر انداختن عنصر در موقعیت مورد نظر ، شامل یک مکانیزم برگشتی است. موقعیت یابی لنگر طراحی طرح را ساده می کند و می تواند نیاز به تکنیک هایی مانند UI Float را از بین ببرد و یک رویکرد ساده تر و انعطاف پذیر برای قرار دادن عناصر ارائه دهد.
به عنوان مثال:
This is the anchor element
This element is positioned below the anchor element.
در این مثال ، DIV دوم مستقیماً در زیر عنصر با ویژگی لنگر تنظیم شده به “My-Anchor” قرار می گیرد. اگر فضای کافی در زیر لنگر وجود نداشته باشد ، می توان موقعیت بازگشت را مشخص کرد.
زمینه انباشت و Z-Index
در CSS ، ترتیب انباشت عناصر تعیین می کند که کدام عناصر در بالای دیگران ظاهر می شوند ، دقیقاً مانند جمع کردن ورق های شفاف. ترتیب انباشت طبیعی از نظم و عناصر در HTML ظاهر می شود و عناصر بعدی در بالا ظاهر می شوند. با این حال ، شما می توانید با استفاده از این سفارش کنترل کنید z-index و زمینه های انباشته
-
ترتیب انباشت طبیعی: عناصر به ترتیب ظاهر شده در HTML جمع می شوند.
-
Z-Index: به شما امکان می دهد ترتیب انباشته عناصر موقعیت یابی را مشخص کنید (عناصری با مقدار موقعیت غیر از استاتیک). بالاتر
z-indexمقادیر عناصر را به جلو می آورند.
.element {
position: relative; /* Or absolute, fixed, sticky */
z-index: 10; /* Higher z-index brings this element to the front */
}
توجه: Z-Index فقط روی عناصر موقعیت یابی کار می کند ، به جز کودکان فلکس ، که می تواند از Z-Index حتی در صورت عدم موقعیت استفاده کند.
- زمینه انباشت: مفهوم سازی سه بعدی عناصر HTML در امتداد یک محور z خیالی نسبت به کاربر. عناصر کودک در یک بستر انباشت مطابق با همان قوانین جمع می شوند ، اما متن به عنوان یک کل به عنوان یک واحد در زمینه انباشت والدین رفتار می شود.
ایجاد زمینه های انباشته
-
به یک عنصر a
z-indexو هرpositionارزش جزءstaticبشر -
تنظیم کردن
opacityبه کمتر از1بشر -
استفاده کردن
transformsباfilters، یاclip-pathبشر -
استفاده کردن
isolation: isolateبشر
.container {
position: relative;
z-index: 1; /* Creates a stacking context */
}
.element {
position: absolute;
z-index: 2; /* Stacks within the container's stacking context */
}
درک زمینه های انباشت و شاخص Z برای کنترل لایه بندی بصری عناصر و ایجاد طرح های پیشرفته بسیار مهم است.
-
استثنا Flex و Grid: کودکان از ظروف فلکس و شبکه می توانند از آن استفاده کنند
z-indexحتی اگر آنها به صراحت در موقعیتی قرار نگیرند (یعنی آنهاpositionخاصیت تنظیم شده استstatic). این یک استثنا برای قاعده کلی است کهz-indexفقط در مورد عناصر موقعیتی اعمال می شود.
.flex-container {
display: flex;
}
.flex-item {
z-index: 1; /* Works even without position: relative/absolute/fixed/sticky */
}
-
خاصیت انزوا: خاصیت جداسازی می تواند بدون تغییر موقعیت عنصر یا یک زمینه انباشت جدید ایجاد کند
z-indexبشر تنظیم انزوا: جدا کردن روی یک عنصر آن را مجبور می کند تا یک زمینه انباشت جدید ایجاد کند.
.element {
isolation: isolate; /* Creates a new stacking context */
}
این امر به ویژه هنگامی مفید است که می خواهید ترتیب انباشت فرزندان یک عنصر را بدون تأثیرگذاری بر موقعیت آن یا معرفی عوارض جانبی ناخواسته از سایر خصوصیات ، محصور کنید.
اشکال زدایی زمینه های انباشته
اشکال زدایی مسائل مربوط به زمینه انباشت می تواند مشکل باشد ، اما چندین ابزار و تکنیک می توانند کمک کنند:
-
ابزارهای مرورگر DEV: برخی از مرورگرها ، مانند Microsoft Edge ، نمای سه بعدی از زمینه های انباشت را ارائه می دهند و به شما امکان می دهند نحوه لایه بندی عناصر را تجسم کنید.
-
OffseParent: این خاصیت JavaScript می تواند به شناسایی نزدیکترین اجداد موقعیتی یک عنصر کمک کند ، که برای درک زمینه ای که در آن مفید است مفید است
z-indexاعمال می شود
const element = document.getElementById('myElement');
const offsetParent = element.offsetParent;
console.log(offsetParent); // Returns the nearest positioned ancestor
-
پسوندهای VSCODE: برخی از برنامه های افزودنی VSCode هنگام ایجاد زمینه های انباشت در پرونده های CSS برجسته می شوند و شناسایی مکان های جدید را آسان تر می کنند.
-
پسوندهای مرورگر: برنامه های افزودنی برای Chrome و Firefox در دسترس است که اطلاعات مربوط به متن Z-Index و انباشت را مستقیماً به ابزارهای توسعه دهنده اضافه می کند و بینش هایی در مورد نحوه جمع آوری عناصر ارائه می دهد.
با استفاده از این ابزارها ، می توانید به طور موثرتری مسائل مربوط به زمینه های انباشت را تشخیص داده و برطرف کنید z-index در چیدمان CSS شما.
سرریز
ویژگی CSS Overflow CSS کنترل می کند که چگونه محتوا هنگام فراتر از مرزهای عنصر حاوی آن نمایش داده می شود. به طور پیش فرض ، مقدار آن قابل مشاهده است ، به این معنی که محتوا به سادگی در خارج از جعبه عنصر سرریز می شود.
سرریز یک ملک کوتاه برای overflow-x (سرریز افقی) و overflow-y (سرریز عمودی).
در اینجا مقادیر کلمات کلیدی کلیدی وجود دارد:
-
overflow: auto;: اگر محتوا سرریز شود ، کابوس های پیمایشی نمایش داده می شوند تا کاربران بتوانند محتوای پنهان را پیمایش و مشاهده کنند. اگر محتوا سرریز نشود ، هیچ گونه پیمایشی نشان داده نمی شود. -
overflow: hidden;: هر محتوایی که بیش از مرزهای عنصر باشد ، قطع می شود (پنهان). -
overflow: scroll;: بدون توجه به اینکه محتوا سرریز می شود یا نه ، کچل ها همیشه نمایش داده می شوند. این می تواند برای حفظ طرح مداوم مفید باشد ، اما اگر در صورت عدم نیاز قابل مشاهده باشد ، ممکن است ایده آل نباشد. -
overflow: visible;: (پیش فرض) محتوا جعبه عنصر را سرریز می کند. -
overflow: clip;: شبیه به پنهان ، محتوا را کلی می کند. علاوه بر این ، کلیپ از تمام پیمایش ها ، از جمله پیمایش برنامه ای جلوگیری می کند.
مثال:
.container {
width: 200px;
height: 100px;
overflow: auto; /* Adds scrollbars if content exceeds the container's size */
}
در این مثال ، اگر محتوای داخل باشد .container بیش از 200px از عرض یا 100px از ارتفاع ، به نظر می رسد که Scrollbars به کاربران امکان می دهد تا محتوای پنهان را پیمایش و مشاهده کنند.
ظروف پیمایش
هنگامی که ویژگی Overflow را روی پیمایش ، پنهان یا خودکار روی یک عنصر تنظیم می کنید ، یک ظرف پیمایش ایجاد می کنید. یک کانتینر پیمایش سرریز را در هر دو افقی انجام می دهد (overflow-x) و عمودی (overflow-y) دستورالعمل ها.
یک ظرف پیمایش را به عنوان “جعبه بزرگ جادویی” با مرزهای تعریف شده فکر کنید. عناصر موجود در داخل ظرف “به دام افتاده” در آن “به دام افتاده اند و مانع از سرریز شدن آنها در فراتر از گوشه های ظرف می شوند. می توانید برای مشاهده قسمت های مختلف محتوا پیمایش کنید ، اما محتوا به طور مرتب در ابعاد ثابت ظرف پیمایش موجود است.
در اصل ، یک کانتینر پیمایش به عنوان یک پورتال به یک فضای محدود عمل می کند ، و اطمینان می دهد که محتوا در مرزهای مشخص شده باقی می ماند و در صورت فراتر از آن مرزها از طریق پیمایش قابل دسترسی است.
مثال:
.scroll-container {
width: 300px;
height: 200px;
overflow: auto; /* Creates a scroll container */
}
در این حالت ، .scroll-container به یک ظرف پیمایش تبدیل می شود و هر محتوایی که از عرض 300px یا 200px از ارتفاع فراتر رود ، در مرزهای ظرف قابل پیمایش خواهد بود.
با تشکر از شما برای حمایت شما در طول این سفر ، شور و شوق شما واقعاً انگیزه دارد! من شما را تشویق می کنم تا به کاوش در مفاهیمی که ما پوشش داده ایم ادامه دهید. به یاد داشته باشید ، عمل مداوم برای پیشرفت مهارت ضروری است ، بنابراین به آزمایش و پالایش توانایی های خود ادامه دهید.
من دوست دارم افکار و بازخورد شما را بشنوم ، بنابراین لطفاً برای شروع مکالمه نظر خود را در زیر بگذارید.
من Ikoh Sylva هستم ، یک علاقه مندان به محاسبات ابری با چندین ماه تجربه AWS دست در دست. من سفر ابر خود را از دیدگاه مبتدی مستند می کنم. اگر این موضوع با شما طنین انداز است ، لطفاً پست های من را دوست داشته و دنبال کنید و این مقاله را با دیگران که سفرهای ابر خود را شروع می کنند ، به اشتراک بگذارید. بیایید با هم یاد بگیریم و رشد کنیم!
در ارتباط با من در رسانه های اجتماعی نیز احساس راحتی کنید!
LinkedIn Facebook x
