,

,

,

... برچسب زدن
است که اغلب در طرح سایت های مدرن برای ایجاد شبکه استفاده می شود و به سادگی نوعی بلوک یا ظرف را نشان می دهد. قرار دادن برچسب های دیگر در آن مجاز است ، بنابراین برای همه عناصر بلوک امکان پذیر نیست
مناسب برای استفاده بلوک ها معمولاً روی هم قرار می گیرند و در عناصر خطی قرار ندارند. عناصر درون خطی HTML شامل متن هستند و برای سبک سازی آن از CSS استفاده می شود.
برای عرض محتوای معین ، کل عرض بلوک مجموع بالشتک ، حاشیه ، حاشیه و عرض چپ و راست است. در یک ارتفاع مشخص ، از بالشتک بالا و پایین ، حاشیه ، مرزها و ارتفاع. متن در عناصر بلوک به طور پیش فرض تراز شده است. اگر یکی از آنها شامل عناصر درون خطی همراه با عناصر بلوک باشد ، یک بلوک ناشناس در اطراف عناصر درون خطی ایجاد می شود. سبک پیش فرض روی آن اعمال می شود. همچنین سبک تعیین شده به والدین خود را به ارث می برد.
جریان سند
Flow به ترتیب نمایش عناصر صفحه گفته می شود ، همانطور که توسط خصوصیات مشخص شده در CSS تعیین می شود. در این حالت ، به طور پیش فرض ، بلوک ها از بالا به پایین قرار می گیرند و برچسب های درون خطی ، اگر فضای کافی نداشته باشد ، به خط جدیدو از بالا به پایین و از چپ به راست مرتب شده اند. موقعیت یک عنصر در صفحه به مکان آن در کد بستگی دارد: هرچه بالاتر باشد ، زودتر از قبل است. هر یک از عناصر بلوک مانند یک مستطیل به نظر می رسد که اجزای مجاور را از خود دور می کند. با استفاده از ویژگی های خاص می توانید این رفتار را تغییر دهید. تراز کردن بعضی از جعبه ها در CSS به مرکز یا کناره های یک ظرف ، موقعیت یابی نامیده می شود.
عناصر موقعیت یابی
موقعیت بلوک ها را می توان با استفاده از موقعیت یابی مطلق و نسبی کنترل کرد. موقعیت یابی برای قرار دادن بخشهای بزرگ در یک صفحه برای رابط های پیچیده ، پنجره های بازشو و عناصر تزئینی استفاده می شود. ویژگی اصلی مورد استفاده برای موقعیت یابی جعبه ها در CSS موقعیت است. این چهار ویژگی اصلی دارد:
• نسبت فامیلی؛
• مطلق؛
• درست شد؛
• ساکن
با کمک آنها ، می توانید حالت های طرح بندی را با تعیین یکی از چهار پارامتر بالا ، راست ، پایین یا چپ تغییر دهید. همچنین یک ویژگی برای سفارش لایه ها وجود دارد - z-index. موقعیت یابی با ویژگی استاتیک معمولاً استفاده نمی شود ، زیرا این نشان دهنده موقعیت پیش فرض بلوک ها است. بنابراین ، استفاده از هر پارامتر به هیچ وجه بر آن تأثیر نمی گذارد. سه ویژگی دیگر برای طرح استفاده می شود: نسبی ، مطلق ، ثابت.
موقعیت یابی نسبی
موقعیت نسبی جعبه ها در CSS ، یعنی موقعیت: ویژگی نسبی ، به این معنی است که عنصر می تواند جابجا شود و از موقعیت اصلی خود تغییر کند. چنین بلوکی هنوز در جریان باقی مانده است. در واقع ، نه خود او منتقل می شود ، بلکه نسخه اش است. مقادیر خاصیت را مشخص کنید تا مشخص شود بلاک چه مقدار به یک طرف یا آن طرف منتقل خواهد شد. آنها اغلب در پیکسل اندازه گیری می شوند. اما استفاده از واحدهای دیگر نیز مجاز است.

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

موقعیت یابی مطلق
موقعیت مطلق جعبه ها در CSS با مقدار مطلق ویژگی موقعیت تنظیم می شود. عنصری که کاملاً قرار گرفته باشد از جریان سند خارج می شود و بلوک های مجاور جای آن را می گیرند. عرض چنین عنصری بسته به محتوای آن کشیده شده است و می توانید با تنظیم مقادیر خاص برای خصوصیات بالا ، چپ ، راست ، پایین ، آن را تغییر دهید. موقعیت مطلق جعبه CSS برای عناوین مفید است. اما موقعیت: مطلق نه تنها برای عناصر بلوک ، بلکه برای عناصر درون خطی نیز کار می کند.
تراز کردن موارد به مرکز
یک عنصر کاملاً درون خطی قرار گرفته دقیقاً همانند یک عنصر درون خطی رفتار می کند. بنابراین ، استفاده از موقعیت یابی را می توان در CSS و متن کنترل کرد. برخی از ویژگی های جدید را می توان به آن اعمال کرد ، به عنوان مثال ، ارتفاع و عرض را تغییر دهید. CSS از ترکیبی از چندین ویژگی برای مرکزیت و هم ترازی عمودی استفاده می کند. تراز بندی عمودی ویژگی برتر را کنترل می کند. اگر می خواهید یک بلوک در CSS در مرکز خود قرار دهید ، ظرف اصلی باید نسبتاً قرار گرفته باشد و عنصر تراز شده کاملاً قرار گرفته باشد. ظرف باید سطح بالای 50٪ را تنظیم کند و برای انتقال عنصر به نصف ارتفاع خود ، از ویژگی ترجمه با مقدار "0 ، -50٪" استفاده کنید. عناصر کاملاً موقعیت دار را می توان در نوع جدیدی دسته بندی کرد زیرا خصوصیاتی روی آنها اعمال می شود که برای انواع دیگر موقعیت یابی در دسترس نیستند.

موقعیت یابی نسبت به گوشه بالا سمت چپ مرورگر
ویژگی های چپ ، بالا ، راست و پایین با عناصر کاملاً و نسبتاً موقعیت دار متفاوت کار می کنند. برای عناصر نسبی ، این خصوصیات میزان جابجایی را نسبت به محل قرارگیری عنصر تنظیم می کنند. فضای کاملا اشاعه یافته نسبت به یک سیستم مختصات خاص متصل به ابعاد پنجره مرورگر. گوشه های پنجره نقاط شروع این سیستم هستند. هنگام استفاده از خاصیت سمت چپ ، padding از سمت چپ مرورگر اندازه گیری می شود ، اما نوار پیمایش ظاهر نمی شود. خاصیت top وقتی کاملاً قرار بگیرد ، padding را از بالای مرورگر به بالای عنصری که به آن اعمال می شود ، تنظیم می کند. با ترکیب هر دو ویژگی می توان عنصر را نسبت به گوشه بالا سمت چپ مرورگر منتقل کرد.

موقعیت یابی نسبت به گوشه بالا سمت راست مرورگر
به همین ترتیب ، با استفاده از ویژگی های راست و بالا ، می توانید یک عنصر را در سمت راست پنجره مرورگر سنجاق کنید و موقعیت عمودی آن را تغییر دهید ، به سمت راست بروید گوشه بالا... اگر مقدار ویژگی صحیح منفی باشد ، بلوک به خارج از مرز پنجره منتقل می شود. پس از آن ، یک نوار پیمایشی ظاهر شود. از ویژگی پایین برای انتقال عنصر به پایین استفاده می شود. تورفتگی را از پایین پنجره مرورگر به پایین بلوک تنظیم می کند. اگر مقدار منفی باشد ، نوار پیمایش نیز ظاهر می شود ، زیرا عنصر از مرز پایین پنجره مرورگر منتقل می شود.
سیستم مختصات برای موقعیت یابی مطلق
به طور پیش فرض ، تمام عناصر با موقعیت مطلق در همان سیستم مختصات - پنجره مرورگر قرار می گیرند. اما می توان با تنظیم موقعیت نسبی روی هر عنصر والد ، آن را تغییر داد. سپس بلاک کودک بسته به والدین مکان خود را تغییر می دهد. اگر در میان عناصر اصلی چندین عنصر با موقعیت نسبی وجود داشته باشد ، شمارش از نزدیکترین یکی است. در این حالت ، موقعیت پیش فرض براساس آنچه در برچسب body مشخص شده است ، خواهد بود.

منشا یک عنصر کاملاً موقعیت دار
قبل از اینکه به عنصری موقعیت مطلق داده شود ، در بعضی از نقاط منشا ضمنی نامیده می شد. اگر هیچ خصوصیاتی برای چنین بلوکی تنظیم نشود ، تکان نمی خورد. با تنظیم ویژگی حاشیه می توانید آن را جابجا کنید. این همانند ویژگی های موقعیت یابی کار می کند. اگر مقدار ملک به جا مانده و بقیه را تعریف نکنید ، آنگاه برابر با خودکار خواهد بود. همچنین ، با استفاده از خودکار ، می توانید عناصر را به مکان اصلی خود بازگردانید.

موقعیت یابی ثابت
مقدار دیگر ثابت است. ویژگی موقعیت یک عنصر را در یک مکان خاص لنگر می اندازد. موقعیت یابی ثابت اغلب برای ایجاد منوها در CSS استفاده می شود. به نظر می رسد مطلق باشد ، اما قطعه ثابت از جریان خارج می شود. حتی وقتی صفحه پیمایش می شود ، چنین عنصری در جای خود باقی خواهد ماند ، بنابراین استفاده از آن برای ایجاد منوها در CSS راحت است. نقطه شروع در پنجره مرورگر لنگر خواهد شد. اگر چندین بلوک موقعیتی وجود داشته باشد ، از ویژگی z-index برای ترتیب آنها استفاده می شود. به شما امکان می دهد بلوک های نسبی را با دادن یک شاخص صحیح مناسب به بلوک های مطلق همپوشانی کنید. هرچه بزرگتر باشد ، بلوک بالاتر خواهد بود.
از نویسنده:با درود. موقعیت یابی عناصر css یک موضوع بسیار مهم در سایت سازی است. در این مقاله ، من پیشنهاد می کنم که با جزئیات بیشتر ، تمام راه های انتقال بلوک ها در صفحه وب را بررسی کنم.
انواع آن چیست
اگر درباره موقعیت یابی عناصر بلوک صحبت کنیم ، آنرا با استفاده از ویژگی موقعیت تنظیم می کنیم. چهار معنی دارد و هر یک جای تأمل جداگانه دارد.
موقعیت یابی مطلق
این اولین گونه شناخته شده است. این چنین تنظیم شده است: موقعیت: مطلق. پس از آن ، بلوک خواص معمول خود را از دست می دهد و کاملاً از جریان طبیعی خارج می شود. این جریان چیست؟ سعی کنید چندین عنصر بلوک را پشت سر هم در علامت گذاری قرار دهید. چگونه خواهند شد؟ یکی پس از دیگری ، و نه در غیر این صورت.
این رفتار طبیعی پیش فرض بلوک ها است. اما چه اتفاقی می افتد برای یک بلوک که موقعیت مطلق آن تعریف شده است؟ این کاملاً از جریان طبیعی خارج می شود ، بلاک های دیگر به راحتی متوجه آن نمی شوند ، مثل اینکه هرگز وجود نداشته است ، اما عنصر در صفحه باقی می ماند. موقعیت مطلق در css اغلب برای قرار دادن دقیق عناصر تزئینی ، آیکون ها و سایر موارد طراحی استفاده می شود.
اکنون می توان با استفاده از ویژگی های چپ ، راست ، بالا و پایین آن را جابجا کرد. به طور پیش فرض ، حرکت نسبت به لبه های پنجره مرورگر رخ می دهد ، اما اگر عنصر والد دارای موقعیت: نسبی باشد ، جبران نسبت به بلوک والد رخ می دهد.
بلوک (موقعیت: مطلق ؛ پایین: 0 ؛ راست: 0؛)
مسدود کردن ( موقعیت: مطلق؛ پایین: 0؛ راست: 0؛
عنصر به گوشه پایین سمت راست منتقل می شود. من متوجه می شوم که دکمه بالا اغلب به این روش انجام می شود - آنها فقط آن را کاملا در گوشه ای قرار می دهند. در اینجا یک مثال دیگر آورده شده است ، که در آن ابتدا علامت گذاری احتمالی را نشان می دهم:
< div id = "wrapper" > < div class = "block" > < / div > < / div >
و حالا سبک های css برای این قطعه:
# بسته بندی کننده (موقعیت: نسبی ؛). بلوک (موقعیت: مطلق ؛ بالا: 0 ؛ راست: 10 پیکسل)
# پوشنده ( موقعیت: نسبی؛ مسدود کردن ( موقعیت: مطلق؛ بالا: 0؛ راست: 10px؛
در این مثال ، ما ابتدا موقعیت نسبی را در ظرف اصلی نوشتیم (نسبی - در مورد آن بعداً در مقاله) ، و سپس موقعیت مطلق را برای همان عنصر .block تنظیم کردیم. در نتیجه ، مختصات نه از طریق خود پنجره مرورگر ، بلکه از لبه های عنصر اصلی ، یعنی بلوک لفافه ، محاسبه می شوند.

موقعیت یابی نسبی عناصر css
این نمای زیر است و اینگونه نوشته شده است - موقعیت: نسبی. مختصات با خصوصیات مشابه موقعیت مطلق تنظیم می شوند. تنها تفاوت قابل توجه این است که این عنصر به طور رسمی از جریان خارج نمی شود - جای آن وجود دارد.
این مقدار را می توان با قابل مشاهده بودن مقایسه کرد: وقتی عنصر از صفحه پنهان شود ، پنهان است اما فضای زیر آن دست نخورده باقی می ماند. همین امر با قرار دادن نسبی اتفاق می افتد - بلوک را می توان به هر مکان منتقل کرد ، اما فضای آن خالی می ماند و قسمت های دیگر آن را نمی گیرند.
همچنین مهم است که بدانید جابجایی از لبه های پنجره مرورگر اتفاق نمی افتد ، بلکه از همان جایی است که بلوک در ابتدا قرار داشت. یعنی:
بلوک (موقعیت: نسبی ؛ بالا: 10 پیکسل ؛ راست: 50 پیکسل ؛)
مسدود کردن ( موقعیت: نسبی؛ بالا: 10 پیکسل راست: 50 پیکسل
این بلوک 50 پیکسل به راست و 10 پیکسل به چپ حرکت می کند.

تثبیت
مطمئناً در اینترنت بیش از یک بار در سایت ها دیده اید که هنگام پیمایش ، برخی از بنرها ناپدید نمی شوند ، اما همچنان در منطقه دید شما هستند ، مثل اینکه به یک مکان می چسبند. این کار عمدتا با استفاده از موقعیت یابی ثابت انجام می شود. برای این کار باید بنویسید:
موقعیت: موقعیت ساکن استاتیک یا نرمال
آخرین نوع استاتیک است ، این رفتار معمول عناصر بلوک است. نیازی به نوشتن نیست ، زیرا به طور پیش فرض است ، اما شما هنوز هم باید در مورد مقدار چهارم بدانید. بعضی اوقات موقعیت: ثابت برای لغو نوع دیگری از موقعیت یابی در برخی از رویدادها در صفحه وب نوشته می شود.

چگونه می توان بلوک ها را به درستی در css قرار داد؟
ما معانی را در نظر گرفتیم ، اما این کافی نیست که این موضوع را برای خود ببندیم. در واقع ، شما باید درک کنید که از کجا و چه نوع موقعیت هایی باید استفاده شود. من قبلاً مثالی را با یک مثال ثابت برای شما آورده ام - می توانید از آن برای ایجاد ستون های جانبی چسبنده ، هدرها یا پاورقی ها استفاده کنید.
موقعیت یابی نسبی می تواند به شما کمک کند وقتی که شما باید یک بلوک را کمی نسبت به موقعیت آن حرکت دهید و همچنان آن را در جریان نگه دارید. همچنین روی بلوک های والدین تنظیم شده است تا از حرکت مطلق برای کودکان استفاده کند.
سایر ترفندها: مرکزیت ، بلوکهای شناور
ویژگی موقعیت ، تمام مشکلات مربوط به ترتیب عناصر بلوک را حل نمی کند. به عنوان مثال چگونه می توانید با استفاده از یک شبکه سایت ایجاد کنید؟ من ندارم ایده های خوب... در اینجا سایر املاک به کمک می آیند.
شبکه ها اغلب با استفاده از شناورها در css ساخته می شوند. ویژگی به شما امکان می دهد تا یک بلوک را در لبه سمت چپ یا راست پدر یا مادر فشار دهید (شناور: چپ ، شناور: راست) ، امکان ایجاد چندین عنصر بلوک در یک خط را فراهم می کند ، که در هر سایت معمول است.
مرکز دهی به این صورت انجام می شود: بلوک باید عرض مشخصی را بنویسد و سپس حاشیه ویژگی را تنظیم کند: 0 روی خودکار. این مقدار خودکار است که آن را دقیقاً با مرکز تراز می کند. به طور طبیعی ، برای این باید تنها مورد در خط خود باشد ، در غیر این صورت هیچ کاری نمی کند.
انواع موقعیت یابی ذکر شده در این مقاله می تواند برای یک توسعه دهنده وب مفید باشد. در جایی باید نماد وارد شود (موقعیت: مطلق) ، در جایی ، باید موقعیت بلوک کمی اصلاح شود ، جایی که پشت آن قرار دارد (موقعیت: نسبی) ، و جایی که ویجت باید ثابت شود (موقعیت: ثابت). به طور کلی دانش این خاصیت قطعاً زائد نخواهد بود.
خوب ، برای یادگیری حتی بیشتر از دنیای سایت سازی ، حتماً در وبلاگ ما مشترک شوید و مطالب آموزشی جدیدی دریافت کنید. و همچنین به شما توصیه می کنم که نگاهی به موضوع ما بیاندازید ، جایی که موضوع مشابهی نیز مطرح می شود. (موقعیت یابی مورد)
اشتراک گذاری
اشتراک گذاری
توییت
پسندیدن
پسندیدن