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

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

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

عرض واقعی عنصر با استفاده از فرمول زیر محاسبه می شود:

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

برای مقدار باقیمانده مدل، با محاسبه عرض و ارتفاع عناصر، علامت را محکم روی قنداق پا بردارید:

معنای قدرت جعبه محتوا به معنای ارتقاء و طرح فعلی عرض و ارتفاع اصلی عنصر طبق طرح کلاسیک است. عرض باسن:

150 پیکسل (مقدار عرض) + 10 پیکسل (لبه داخلی سمت چپ) + 10 پیکسل (لبه داخلی سمت راست) + 10 پیکسل (لبه سمت چپ) + 10 پیکسل (لبه سمت راست) = 1 90 پیکسل.

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

نتیجه باسن ما:

مدیریت ارتقاء مجدد عناصر بلوک

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

بیایید نگاهی به باسن تهاجمی بیندازیم:

که قنداقشان گذاشته شد chotiriبلوک با عرض و ارتفاع ثابت، که برای آن مقادیر مختلف CSS برای کنترل سرریز مشخص شده است:

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

نتیجه باسن ما.

عناصر به چه انواعی تقسیم می شوند؟

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

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

کم اهمیت 1. مقامات اصلی که به تنظیم اندازه کمک می کنند

قدرت ساده برای اندازه

ساده ترین راه برای نوشتن ابعاد عرض و ارتفاع است. بدیهی است که بوها به معنای عرض و ارتفاع است. همچنین می توانید پیشوندهای min- و max- را به آنها اضافه کنید. برای این نوع حداقل و حداکثر عرض و ارتفاع مشخص خواهد شد.

مقادیر را می توان در پیکسل یا صدها ثبت کرد. گاهی اوقات از em (ارتفاع فونت) نیز استفاده می شود و اندازه متن نیز مشخص می شود. مش‌های بافته شده (بلوک‌های ساختاری اصلی قالب) که ابعاد آن‌ها صدها عدد تعیین می‌شود، هیومیک نامیده می‌شوند. همچنین، درصد ورودی، تطبیق قالب را آسان می کند، که این نیز بسیار مهم است.

اندازه بر حسب پیکسل

مقادیر مطلق پیکسل ها را بنویسید. به عنوان مثال، کل سایت در یک ظرف با عرض 1000 پیکسل قرار دارد. این بلوک ایجاد می شود و عرض آن نوشته می شود.

#container( عرض: 1000px؛ )

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

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

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

#container(حداکثر عرض: 1320 پیکسل؛ )

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

با این حال، در اینجا می توانید حداقل عرض را تنظیم کنید. اگر این قدرت به بلوک داده شود، دیگر هیچ اهمیتی به آن داده نخواهد شد. مثلا:

#container( حداقل عرض: 600px؛ )

اگر عرض پنجره کمتر از 600 پیکسل شود، بلوک دیگر کوچک نمی شود و الگوی اسکرول افقی ظاهر می شود.

اندازه در صد

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

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

#سایدبار( شناور: چپ؛ عرض: 28%؛ ) #content( شناور: راست؛ عرض: 62%؛ )

در نتیجه، نوار کناری 28٪ از عرض عنصر پدر (و در مورد ما، ظرف آتش) و بلوک اصلی - 62٪ را اشغال می کند. عرض انبار 90 درصد است. 10 مورد دیگر برای انواع دهانه های خارجی و داخلی، قاب ها و غیره استفاده می شود.

کم اهمیت 2. بلوک های آدامس با تغییر پنجره مرورگر اندازه خود را تغییر می دهند

نحوه ادغام ورودی ها در اندازه بلوک

اگر عرض هر بلوک را برای توان اضافی تنظیم کنید، عرض ممکن است بسیار کمتر از اهمیت باشد. در سمت راست این است که ما عرض تنها قسمت هایی را که آن را در خود دارند اندازه گیری می کنیم. لازم به یادآوری است که در css padding اندازه بلوک و همچنین فریم (حاشیه) افزایش می یابد.

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

#نوار کناری (بالشتک: 10px 20px؛ حاشیه: 2px مشکی یکدست؛ )

در طرح‌بندی‌های مدرن در صفحات وب، اغلب می‌توان بلوک‌هایی داشت که 100 درصد عرض صفحه را اشغال می‌کنند.

به نظر می رسد این است:

بیایید نحوه دستیابی به این اثر را دریابیم.

به عنوان مثال، بیایید به این وضعیت نگاه کنیم.

ما از نتیجه شگفت زده می شویم، scho Viyshov.

با نگاه کردن به جلو، از طرفین بلوک می توانید نفوذهای کوچکی را مشاهده کنید که کل تصویر را خلاصه می کند. دوست دارم آنها را بخوابانم.

اول، آنچه در ذهن می افتد، آوردن قدرت به عرض بلوک: 100٪ است. اما راهی برای تغییر وضعیت وجود ندارد. می توانید خودتان وارد آن شوید.

بنابراین، عرض قدرت: 100٪ را می توان با خیال راحت مرتب کرد.

دلیل واقعی چنین حملاتی چیست؟

در سمت راست، بلوک div که عرض آن را می‌خواهیم 100 درصد کنیم در دو عنصر Father’s body و html ذخیره می‌شود. به عنوان یک قاعده، مرورگرها آنها را با مقادیر padding و کنترل های حاشیه تنظیم می کنند.

برای حل مشکل، باید این ورودی ها را بازنشانی کنید. واقعا ساده است:

اکنون می توانیم ببینیم که بلوک چگونه به نظر می رسد.

همه چیز معجزه آسا است، جادار است، از هر دو طرف است، مرتب شده است.

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

سرویس چیدمان صفحات فرود.

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

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

یکی از راه های "مبارزه" با مجوزهای مختلف، استفاده از طرح آدامس است. در این حالت سایت تحت مجوزهای مختلف کشیده و فشرده می شود که با تغییر عرض مرورگر می توان آن را در سایت ها بهبود بخشید. در سایت من، اتفاقا، طرح استاتیک توسط vikoryst استفاده می شود.

برای ایجاد یک طرح ساده برای صفحات مختلف، از قانون سبک استفاده کنید @رسانه ها. مثلا،

@media (حداکثر عرض: 1024 پیکسل؛) (

همه (بالشتک: 10 پیکسل؛)

این مدخل برای صحبت در مورد موارد کلاس است همهورودی مسدود خواهد شد 10 پیکسلاین اتفاق می افتد اگر صفحه نمایش یک قسمت جداگانه داشته باشد تا 1024 پیکسل.

اگر نیاز به تعیین قاعده برای صفحات میانی دارید، ورودی به صورت زیر خواهد بود:

@media (حداکثر عرض: 1024 پیکسل؛) و (حداکثر عرض: 1640 پیکسل) (
.all (بالشتک: 10 پیکسل؛)

جدول (عرض: 80%)
}

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

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

اگر لازم است قوانینی را فقط برای دستگاه های تلفن همراه (تبلت ها، تلفن های هوشمند) مشخص کنید، در این صورت رکورد در کدام نوع ثابت می شود حداکثر پهنای دستگاهیا چیز دیگر Min-Device-Widthبرای تنظیم حداکثر و حداقل مجوزها بر این اساس.

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

صفحه رسانه @ (حداکثر عرض: 1380 پیکسل) (…)

این بدان معناست که سبک‌ها فقط به رایانه‌های رومیزی محدود می‌شوند، با عرض صفحه حداکثر 1380 پیکسل.

بنابراین، به جای صفحه نمایش، می توانید نشان دهید دستی(دستگاه های تلفن همراه) چاپ(چاپگرها) طراحی حمام(پروژکتورها) تلویزیون(تلویزیون).

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

عرض در صد درصد

Vіdsotok ce one vimir element shodo block, scho mіsti yogo. این برای تصویر معجزه می کند: در اینجا ابعاد تصویر را تنظیم می کنیم که عرض آن همیشه 50٪ عرض ظرف است. سعی کنید اندازه پنجره مرورگر خود را صدا کنید تا ببینید چه اتفاقی می افتد!

همچنین می توانید از این ابزار برای تعیین حداکثر و حداقل اندازه تصویر استفاده کنید!

طرح بندی عرض درصد

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Phasellus imperdiet، nulla et dictum interdum، nisi lorem egestas odio، vitae scelerisque enim ligula venenatis dolor.

ارتفاع Div برابر با عرض CSS است

Maecenas nisl est، ultrices nec congue eget، auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula، facilisis sed ornare eu، lobortis in odio. به دنبال کانوالیس urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi، sed ullamcorper ipsum dignissim ac. در لیبرو sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget letus gravida venenatis. عدد صحیح fringilla congue eros نه fermentum. Sed dapibus pulvinar nibh tempor porta. کراس آک لئو پوروس. Mauris quis diam velit.

صفحه با اندازه پنجره مرورگر سازگار می شود

در حال حاضر، کمبود دستگاه های دیجیتال با اندازه های مختلف صفحه نمایش، از گوشی های هوشمند گرفته تا تلویزیون های 42 اینچی و بزرگتر وجود دارد. برای مناسب بودن، در همه این دستگاه‌ها وضوح‌های متفاوتی مجاز است (از تقریباً 320x240 تا 1920x1200) و تحت هر یک از این مجوزها اغلب لازم است صفحه وب را تطبیق دهید. سعی کنید کمک بگیرید داستان های رسانه- بخشی از مشخصات CSS3 که به شما امکان می دهد محدوده انتخابگر را تنظیم کنید. پرس‌وجوهای رسانه بلوکی از پارامترهای مشخص شده برای یک دستگاه نمایشگر هستند، مانند نوع، عرض و ارتفاع پنجره مرورگر، تقسیم‌بندی ساختمان‌ها، جهت‌گیری فضا. همه قوانین شروع می شود @رسانه ها، که انواع دستگاه، عملگرهای منطقی و عملکردهای رسانه را ضبط می کند. در لیست زیر، هر 3 عملگر منطقی قابل توجه هستند.

1. و- منطقی تر از "من"، برای اتحاد بسیاری از اذهان دچار رکود می شود.
2. نه- منطقی تر "نه"، ایستایی برای مسدود کردن هر ذهن.
3. , - "ABO" منطقی تر است، اگر انسان بخواهد به یک ذهن برسد، سبک راکد می شود.

حالا بیایید به توابع رسانه نگاه کنیم. این کمک ویژگی های فنی دستگاه ها را تنظیم می کند (به عنوان مثال، اندازه پنجره مرورگر). 12 قطعه در یک زمان.

1. نسبت ابعاد (حداکثر نسبت ابعاد، حداکثر نسبت ابعاد)- به نسبت عرض به ارتفاع ناحیه نمایش داده شده اشاره دارد. به عنوان مثال، با 2/3 نشان داده شده است، به عنوان مثال، 2 عدد وجود دارد که با علامت "/" از هم جدا شده اند.
2. رنگ (حداکثر رنگ، حداکثر رنگ)- این تعداد بیت در هر کانال رنگ را نشان می دهد. اهمیت حداقل رنگ: 2به این معنی که پوست از سه کانال سیستم رنگی RGB می تواند 2 2 سایه و همه به طور همزمان 4*4*4=64 رنگ مختلف را نمایش دهد. اگر معنی در کتاب ذکر نشده باشد، طرح رنگ بررسی می شود.
3. شاخص رنگ (دقیقه-شاخص رنگ، حداکثر-شاخص رنگ)- به معنی تعداد رنگ هایی است که دستگاه را پشتیبانی می کند.
4. نسبت ابعاد دستگاه (حداکثر نسبت ابعاد دستگاه، حداکثر نسبت ابعاد دستگاه)- رابطه بین طرفین صفحه دستگاه را نشان می دهد (2 عدد که با یک اسلش از هم جدا شده اند، به عنوان مثال 4/3).
5. ارتفاع دستگاه (حداکثر ارتفاع دستگاه، حداکثر ارتفاع دستگاه)- به معنای تمام ارتفاع صفحه در دسترس دستگاه یا پانل جانبی است.
6. پهنای دستگاه (حداکثر عرض دستگاه، حداکثر عرض دستگاه)- به معنای کل عرض صفحه نمایش برای دستگاه یا طرف است.
7. توری- این بدان معنی است که دستگاهی با اندازه ثابت کاراکترها (ترمینال یا تلفن) وجود دارد.
8. ارتفاع (حداقل ارتفاع، حداکثر ارتفاع)- ارتفاع ناحیه نمایش داده شده را تنظیم می کند.
9. تک رنگ (حداقل تک رنگ، حداکثر تک رنگ)- به این معنی که دستگاه تک رنگ است و در صورت تخصیص هر مقدار، تعداد بیت در هر پیکسل نشان داده می شود. به عنوان مثال، مقدار 8 برابر با 2 8 سایه رنگ برای یک صفحه نمایش تک رنگ است.
10. گرایش- به این معنی که دستگاه در حالت افقی، مقدار چشم اندازدر غیر این صورت پرتره مهم نیست پرتره;
11. وضوح (رزولوشن حداقل، حداکثر وضوح)- این بدان معنی است که دستگاه بر حسب dpi (نقطه در هر اینچ) یا dpcm (نقطه در سانتی متر) نمایش داده می شود.
12. اسکن کنید- این به معنای نوع بوق تلویزیون - interlace یا progressive است. در صورت رشد فوق‌العاده، تلویزیون ابتدا ردیف‌های جفت نشده قاب را نشان می‌دهد، سپس جفت می‌شود؛ در رشد تدریجی، فریم منتقل می‌شود و در خارج نشان داده می‌شود.
13. عرض (حداکثر عرض، حداکثر عرض)- عرض ناحیه نمایش داده شده را تنظیم می کند.

باسن نینا

ابعاد عناصر بلوک در CSS

بیایید یک صفحه وب ایجاد کنیم و سبک آن را با استفاده از پرس و جوهای رسانه ای اضافی تنظیم کنیم.

این هدر برای سایت است.

گولوونا | نوینی | درباره ما | مخاطب

این بلوک حاوی محتوا (به جای جانبی اصلی) است.

Statta 1 Statta 2 Statta 3 Statta 4 ماده 5

اینجا زیرزمین است.

اکنون استایل شیت را تنظیم می کنیم:

#اصلی (
اندازه فونت: 14px;
}
صفحه رسانه @ و (حداکثر عرض: 800 پیکسل)(
#سرتیتر(
پس زمینه: #ff6633;
عرض: 100%;
ارتفاع: 10%;
}
#منو بالا(
text-align:center;
پس زمینه رنگ: #ffcc66;
عرض: 100%;
ارتفاع: 12%;
}
#منو بالا a (
رنگ آبی؛
text-decoration: هیچ;
}
#topmenu a:hover(
رنگ آبی؛
متن-تزیین: زیر خط.
}
#محتوا(
background-color: #ffccff;
شناور به سمت چپ؛
عرض: 80%;
ارتفاع: 68%;
}
#نوار کناری(
شناور به سمت چپ؛
پس زمینه رنگ: #ff9966;
عرض: 20%;
ارتفاع: 68%;
}
#نوار کناری a (
display:block;
padding-bottom:3px;
رنگ آبی؛
text-decoration: هیچ;
}
#نوار کناری a:hover(
رنگ آبی؛
متن-تزیین: زیر خط.
}
#پانویس(
روشن: هر دو
پس زمینه رنگ: #ffff33;
عرض: 100%;
ارتفاع: 10%;
}
}
صفحه رسانه @ و (عرض حداقل: 800 پیکسل)(
#اصلی (
عرض: 800 پیکسل
حاشیه: 0 خودکار;
}
#سرتیتر(
پس زمینه: #ff6633;
عرض: 800 پیکسل
ارتفاع: 100 پیکسل
}
#منو بالا(
text-align:center;
پس زمینه رنگ: #ffcc66;
عرض: 800 پیکسل
ارتفاع: 30 پیکسل
}
#منو بالا a (
رنگ آبی؛
text-decoration: هیچ;
}
#topmenu a:hover(
رنگ آبی؛
متن-تزیین: زیر خط.
}
#محتوا(
background-color: #ffccff;
شناور به سمت چپ؛
عرض: 650 پیکسل
ارتفاع: 400 پیکسل
}
#نوار کناری(
شناور به سمت چپ؛
پس زمینه رنگ: #ff9966;
عرض: 150 پیکسل
ارتفاع: 400 پیکسل
}
#نوار کناری a (
display:block;
padding-bottom:3px;
رنگ آبی؛
text-decoration: هیچ;
}
#نوار کناری a:hover(
رنگ آبی؛
متن-تزیین: زیر خط.
}
#پانویس(
روشن: هر دو
پس زمینه رنگ: #ffff33;
عرض: 800 پیکسل
ارتفاع: 50 پیکسل
}
}

حالا بیایید به کد نگاه کنیم. همه چیز با سند html مشخص است، ما می توانیم یک سبک جدید اضافه کنیم mediastyle.css. در شیوه نامه، ابتدا اندازه فونت را تعیین می کنید. در ادامه می گوییم اگر عرض صفحه (پنجره مرورگر) کمتر از 800 پیکسل باشد، قوانین زیر رعایت می شود و ابعاد همه بلوک ها در نماها با توجه به عرض پنجره تنظیم می شود. اگر عرض صفحه بزرگتر، کمتر از 800 پیکسل باشد، اندازه تمام بلوک ها را بر حسب پیکسل تنظیم می کنیم و محل قرارگیری را در امتداد مرکز صفحه برای مقدار توان اضافی تنظیم می کنیم. حاشیه: 0 خودکار;. در اینجا از بلوک های شناور برای موقعیت یابی استفاده می کنیم. اینجاست که با CSS پایان می دهیم. نمونه ای از صفحه ای که ایجاد کردیم را می توانید در اینجا پیدا کنید. می‌توانید شیوه نامه‌های آبشاری را از ادبیات مختلف و وب جهانی بیشتر بخوانید.

<<Предыдущая | В раздел

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

قدرت css برای تعیین ارتفاع و عرض بلوک.

پس از اتمام، بلوک بسته کننده کل فضای موجود را اشغال می کند و با عرض بلوک پدر احاطه می شود. ارتفاع بلوک به جای آن محاسبه می شود.

اندازه بلوک را می توان با قدرت ارتفاع و عرض تغییر داد.

نحوه تنظیم اندازه بلوک در CSS

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

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

1. حاشیه: 5pxsolidred;
2. padding: 10px;
3. عرض: 200 پیکسل

عرض بلوک 200px+10px*2+5px*2=230px

به جای اینکه سر خود را با محاسبات آزار دهید و همیشه دقیقاً اندازه بلوک را بدانید، قدرت اندازه گیری جعبه وجود دارد. سه معنا را می پذیرد.

1. content-box - مقادیر مشخص شده برای عرض و ارتفاع با هم جمع می شوند.
2. padding-box - مقادیر مشخص شده در عرض و ارتفاع نشان دهنده اندازه جعبه به علاوه اندازه بالشتک است.
3. border-box - مقادیر مشخص شده در عرض و ارتفاع به معنی اندازه با هم به اضافه بالشتک به اضافه حاشیه است

چگونه یک ردیف به باسن اضافه کنیم

اندازه بلوک 200px اعلام می‌شود و عرض آن به 200px-10px*2-5px*2=170px تغییر می‌کند.

حاشیه نحوه قرار دادن صحیح بین بلوک ها است.

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

شگفتی ها به همین جا ختم نمی شوند. اضافه کردن حاشیه به تصویر ما چنین نتیجه غیرمنتظره ای خواهد داشت.

نماد روی تصویر معنای بلوک پدری را نشان می دهد. بر خلاف ochіkuvannya حاشیه vikoristany به بلوک فرعی بدون فشار دادن جانور و زیر حصار پدر. معلوم شد که بلوک پدر چیزی برای نشان دادن ندارد. در چنین مواردی، حاشیه در خارج قرار می گیرد و از بلوک صندلی یا بین بلوک لایه بیرونی امتداد می یابد. برای اینکه بلوک مطابق با نیازهای پدر طراحی شود، بلوک پدر باید دارای padding یا حاشیه یا سرریز قدرت با هر مقدار قابل مشاهده باشد.

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

حاشیه می تواند مقادیر منفی داشته باشد. در این نوع، یک بلوک بر دیگری همپوشانی دارد. به این ترتیب یک بلوک به بلوک دیگر اختصاص داده می شود

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

,

,

قرار دادن یک عنصر بلوک در وسط دیگری و همچنین قرار دادن عناصر درج شده در وسط آنها مجاز است ( مثلا).

برای اضافه کردن وسط عناصر ساخته شده بلوک مسدود شده است (مثال 1).

مثال 1. عناصر بلوک Vykoristannya

کاربرد آن پاراگراف (برچسب

) در وسط ظرف قرار می گیرد

، و posilannya (برچسب ) - در عنوان

. قبل از سخنرانی، با کمی رحمت، امیدوارم در خرج کردن - اضافه کنید

y ظرف (

عاقلانه

)، برچسب قطعات عناصر بلوک را لمس نکنید.

تودرتو تگ های بلوک در وسط عناصر درج شده معمولی است، بلکه برای مبتدیانی که هنوز تفاوت بین آنها را درک نمی کنند.

قبل از آن، مرورگرها یاد گرفتند که این نوع خطاها را بگیرند و کد را کم و بیش درست نمایش دهند. نه کمتر، توصیه می شود برای نمایش بدون مشکل صفحه وب، مشخصات موجود در غذای خود را رعایت کنید.

عرض عناصر بلوک

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

اگر در کد سند یکی وجود داشته باشد، کل عرض پنجره مرورگر را اشغال می کند و عرض بلوک 100٪ است. وارتو جای یک تگ

در وسط دیگری، همانطور که عرض تگ داخلی شروع به محاسبه می شود، پدر، پس. ظرف خارجی

برخی از مرورگرها باید مفهوم عرض را متفاوت تفسیر کنند، اگرچه مشخصات CSS به وضوح بیان می‌کند که عرض مجموع پارامترهای زیر است: عرض خود بلوک (عرض)، حاشیه‌ها (حاشیه)، فیلدها (بالا) و مرز (حاشیه) ). شکل 2 ایجاد یک توپ را نشان می دهد که شامل تمام اجزا است.

لب به لب 2. عرض توپ

در نتیجه توپی با عرض 342 پیکسل گرفته می شود. در شکل شکل 1 نشان می دهد که چه چیزی عرض توپ را تشکیل می دهد.

شکل 1. عرض عنصر بلوک

اگه اون پسر مشکلی دارهاگر کد مشخص نشده باشد، مرورگر اینترنت اکسپلورر مقدار عرض را به عرض کل بلوک اختصاص می دهد.

بیایید نگاهی دیگر به عرض بافتنی بیاندازیم. عرض توپ روی خودکار تنظیم شده است که به شما امکان می دهد توپ را در پنجره مرورگر بدون تأثیر بر تنظیمات فیلدها قرار دهید. اگر عرض را به 100% تغییر دهید، وقتی مقدار ورودی ها، حاشیه ها یا بین آنها را اضافه می کنید، یک الگوی اسکرول افقی ناگزیر ظاهر می شود.

برای دستیابی به یک نتیجه جهانی، چندین رویکرد وجود دارد. شکل 3 ایجاد سه توپ را نشان می دهد که عرض آنها به صدها عدد تعیین شده است.

لب به لب 3. عرض توپ در صد

نتیجه باسن در شکل نشان داده شده است. 2.

کم اهمیت 2. نمایش عرض توپ ها در مرورگر

عرض توپ اول در این اپلیکیشن (لایه1) روی 100% تنظیم شده است که منجر به اسکرول افقی می شود. برای یک توپ دیگر (لایه 2)، عرض نیز روی 100٪ تنظیم شده است، اما حاشیه ها به پاراگراف داخلی (برچسب) اختصاص داده شده است.

). به همین دلیل عرض توپ در همه مرورگرها یکسان خواهد بود. تا توپ سوم (لایه 3) عرض قدرت تنظیم نشده است، بنابراین به حالت خودکار اختصاص داده می شود. در این شرایط، توپ تمام عرض پنجره مرورگر را بدون هیچ گونه تاری افقی اشغال می کند.

نحوه تنظیم عرض به چیدمان و انتخاب توسعه دهنده بستگی دارد، در غیر این صورت در هر صورت باید ویژگی های عناصر بلوک را در نظر گرفت و یک کد جهانی ایجاد کرد.

ارتفاع

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

ممکن است ارتفاع بر حسب پیکسل برای توپ تعیین شده باشد و در عوض توپ قطعاً ارتفاع مشخص شده را حرکت دهد (مثال 4).

باسن 4. ارتفاع توپ

نتیجه این باسن در شکل نشان داده شده است. 3.

کم اهمیت 3. ارتفاع بلوک در مرورگرهای مختلف

مشاهده می شود که مرورگر ارتفاع ثابت را حذف می کند، بنابراین متن در بلوک قرار نمی گیرد و در بالای توپ قرار می گیرد.

پس زمینه رنگی

ساده ترین راه برای تنظیم رنگ پس زمینه یک عنصر از طریق کنترل پس زمینه جهانی است. پس زمینه با ناحیه ای پر می شود که با مقادیر عرض، ارتفاع و لایه نشان داده شده است (شکل 4).

پارامترهای بلوک های CSS

ناحیه ای از توپ که با رنگ پس زمینه پر می شود

بنابراین، حاشیه در ناحیه رنگ قالب گیری شده شرکت نمی کند.

بین

با توجه به تفاوت در رویکردهای مرورگرها هنگام تشکیل عناصر بلوک، مراقب باشید که هنگام نمایش بین آنها از اعوجاج جلوگیری شود. مرورگر اینترنت اکسپلورر 7 یک فریم در وسط بلوک می کشد و فایرفاکس یک فریم در وسط می کشد. اگر پر کردن پس زمینه را انتخاب کنید، می توانید به راحتی تصویر را ایجاد کنید (شکل 5). و همه به این دلیل که فایرفاکس (Opera) رنگ پس زمینه را در امتداد مرز بیرونی و اینترنت اکسپلورر - در امتداد مرز داخلی تنظیم می کند. با شروع نسخه 8.0 اینترنت اکسپلورر، سبک نمایش قاب تغییر کرد تا مانند فایرفاکس در وسط بلوک قرار گیرد.

آ. اینترنت اکسپلورر 7

ب فایرفاکس، اینترنت اکسپلورر 8+

کم اهمیت 5. نمایش حاشیه در مرورگرها

ضمیمه 5 نحوه ایجاد یک کد برای حفظ چنین کوردونی را نشان می دهد.

لب به لب 5. قاب نقطه چین

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

خلاصه

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

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

Clearfix یک راه محبوب برای نمایش صحیح بلوک های شناور است که نیاز به استفاده از جدول برای کمک به چیدمان را از بین می برد. این نیاز زمانی ایجاد می‌شود که توجه داشته باشید که ارتفاع بلوک DIV پدر با حجم‌های پایین‌تر مطابقت ندارد. به عنوان مثال، شما چنین سازماندهی بلوک ها را در وب سایت خود برنامه ریزی کرده اید ( برای وضوح، بلوک پدر با رنگ روشن و بلوک دختر به رنگ سبز و قرمز نشان داده شده است.):

در نهایت ما سمت HTML زیر را نوشتیم:

DIV چپ

DIV درست است

و قبل از آن فایل سبک های CSS زیر:

Div-main ( حاشیه: 0 خودکار؛ بالشتک: 20 پیکسل؛ پس‌زمینه: #eeee33؛ عرض: 320 پیکسل؛ ) .div-left ( پد: 20 پیکسل؛ پس‌زمینه: #339933؛ شناور: سمت چپ؛ عرض: 100 پیکسل؛ ) .-div ( بالشتک: 20 پیکسل؛ پس زمینه: #cc0033؛ شناور: سمت راست؛ عرض: 100 پیکسل؛ )

با این حال، در واقعیت این تصویر را می بینید:

Batkovsky DIV شرکت های تابعه را شامل نمی شود. با توجه به ارتفاع بلوک هایی که قبل از بلوک بعدی وارد می شوند کشیده نمی شود. و در اینجا هیچ مصالحه ای وجود ندارد، فقط بلوک های شناور (قدرت FLOAT) در بالای صفحه استفاده می شود. عناصر شناور در اطراف جریان می چرخند و زمینه ای قدرتمند در بین خود ایجاد می کنند. با چنین جریان هوا، بوی بد در اندازه رشد نمی کند. و برای اینکه Father's DIV از اندازه و کشش آنها مراقبت کند، یک ترفند کوچک لازم است.

دو راه برای افزایش اندازه DIV پدر به جای بلوک هایی که قبل از بعدی قرار می گیرند.

قبلاً یک بلوک اضافی قبل از برچسب Father's DIV ایجاد کرده بودم که بسته می شود:

بنابراین، ظاهر فعلی صفحه مطابق با آنچه برنامه ریزی شده است:

راه دیگری برای کشیده شدن دیو پدر در امتداد ارتفاع کودک.

می‌توانید با استفاده از کلاس شبه بعد، ظرفی ایجاد کنید که «خود تمیز شونده» باشد:

Clear-fix:before, .clear-fix:after ( content: " "; display: table; ) .clear-fix:after (clear: هر دو؛ ) /* Police for a donkey (Internet Explorer 6 and 7) */ . رفع روشن (*زوم: 1; )

و به بلوک پدری یک کلاس ویژه داده می شود:

ظاهر خارجی صفحه با طراحی چیدمان مطابقت دارد:

راه هایی برای انجام کارهای خوب وجود دارد. І به شما امکان می دهد مشکل بلوک های شناور را حل کنید، به طوری که DIV پدر به جای فرزندانش در ارتفاع کشیده شود.

ظاهراً یک طراح وب، چیدمان سایت را نقاشی می کند و یک طراح صفحه، چیدمان را انجام می دهد، بنابراین شما بنویسید. HTML/CSSکد و روی چه چیزی می نویسی HTMLسمت؟ تمام عناصر طرح طراحی در بلوک ها قرار می گیرند.

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

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

بیایید نگاهی از بلوک باسن بیندازیم بخش، زروبیمو HTMLعلامت گذاری.

رفتار بلوک ها بر اساس ارتفاع

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

بدن (
پس زمینه: #d5d5d5;
}

دیو (
پس زمینه: #d56287;
ارتفاع: 100 پیکسل؛
}

ارتفاع را روی 100 پیکسل و رنگ پس‌زمینه تنظیم کنید تا رنگ پس‌زمینه صفحه و بلوک متفاوت باشد، در غیر این صورت کار دیگری نمی‌توانیم انجام دهیم.

رفتار بلوک ها با محتوا

قد می گیریم ارتفاعاین متن را در وسط بلوک درج می کند.

دیو (
پس زمینه: #d56287;
}

می‌دانیم که ارتفاع بلوک تغییر می‌کند، بنابراین محتوای زیادی برای ذخیره‌سازی وجود دارد. چرا اینقدر هیجان زده ای؟ پشت دیوارها ارتفاع بلوک مانند قبل است خودکاراین به طور خودکار با ارتفاع محتوای قرض گرفته شده در بلوک پدر تنظیم می شود.

اولویت ها را مسدود کنید

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

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

گرفتن یونجه همراه با بلوک

لطفا اضافه کنید تا CSSکد vlastivst سرریز: پنهان

دیو (
پس زمینه: #d56287;
ارتفاع: 100 پیکسل؛
سرریز: پنهان;
}

هر چیزی که در بلوک جا نمی‌شود دور ریخته می‌شود، تقریباً گویی متن به طرز ناخوشایندی بریده شده است.

اگر نیاز دارید که بلوک را به طور کلی نمایش دهید، می توانید اسکرول کنید، سپس یک جایگزین برای بلوک تعیین کنید پنهان شده است.

سرریز: اسکرول;

در عمل، هنگام ویریونینگ می‌تواند مفید باشد به طوری که تمام بلوک‌هایی که در یک ردیف قرار می‌گیرند دارای ارتفاع یکسانی باشند یا به طوری که محتوا به صورت پویا بدون شکستن طراحی سایت نمایش داده شود.

رفتار بلوک ها بر اساس عرض

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

دیو (
پس زمینه: #d56287;
ارتفاع: 100 پیکسل؛
عرض: 200 پیکسل؛
}

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

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

پس چگونه می توانیم آنها را در یک ردیف کنار هم قرار دهیم؟ لازم است آنها را با عناصر row-block ایجاد کنید و سپس آنها به طور معجزه آسایی در یک ردیف قرار می گیرند. بلوک پوست باید قدرت داده شود.

نمایشگر: inline-block;

ارتفاع و عرض بلوک را می توان در واحدهای بلبرینگ مشخص کرد، به عنوان مثال ٪. لازم است اطمینان حاصل شود که ابعاد بلوک های فرزند به عنوان پدر و همان پدر برای بلوک تنظیم شده است. بخشاراده بدن.

من به شما کمک می کنم از تئوری به عمل بروید و اولین وب سایت خود را راه اندازی کنید.