. هنگام ساخت یک ساختمان شبیه آجر است. در حالی که اساس و طراحی سایت را تشکیل می دهد، با این حال، تنها سایت نیست. مانند درها، پنجره ها، تهویه، بالکن و موارد مشابه، سایر عناصر HTML برای چیدمان استفاده می شوند. اینها لینک ها، فرم ها، تصاویر، لیست ها و جداول هستند.
به ما اجازه داد تا کد را فشرده تر و واضح تر کنیم. انتقال به طرح بندی بلوک باعث شد تا HTML از شر چیزهای غیر ضروری خلاص شود، یعنی استایل ها. حذف کامل طرح بندی جدول پربار و دشوار برای پیمایش را ممکن کرد.
به طور فعال از طرح بندی بلوک CSS استفاده می کند. با استفاده از ابزارهای موجود، می توانید هر صفحه آرایی را با دقت پیکسل ایجاد کنید. این طرح بندی پیکسل کامل نامیده می شود. این به تطابق کامل بین سایت و طرح دلالت دارد. عکس بالا نشان می دهد که همه چیز با طرح بلوک به این سادگی نیست. در ابتدا انجام بدون جداول به سادگی غیرممکن بود. از اینها برای ایجاد طرح‌بندی اصلی صفحات و بلوک‌ها برای عناصر جداگانه استفاده شد. این مورد بود تا زمانی که آنها یاد گرفتند که چگونه ارتفاع بلوک ها را تنظیم کنند.
مزایای
طرح بندی وب سایت بلوک دارای مزایای زیر است:
پیشرفتهای بعدی
در حال حاضر، طرح‌بندی block div منسوخ شده است و فقط به عنوان یک مورد خاص برای موقعیت‌های خاص، استفاده محدودی دارد. با موقعیت و جریان در طرح جایگزین شد. آنها کاستی های زیادی داشتند، اما در مجموع بیش از طرح بندی بلوک را اجازه دادند.
بعد ساخت و ساز با استفاده از عناصر بلوک درون خطی آمد. این کار برنامه نویسان را تا حد زیادی تسهیل کرد. این روش از هر دو نوع بلوک بهره می برد و به شما امکان می دهد طراحی پاسخگوتر و سازگارتر ایجاد کنید. شایان ذکر است که همه این روش ها به یک شکل از یک عنصر div تشکیل شده است که نام "طرح شگفت انگیز" را به آن داده است.
در حال حاضر از Flex-box و bootstrap برای ساخت صفحه استفاده می شود. آنها به طور قابل توجهی کد را کاهش می دهند و ایجاد طراحی واکنشگرا با کیفیت بالا را سریعتر و آسان تر می کنند. آنها به شما اجازه می دهند بلوک ها را بدون شکستن کل صفحه جابجا کنید.
در خط مقدم پیشرفت یک فناوری جدید است - Grids. این به شما امکان می دهد طرحی با هر پیچیدگی را خیلی سریع و آسان ایجاد کنید. و بلوک ها، جریان، موقعیت یابی، همانطور که در یک زمان با جداول اتفاق افتاد، فقط برای هدف مورد نظر خود استفاده می شوند.
طرح Div یک مدل فعلی برای ایجاد وب سایت است.
سایت های جدید به طور مداوم در اینترنت ظاهر می شوند - پورتال های خبری، وبلاگ ها و صفحات شخصی. تقریباً هر یک از آنها بر اساس یک مدل بلوک ایجاد می شوند که اساس آن بلوک های DIV است. امروز ما این فناوری را درک خواهیم کرد، تفاوت های ظریف اصلی طرح div را در نظر می گیریم.
جریان سند HTML
اگر به یاد داشته باشیم که زبان HTML به شما امکان می دهد اطلاعات فرامتن را ساختار دهید، مشخص می شود که هر سایتی در هسته خود مجموعه ای از بلوک ها است: تصاویر، متن، پیوندها و غیره. ما در حال حاضر به طور خاص در مورد DIV ها صحبت نمی کنیم، اما آنها موضوعاتی نزدیک به هم هستند.
بنابراین، ما جریان خاصی از داده ها را داریم که صفحه HTML از آن جمع می شود. در حال حاضر، دو نوع عنصر ساختاری وجود دارد: بلوک و درون خطی. بلوک های بلوک، در یک جریان معمولی HTML، یکی پس از دیگری به ترتیب عمودی قرار می گیرند. در همان زمان، به طور پیش فرض، عرض بلوک تمام فضای موجود نسبت به صفحه یا عنصر والد را اشغال می کند. به نوبه خود، عناصر درون خطی یکی پس از دیگری به ترتیب افقی مرتب شده اند.
نمایندگان اصلی این دو دسته تگ های div و span هستند.
بر این اساس، اگر در مورد یک جریان معمولی HTML صحبت می کنیم، تمام بلوک های div در زیر یکدیگر قرار می گیرند و دهانه در یک خط قرار می گیرد.
همانطور که می دانید، نمی توانید با استفاده از عناصر درون خطی، نشانه گذاری معمولی برای یک وب سایت ایجاد کنید. از این رو چندین سال پیش برای جایگزینی طرح جدول تصمیم گرفتند از چیدمان مبتنی بر بلوک های DIV استفاده کنند.
طرح بندی وب سایت DIV
بنابراین، بلوک های DIV شروع به استفاده برای علامت گذاری سایت کردند. با استفاده از آنها، می توان طرح اصلی را ترسیم کرد و بلوک های اضافی را برای همه انواع محتوای ضروری ایجاد کرد.
بیایید به این فرآیند با استفاده از مثال یک صفحه استاندارد نگاه کنیم که شامل سرصفحه، بلوک محتوا، نوار کناری و پاورقی است.
این یک گزینه کلاسیک است. لوگو اغلب در هدر سایت و لینک های ناوبری در بلوک کناری قرار می گیرد. بلوک اصلی برای نمایش اطلاعات - مقالات، توضیحات شرکت، آرشیو عکس و غیره استفاده می شود. در بلوک پایین می توانید آدرس، مخاطبین و سایر اطلاعات خدمات را وارد کنید.
همانطور که در تصویر می بینید، ما از بلوک های اصلی زیر برای چیدمان چیدمان استفاده می کنیم:
بلوک اصلی به عنوان یک محفظه برای همه محتوا استفاده می شود. سربرگ - سربرگ سایت. Nav - بلوک ناوبری. محتوا - اطلاعات اولیه و محتوا. پاورقی - پاورقی سایت.
هر کدام از این بلوک ها یک ظرف DIV هستند. اما بر اساس تئوری، بلوک ها باید به دنبال یکدیگر باشند. ما باید طرح مورد بحث در بالا را دریافت کنیم تا بلوک ها ساختار زیر را داشته باشند:
و به علاوه، آنها در صفحه به همان شکلی که در قالب می بینیم قرار می گیرند. ما چگونه می توانیم به این دست پیدا کنیم؟ برای این منظور از ویژگی‌های بلوک‌های DIV استفاده می‌کنیم که به ما امکان می‌دهد آنها را نسبت به یکدیگر و کل صفحه به شکل دلخواه قرار دهیم.
اما ابتدا، بیایید پایه HTML طرح‌بندی خود را ایجاد کنیم و نام بلوک‌ها را بگذاریم تا بتوانیم با شیوه نامه کار کنیم.
چارچوب HTML
اگر از تمام تگ های سرویس بگذریم، اسکلت سایت ما به این شکل خواهد بود.
برای هر بلوک یک کلاس اختصاص داده شده است. با کمک آن، سبک هایی را برای بلوک تنظیم می کنیم - این به ما کمک می کند تا به مکان مورد نظر در صفحه برسیم.
وقت آن است که با سبک ها و ویژگی هایی که برای طرح div سایت استفاده می شود آشنا شوید.
سبک های CSS
اگر کسی از قبل نمی داند، شیوه نامه های CSS برای مدت طولانی در توسعه وب سایت استفاده می شود. با کمک آنها می توانید هر عنصری را در صفحه تغییر دهید. این هم در مورد طراحی بصری بلوک و هم برای مکان و مقیاس آن صدق می کند.
شناور
ابتدا، بیایید نگاهی به ویژگی ای بیندازیم که به شما امکان می دهد یک DIV را در سمت راست یا چپ صفحه یا نسبت به محفظه اصلی آن قرار دهید.
یک عقب نشینی کوچک. هر زمان که یک استایل را به یک بلوک اختصاص دهیم، ویژگی های آن (اندازه، مکان) را نسبت به محفظه والد تغییر می دهد.
ویژگی float چهار مقدار دارد: none، right، left، inherit.
ما به معنای "چپ" و "راست" علاقه مندیم.
مقدار float نشان می دهد که بلوک ما در کدام سمت نمایش داده می شود. تمام بلوک های دیگر از طرف مقابل در اطراف آن جریان خواهند داشت.
در مورد ما، برای بلوک ناوبری باید مقدار سمت چپ و برای محتوای اصلی مقدار سمت راست را مشخص کنیم. این چیزی است که در فایل سبک به نظر می رسد:
Nav ( float:left; ) .content ( float:right; )
به هر حال، شما می توانید ویژگی را فقط برای بلوک ناوبری تنظیم کنید. بلوک محتوا به طور خودکار در سمت راست ناوبری قرار می گیرد. این به لطف float که با تنظیم خاصیت float به دست می آید به دست می آید.
حاشیه ها در CSS: حاشیه و padding
حال بیایید دو ویژگی مهم مورد استفاده در چیدمان مبتنی بر div را درک کنیم. آنها مسئول تورفتگی هستند. ساده ترین راه برای درک اصل کار آنها با یک مثال است.
بیایید تصور کنیم که چه کاری باید انجام دهیم تا بلوک اصلی ما MAIN دارای یک فرورفتگی جزئی از هدر سایت باشد. این را می توان با اختصاص یک ویژگی margin به div با کلاس اصلی به دست آورد. مسئول بالشتک خارجی بلوک است.
ویژگی margin دارای مقادیر زیر است: [value | علاقه | خودکار] (1،4) | به ارث می برند.
بنابراین، می‌توانید مقدار افست را بر حسب پیکسل، بر حسب درصد، برای هر طرف به نوبه خود مشخص کنید.
تنظیم فقط یک تورفتگی خاص، به عنوان مثال در سمت بالا امکان پذیر است. این دقیقاً مورد ماست. در اینجا نحوه اجرای آن آمده است:
اصلی (حاشیه بالا: 10 پیکسل؛ )
اکنون بلوک اصلی ما دارای یک بالشتک بالای 10 پیکسل خواهد بود.
حالا بیایید یک بلوک با ناوبری و محتوا طراحی کنیم. تصور کنید که ما در حال حاضر یک وب سایت آماده داریم. همه پیوندهای موجود در ناوبری نزدیک به لبه سمت چپ صفحه قرار دارند. و متن در بلوک محتوا، برعکس، نزدیک به سمت راست است. طراحی کاملا ناخوشایند. باید بالشتک داخلی درست کنیم.
ویژگی padding با داشتن مقادیر زیر مسئول این کار است: [value | درصد] (1، 4) | به ارث می برند
اصل در اینجا مانند ویژگی margin است - می توانید تورفتگی را برای هر طرف جداگانه تنظیم کنید.
Nav ( float: چپ؛ padding-left: 15px; ) .content ( float:right; padding-right: 20px; )
با استفاده از این ویژگی های اولیه، می توانید به چیدمان دلخواه بلوک های DIV برسید. در نتیجه یک طرح وب سایت آماده دریافت خواهید کرد و تنها چیزی که باقی می ماند پر کردن آن با اطلاعات لازم است.
ویدئو برای مقاله:
نتیجه
ما فقط خواص اولیه را در نظر گرفته ایم. در واقع تعداد بیشتری از آنها وجود دارد. اما در هر صورت اطلاعات ارائه شده همیشه در طرح div استفاده خواهد شد.
اگر همه چیز در اینجا جمع آوری شده است، چرا به دنبال اطلاعات در سایت های دیگر باشید؟
مجموعه مقالات نویسنده به اصول اولیه طرح بندی وب سایت بلوک. این اولین جایی برای شروع مطالعه موضوع است. ایجاد وب سایت. دروس برای کسانی که می خواهند اصول اولیه را یاد بگیرند مفید خواهد بود HTML و CSSنه تنها در تئوری، بلکه در عمل.
همانطور که ما موضوع را مطالعه می کنیم، یک وب سایت ایجاد می کنیم، یک وب سایت معمولی، بدون زنگ و سوت خاص، اما بسیار زیبا.
در درس ها، من به سادگی و به وضوح در مورد طرح بندی وب سایت مبتنی بر بلوک و موارد دیگر صحبت می کنم. اگر می خواهید به سرعت اصول را درک کنید طرح بندی های وب سایت، پس این سری از مقالات دقیقا همان چیزی خواهد بود که شما نیاز دارید.
طرح بندی بلوک چیست؟
چه اتفاقی افتاده است طرح بندی وب سایت را مسدود کنیدو با چی میخورید
قبلاً وب سایت ها با استفاده از جداول طراحی می شدند. هر عنصر صفحه، خواه عنوان، متن یا تصویر باشد، در سلول خودش قرار داشت. این سلول‌ها در سلول‌های بزرگ‌تر دیگر ازدحام کردند و آنها به نوبه خود در سلول اصلی، یعنی در خود صفحه سایت قرار داشتند.
طرح بندی جدولی اکنون منسوخ شده است، اگرچه بسیاری از مدیران وب همچنان از آن استفاده می کنند. عیب بزرگ آن کد سنگین آن است. پس از همه، هر سلول کوچک باید با برچسب های خاصی مشخص شود.
طرح بندی بلوک- آهنگی کاملا متفاوت در اینجا تمام عناصر صفحه در بلوک های خاصی به نام div قرار دارند. در هسته خود، آنها تا حدودی شبیه به همان جداول هستند. جعبه در آفریقا نیز جعبه است. اما بلوک ها بسیار راحت تر، ساده تر و کاربردی تر هستند.
مسدود کردندر طرح‌بندی وب‌سایت، این یک ناحیه مستطیلی منظم است که دارای تعدادی ویژگی است، مانند: قاب، حاشیه و تورفتگی. محتوای بلوک می تواند هر چیزی باشد - یک قطعه متن، یک تصویر، یک لیست، یک فرم برای پر کردن، یک منوی پیمایش و غیره.
قاب- این طرح کلی بلوک است که می توانید ویژگی هایی مانند ضخامت، رنگ و نوع (نقطه دار، جامد، نقطه چین) را برای آن تنظیم کنید.
فیلدها (بالشتک)- محتویات بلوک را از قاب آن جدا کنید تا مثلاً متن به دیوارهای بلوک "بالا" نباشد.
حاشیه ها- این فضای خالی بین بلوک های مختلف است که به دو بلوک اجازه می دهد نسبت به یکدیگر در یک فاصله معین قرار گیرند.
بلوک ها، مانند جداول، همیشه به صورت عمودی در صفحه مرتب می شوند. یعنی اگر دو بلوک پشت سر هم در کد صفحه نوشته شده باشد در مرورگر یکی زیر دیگری نمایش داده می شود. اگر لازم است چندین بلوک را به صورت افقی در یک خط مرتب کنیم، در خصوصیات آنها پارامتری مانند " جریان در اطراف"(شناور). اما در ادامه بیشتر در مورد آن.
طرح بندی سایت را مسدود کنید. برچسب ها
برچسب بزنیدساخت ویژه ای از زبان HTML است. تمیز دادن افتتاحو بسته شدنبرچسب ها آنها را با هشتگ های شبکه های اجتماعی یا برچسب های وب سایت ها اشتباه نگیرید، اینها چیزهای متفاوتی هستند!
در ساده ترین حالت، برچسب مانند بخشی از مجموعه ساخت و ساز کودکان است که هدف دقیق خود را دارد: میله به معنای میله، چرخ به معنای چرخ و هیچ چیز دیگری نیست. به عنوان مثال، یک تگ پاراگراف:
متن پاراگراف.
همیشه با حرف p نشان داده می شود و هیچ چیز دیگری. اسمش همینه
برچسب ها همیشه در براکت های زاویه بسته می شوند. همانطور که از مثال می بینید، یک تگ باز و بسته وجود دارد. تگ بسته دارای یک اسلش قبل از نام است - یک اسلش جلو / .
همه تگ ها جفت بسته شدن ندارند. مثلاً تگ img image اصلاً آن را ندارد. اما برای انطباق با استانداردهای مدرن و الزامات مشخصات XHTML، آنها هنوز یک فاصله با یک اسلش قبل از براکت زاویه بسته اضافه می کنند. چیزی شبیه این به نظر می رسد:
تگ div
تگ div اساس طرح بلوک است. اینها همان مکعب هایی هستند که کل سایت از آنها ساخته شده است. این تگ خنثی است. بر خلاف تگ‌های استاندارد HTML، که به شدت به محتوای خود گره خورده‌اند (p - به پاراگراف‌ها، a - به پیوندها، img - به تصاویر)، تگ div می‌تواند حاوی هر چیزی و به اندازه‌ای از این موارد باشد که شما می‌خواهید. آن را مانند یک جعبه بزرگ در نظر بگیرید که همه اسباب بازی ها در آن ریخته می شوند.
از تگ div برای تعریف استفاده می شود مناطق کاربردی در صفحه. به عنوان مثال، مانند: "هدر"، بلوک ناوبری، بلوک محتوای اصلی، "پانویس" یا پاورقی به نظر ما.
تگ div نیز مانند هر تگ دیگری ویژگی های خاص خود را دارد.
صفت- ویژگی های توصیفی برچسب یعنی چه کاری و چگونه انجام دهد. برای مثال، بیایید یک تگ تصویر بگیریم:
در این مورد، src، عرض، ارتفاع، alt ویژگی های تگ هستند. در علامت نقل قول (و این نیز یک الزام اجباری استانداردهای مدرن است) آورده شده است ارزش هایویژگی های.
رمزگشایی از چنین ضبطی دشوار نیست. تگ نشان می دهد که در این مکان از صفحه باید تصویر risunok.jpg را از پوشه images ضمیمه کنید. عرض تصویر 200 پیکسل، ارتفاع 50 پیکسل است. و به پشته، متن جایگزین اضافه شده است که توضیح می دهد که در تصویر نشان داده شده است.
به هر حال، متن جایگزین یک هوی و هوس نیست، بلکه یک نیاز ضروری است. همه کاربران اینترنت بینایی خوبی ندارند. شخصی از یک برنامه تشخیص و خواندن متن استفاده می کند. و برخی افراد به سادگی نمایش تصاویر را در مرورگر خاموش می کنند. به همین دلیل است که زیرنویس‌های جایگزین برای نقاشی‌ها وجود دارد.
اگر امضای آنها فایده ای نداشته باشد (مثلاً یک نشانگر لیست یا نوعی فلش)، پس ویژگی alt با یک فضای خالی بین نقل قول ها باقی می ماند.
ویژگی های تگ div
تگ div تنها دو ویژگی دارد:
id - یک ویژگی است که به شما امکان می دهد تخصیص دهید منحصر بفردمقدار، یعنی چیزی که در صفحه استفاده می شود فقط یک بار. برای مثال سرصفحه یا پاورقی.
به این ترتیب، می‌توانیم برخی تنظیمات را در شیوه نامه برای تگ div با ویژگی id و مقدار هدر، و تنظیمات کاملاً متفاوت برای فوتر تنظیم کنیم. و مرورگر به درستی تشخیص می دهد که این قطعه متن متعلق به "هدر" است و به عنوان مثال با فونت بزرگ و قرمز تایپ می شود، اما این متن متعلق به "پانویس" است و با فونت کوچک و خاکستری تایپ می شود. و بدون سردرگمی!
class یک ویژگی است که به شما امکان می دهد یک مقدار را به چندین عنصر اختصاص دهید. برای مثال، یک فریم با ضخامت و رنگ یکسان به تمام تصاویر صفحه اضافه کنید. از آنجایی که چندین تصویر وجود دارد، دیگر نمی توان از ویژگی id استفاده کرد، بنابراین از class استفاده می کنیم.
برای اولین بار فکر می کنم کافی است. اگر چیزی در مورد طرح بندی بلوک وب سایت ها نامشخص است، در نظرات بپرسید.
ادامه دارد. در تماس باش!
چیدمان با بلوک‌های div مدت‌هاست که به یک استاندارد تبدیل شده است و مزایای زیادی نسبت به طرح‌بندی جدولی دارد. با این حال، در واقعیت، توسعه دهندگان تازه کار در مورد رفتار همین بلوک ها سردرگم هستند.
بیایید به نکات اصلی طرح بلوک نگاه کنیم. اکنون استاندارد html5 را در نظر نخواهیم گرفت، بلکه به سادگی به اصول چیدمان با بلوک‌های div نگاه می‌کنیم که هنگام ایجاد یک طرح‌بندی یا برخی از اجزای صفحه جداگانه استفاده می‌شود.
چه عنصر بلوک در نظر گرفته می شود؟
منطقه چنین عنصری در صفحه با یک مستطیل نشان داده می شود؛ به طور پیش فرض، کل عرض موجود را اشغال می کند و از یک خط جدید شروع می شود.
رایج ترین عنصر مورد استفاده در طرح بندی بلوک، عنصر جهانی است
.
بنابراین، از ساده به پیچیده. بیایید ببینیم که چگونه div ها به طور پیش فرض ظاهر می شوند بدون اینکه سبک ها بر موقعیت آنها تأثیر بگذارند. برای وضوح، سبک‌ها را از طریق ویژگی style به عناصر درون خطی اضافه می‌کنیم.
بلوک 1
بلوک 2
بلوک 3
بیایید یک مقدار عرض برای هر بلوک اضافه کنیم:
بلوک 1
بلوک 2
بلوک 3
مشاهده می شود که هر بلوک با توجه به مشخصات، در یک خط جدید قرار دارد. این رفتار عادی آنهاست.
حال این سوال پیش می‌آید که چگونه موقعیت‌یابی کنیم بلوک های div در یک خط، یکی پس از دیگری؟
برای این منظور خاصیتی وجود دارد که تعیین می کند بلوک در کدام سمت مجبور به تراز کردن شود. در همان زمان، از لبه دیگر، می تواند در اطراف عناصر دیگر جریان یابد.
ویژگی float معانی زیر را دارد:
- سمت چپ - بلوک در لبه چپ تراز شده است و به سمت راست جریان دارد
- سمت راست - بلوک در لبه سمت راست قرار دارد و به سمت چپ جریان دارد
- هیچ - هیچ بسته بندی مشخص نشده است، بلوک به طور پیش فرض مانند نمونه های قبلی رفتار می کند.
بیایید float:left را به بلوک های خود اضافه کنیم تا بلوک ها در سمت چپ تراز شوند:
بلوک 1
بلوک 2
بلوک 3
در نتیجه بلوک ها در یک خط قرار گرفتند. خوب، فرض کنید می‌خواستیم یک div دیگری در پایین اضافه کنیم، و این کار را بدون مشخص کردن ویژگی float انجام می‌دهیم:
بلوک 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
بلوک 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
بلوک 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
واحد 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
بلوک 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
بلوک 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
بلوک 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
واحد 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
چرا این اتفاق افتاد؟ به طور خلاصه، این اتفاق می افتد زیرا عناصر شناور از جریان سند خارج می شوند. با این حال، این موضوع برای یک مقاله جداگانه است. در اینجا با ویژگی جدید که رفتار عناصر شناور را کنترل می کند آشنا می شویم:
- سمت چپ - بسته بندی در سمت چپ را غیرفعال می کند، همه عناصر در یک خط جدید (زیر عنصر) نشان داده می شوند.
- rigth - از پیچیده شدن عنصر در سمت راست جلوگیری می کند
- هر دو - پیچیدن یک عنصر در هر دو طرف را ممنوع می کند؛ توصیه می شود زمانی از آن استفاده کنید که به وضوح باید عنصر را در یک خط جدید نشان دهید یا مشخص نیست که کدام طرف را می توان در اطراف عناصر دیگر پیچیده کرد.
بیایید ویژگی clear:left را به بلوک 4 اضافه کنیم، که از جریان این عنصر در اطراف سایر عناصر شناور در سمت چپ جلوگیری می کند.
بلوک 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
بلوک 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
بلوک 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
واحد 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
بلوک 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
بلوک 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
بلوک 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
واحد 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
بلوک 4 همانطور که نیاز داریم در یک خط جدید قرار می گیرد.
در این مورد، ما می دانیم که بلوک های دیگر چگونه قرار دارند، بنابراین در مثال بلافاصله clear:left را نشان دادیم. موقعیتهایی وجود دارد که نمیدانیم بلوک شناور دقیقاً با کدام طرف برخورد میکند، بنابراین در چنین مواردی ارزش آن را دارد که مشخص کنیم: هم، که جریان هر دو طرف را لغو میکند. اکنون متوجه شده ایم که چگونه بلوک های div را به صورت افقی روی یک خط قرار دهیم.
به خاطر داشته باشید که اگر عرض عنصر والد اجازه دهد، بلوک های شناور در یک خط قرار می گیرند. اگر عناصر بلوک در یک ردیف قرار نگیرند، در یک خط جدید قرار می گیرند. اگر این مهم است، به عنوان مثال، هنگام چیدمان چیدمان ها، باید این را در نظر بگیرید و برای بلوک های دارای شناور، حتماً عرض را تنظیم کنید - ثابت (px) یا لاستیک (% rem و غیره). بیایید در ادامه به چنین موقعیت هایی نگاه کنیم.
اگر بخواهیم این بلوک ها را در مرکز قرار دهیم چگونه روی بلوک ها تأثیر بگذاریم؟
راه حل کلاسیک اضافه کردن یک والد به بلوک ها و استفاده از حاشیه: 0 auto; ویژگی است.
چرا کلاس.wrapper را به والد دادیم؟ لفاف به معنای لفاف است. این یک نوع تمرین پذیرفته شده عمومی است که نام کلاس را تعریف می کند، برای اینکه یک عنصر بلوک های دیگر را بپیچد و در نتیجه به آنها اجازه می دهد تا با تغییر خود والد کنترل یا تحت تأثیر قرار گیرند.
بیایید نشانه گذاری را از نمونه های قبلی بگیریم و آن را بهبود ببخشیم.
بلوک 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
بلوک 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
بلوک 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
واحد 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
بلوک 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
بلوک 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
بلوک 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
واحد 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
اینجا همه چیز ساده به نظر می رسد.
و اگر دوست نداریم که متن به لبه بلوک والد بچسبد و بخواهیم فیلدهایی را بدون ایجاد تغییرات در نشانه گذاری، فقط با استفاده از css اضافه کنیم. بیایید ویژگی padding را به عناصر اضافه کنیم:
بلوک 1. لورم
بلوک 2. لورم ایپسوم
بلوک 3. لورم ایپسوم
بلوک 4. لورم
و می بینیم که چیدمان ما به هم ریخته است! بلوک 3 جایی رفته است. چرا این اتفاق افتاد؟ پاسخ ساده است. با افزودن فیلدها به عناصر، عرض آنها را افزایش دادیم. اکنون مقادیر عبارتند از:
بلوک 1: 10 + 200 + 10 = 220 پیکسل
بلوک 2: 10 + 150 + 10 = 170 پیکسل
بلوک 3: 10 + 100 + 10 = 120 پیکسل
بلوک 4: 10 + 450 + 10 = 470 پیکسل
220 + 170 + 120 = 510 پیکسل
عرض کل سه بلوک 510 است، آنها در عرض والد (450) قرار نمی گیرند و بنابراین به یک خط جدید منتقل می شوند.
چطوری میشه اینو تعمیر کرد؟ می توانید کارهای زیر را انجام دهید:
- با در نظر گرفتن حاشیه، مقادیر عرض را برای هر بلوک بازنشانی کنید. با کاهش اندازه بلوک. همه چیز دوباره در یک خط قرار می گیرد. آیا موافقید که این ناخوشایند است؟ هر بار که وارد طرح می شوم و چیزی را ویرایش می کنم.
- از ویژگی box-sizing استفاده کنید: border-box. به طوری که محاسبه از عرض کل بلوک گرفته می شود. من به شما توصیه می کنم که بدانید مدل بلوک css چیست.
با استفاده از گزینه دوم، به این صورت معلوم می شود:
بلوک 1. لورم
بلوک 2. لورم ایپسوم
بلوک 3. لورم ایپسوم
بلوک 4. لورم
بلوک 1. لورم
بلوک 2. لورم ایپسوم
بلوک 3. لورم ایپسوم
بلوک 4. لورم
حالا بیایید تمام اطلاعاتی که دریافت کردهایم را کنار هم بگذاریم و سعی کنیم یک طرح‌بندی استاندارد سه ستونی با یک طرح‌بندی انعطافپذیر ایجاد کنیم که حداکثر تا 900 پیکسل کشیده می‌شود و پس از آن کل طرح‌بندی در مرکز قرار میگیرد.
نشانه گذاری طرح بندی را ایجاد کنید:
سند
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit rem fugit itaque، est impedit aperiam a autem repellat vitae porro ex expedita، cumque nulla، velit. Soluta velit eos، quia. Fugiat voluptates nisi aliquid eum sapiente sunt nobis، adipisci assumenda earum!
ما سبک ها را می نویسیم:
بدنه ( حداکثر عرض: 900 پیکسل؛ /* حداکثر عرض را محدود کنید */ حاشیه: 0 خودکار؛ ) /* برای همه بلوک های داخل بدنه، الگوریتم محاسبه عرض بلوک را تغییر دهید و 10 پیکسل حاشیه به همه بلوک ها اضافه کنید */ body div ( - webkit-box-sizing : border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; ) .header ( پس زمینه: #CCA69E; padding: 10px; ) .left- نوار کناری (عرض: 20%؛ پسزمینه: #8ED9B6؛ شناور: چپ؛ ) .content ( شناور: چپ؛ عرض: 60%؛ ) .نوار کناری سمت راست (عرض: 20%؛ پسزمینه: #FF9282؛ شناور: چپ؛ ) .footer ( پس زمینه: #000؛ روشن: هر دو؛ /* بسته بندی را در هر دو طرف غیرفعال کنید، بلوک در یک خط جدید نمایش داده می شود */ رنگ: #ccc؛ )
اگر چیزی نامشخص است، در نظرات بپرسید.
شاید خواندن آن مفید باشد: