Mustaqil ish mavzu: Shablonlar shabloni: qo‘shma shablonlar Bajardi

li><a href="#">Menu 4a>li>
<li><a href="#">Menu 5a>li>
ul>

Keling, ba'zi CSS qo‘shamiz, jumladan. Ruxsat etilgan menyu kengligi 500 piksel va har bir element kengligi 100 piksel:


nav {
width: 500px;
margin: 50px auto 0;
height: 50px;
}
nav ul {
padding: 0;
margin: 0;
}
nav li {
float: left;
}
nav a {
display: inline-block;
width: 100px;
height: 100%;
background-color: #ccc;
color: #555;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 12pt;
line-height: 300%;
text-align: center;
}
nav a {
display: inline-block;
width: 100px;
height: 100%;
color: #555;
text-decoration: none;
font-family: Arial, sans-serif;
}
nav li:nth-child(1) a {
background-color: #E9E9E9;
border-left: 0;
}
nav li:nth-child(2) a {
background-color: #E4E4E4;
}
nav li:nth-child(3) a {
background-color: #DFDFDF;
}
nav li:nth-child(4) a {
background-color: #D9D9D9;
}
nav li:nth-child(5) a {
background-color: #D4D4D4;
border-right: 0;
}


Menyu yaxshi ko‘rinadi:

{ Box-sizing: Border-box } FTW

CSS bilan maketning eng yoqmagan qismlaridan biri bu kenglik va to‘ldirish o‘rtasidagi bog'liqlikdir. Siz katak yoki umumiy ustun nisbatlariga mos keladigan kengliklarni belgilash bilan bandsiz, so‘ngra matnga qo‘shishni boshlagan satrdan pastga qarab o‘sha qutilar uchun to‘ldirishni belgilashni talab qiladi. Va mana, endi siz asl kengligingizdan piksellarni ayiryapsiz, shunda quti kengaymaydi.
CSS bo‘yicha tavsiyalar:

1 2 3 4 5 6 7	/* apply a natural box layout model to all elements, but allowing components to change */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

2014-yilning avgust oyi yangilanishi: Ushbu kod yangi quti oʻlchami boʻyicha eng yaxshi amaliyotlarga mos kelishi uchun yangilandi. Bundan tashqari, prefikslar juda o‘lik .
Bu sizga kerakli quti modelini beradi. Uni barcha elementlarga qo‘llaydi. Ma'lum bo‘lishicha, ko‘plab brauzerlar allaqachon ko‘plab shakl elementlari uchun border-box dan foydalanadi (shuning uchun kiritishlar va matn maydonlari kengligi jihatidan farq qiladi:100%;) Lekin buni barcha elementlarga qo‘llash xavfsiz va oqilona.

Brauzerni qo‘llab-quvvatlash

Brauzer qo‘llab-quvvatlashi tufayli ushbu tavsiya faqat IE8 va undan yuqori versiyalarni qo‘llab-quvvatlaydigan loyihalar uchun mo‘ljallangan. ( MDN da toʻliq brauzer mos keladi ) Firefox <= 28 hali ham prefiksga muhtoj-moz- va <= iOS4, Android <= 2.3 ga kerak -webkit-, lekin hamma boshqa prefikssiz foydalanadi. IE6 va 7 uchun quti oʻlchamli polifill haqida koʻproq maʼlumotni html5please.com/#box-sizing sahifasida topishingiz mumkin (bu ! bilan ishlab chiqilgan * { box-sizing: border-box).

Foydalanish xavsizligi

 jQuery u bilan juda yaxshi ishlaydi ( bundan tashqari ) . Yuqorida aytib o‘tilganidek, brauzerni qo‘llab-quvvatlash juda yaxshi. Va bir qator loyihalar sukut bo‘yicha ushbu tartib modelidan foydalanadi, jumladan WebKit Web Inspector (aka Chrome DevTools). Gollandiyalik ishlab chiquvchi Yathura Thornning tajribasi quyidagicha keltirilgan:
*{box-sizing: border-box;}Taxminan bir yildan beri biz loyihalarimdan birida (ishlab chiqarishda qo‘llanilgan, oyiga o‘rtacha 1 million tashrif buyurgan) ishda foydalanmoqdamiz va u yaxshi davom etayotganga o‘xshaydi. Loyiha IE8 va 9 va Firefox va Chrome so‘nggi versiyalarida sinovdan o‘tkazildi va bizda hech qanday muammo yo‘q. Barcha jQuery (+UI) ofset hisob-kitoblari va animatsiyalari, hatto biz inline-blok sifatida ko‘rsatgan har qanday elementda ham yaxshi ishlaydi. So‘nggi paytlarda biz loyihani mobil qurilmalarda (iPhone, iPad va Android) sinovdan o‘tkazishni boshladik va ularning birortasi bilan quti o‘lchami bilan bog‘liq muammolarga duch kelmadik, shuning uchun u juda yaxshi ishlayotganga o‘xshaydi.
Chegara qutisi yaxshi hal qiladigan eng sevimli foydalanish holatlarimdan biri bu ustunlar. Men tarmoqni 50% yoki 20% ustunlar bilan ajratishni xohlayman, lekin paddingpx yoki em orqali qo‘shishni xohlayman. Kelgusi CSS bo‘lmasa, calc()bu mumkin emas ... chegara qutisidan foydalanmaguningizcha. Juda oson. :) Yana bir yaxshisi, 100% kenglikni qo‘llash va keyin bu elementga to‘ldirishni qo‘shishni xohlaydi.

Ishlash

Nihoyat , @miketaylr ning so‘rovi bo‘yicha men ham perf yukini sinab ko‘rdim. Anekdot dalillar chegara qutisi ahamiyatli emasligini ko‘rsatadi.
Siz universal selektor haqida qurollanishingiz mumkin *.
Ko‘rinib turibdiki, siz uning sekinligini eshitgansiz. Birinchidan, unday emas. U selektor kabi tezdir h1. kabi maxsus foydalansangiz, u sekin bo‘lishi mumkin .foo > *, shuning uchun buni qilmang. Bundan tashqari, barcha javascriptlaringizni birlashtirmaguningizcha, uni pastki qismida joylashtirmaguningizcha, CSS va JS-ni kichiklashtirmaguningizcha, barcha aktivlaringizni gzip-ga tushirmaguningizcha va barcha tasvirlaringizni yo‘qotishsiz siqmasangiz, * ning ishlashi haqida qayg'urishingizga ruxsat berilmaydi. Agar siz 90+ Page Speed ​​ball olmagan boʻlsangiz, selektorni optimallashtirish haqida oʻylashga hali erta. Shuningdek qarang: CSS selektorining ishlashi o‘zgardi! (Yaxshisi uchun) Nikol Sallivan tomonidan.
Shunday qilib... rohatlaning va bu yanada tabiiyroq maket modelini topasiz degan umiddamiz.
Har qanday uchinchi tomon vidjetlari to‘g'ridan-to‘g'ri sahifaga kontent qo‘shishi uchun qo‘shimcha e'tibor talab qilinishi mumkin. Iframe ichidagi har qanday vidjetlar (masalan, Disqusning yangi mavzusi) asosiy sahifaning tartib uslublaridan tabiiy ravishda izolyatsiya qilingan. Agar siz uchinchi tomon kontentiga o‘zgartirishlar kiritishingiz kerak bo‘lsa, box-sizing: content-box;vidjet va uning avlodlariga murojaat qilishingiz mumkin. Bu ahamiyatsiz bo‘lmasligi mumkin, chunki, ayniqsa, forma boshqaruvlari sukut bo‘yicha chegara qutisi, shuning uchun siz ham buni hisobga olishingiz kerak bo‘ladi.
Veb-kitning prefiksli xususiyati va 100% kenglikdagi boxining foydalanish joyi kiritilgan.
2012.02.22: Jeff Kaufmanning tarix sahifasiga havola qo‘shildi.
2013.07.22: kod namunasi yaratilgan kontentdan oldin/keyin yangilandi. thx snugug va erik j duran. 2014.08.24: Jon Neal va Chris Coyier tadqiqoti
asosida tuzatilgan kod .


Lekin chap yoki o‘ng chegara qo‘shganda, oxirgi menyu elementi mos kelmagani uchun siljiydi:


nav a {
border-left: 1px solid #aaa;
border-right: 1px solid #f3f3f3;
}

Ammo agar siz box o‘lchamidan foydalansangiz, unda bu muammo yo‘q:

nav a {
border-left: 1px solid #aaa;
border-right: 1px solid #f3f3f3;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}


Xususiyat box-sizing elementning kengligi va balandligini hisoblash algoritmini o‘zgartirish uchun ishlatiladi.
widthCSS spetsifikatsiyasiga ko‘ra, blokning kengligi kontent kengligi ( ), to‘ldirish ( margin), chekka ( padding) va chegara yig'indisidir border. Xuddi shu narsa blok balandligi uchun ham amal qiladi. Xususiyat box-sizingsizga ushbu algoritmni o‘zgartirishga imkon beradi, shunda xususiyatlar width va heightblokning o‘lchamini o‘rnatadi, mazmunini emas.
Namoyish¶

Qiymatlar¶
content-box
CSS standartlariga asoslanib, widthva xususiyatlari heightkontentning kengligi va balandligini o‘rnatadi va to‘ldirish, chekka yoki chegaralarni o‘z ichiga olmaydi.
border-box
widthva xususiyatlari heightmargin ( padding) va chegara ( border) qiymatlarini o‘z ichiga oladi, lekin to‘ldirishni emas ( margin).
Eslatmalar¶
29-versiyasidan oldingi Firefox -moz-box-sizing.
5.0 dan oldingi Safari, 10.0 dan oldingi Chrome, 4.0 dan oldingi Android -webkit-box-sizing.
Birlamchi qiymat:
box-sizing: content-box;
Barcha elementlar uchun amal qiladi
Texnik xususiyatlari¶

• 
  CSS asosiy foydalanuvchi interfeysi moduli 3-darajali