CSS билмейинче өзгөчөлүктөрүнүн бири болуп саналат CSS бокс үлгүсү . Бул өтмө мүлк HTML элементке бардык төрт тарабын курчаган, төшөмө менен белгилейт. CSS билмейинче, дээрлик ар бир колдонулушу мүмкүн HTML тег (стол Tags айрым кошпогондо). Андан тышкары, элементтин төрт тарап ар кандай мааниге ээ болот.
CSS Padding менчик
өтмө CSS билмейинче, мүлктү колдонуу үчүн, мнемоникалык "кыйынчылык" (же "TRiBbLe" Сен Star Trek күйөрмандары үчүн) пайдалана аласыз. Бул жогору көрөрүн, оң, төмөнкү, сол жана ал өтмө мүлк коюлган билмейинче көлөмдөгү тартиби билдирет. Мисалы:
толтургучтар: жогорку оң төмөнкү сол; толтургучтар: 1px 2px 3px 6px;Жогоруда саналып өткөн пайдаланылган болсо, анда сиз кандай HTML элемент ар тарапка колдонуп жаткан башка билмейинче, колдонуп келет. Эгер бардык төрт тарабын ошол эле толтургуч колдонуу керек болсо, анда сиз CSS жөнөкөйлөтүү жана бир эле маанини жаза аласыз:
толтуруу: 12px;CSS ошол сызык менен, толтургучтар 12 пиксел элементтин 4 тараптардын тиешелүү.
Сен жакшы билмейинче, үстү жана асты, сол жана оң үчүн бирдей болушу керек болсо, анда эки баалуулуктарды жазууга болот:
толтуруу: 24px 48px;Биринчи мааниси (24px) экинчи жана сол колдонулат, ал эми, жогору жана төмөн тиешелүү.
Эгер сиз үч баалуулуктарын жазып, анда бул үстүнөн жана алдынан өзгөрүп, ал эми горизонталдык толтургуч (сол жана оң) бир эле болот:
толтургучтар: жогорку оң жана сол жак; толтургучтар: 0px 1px 3px;CSS бокс үлгүсү боюнча, толтургучтар элемент / мазмундун өзү жакын. Бул жакшы билмейинче, мазмуну туурасы бийиктиги жана сиз колдонгон бардык чек ара баалуулуктар ортосунда бир элемент кошулат дегенди билдирет. толтургучтар нөлгө коюлса, анда ал мазмуну эле масштабга ээ.
CSS Padding баалары
CSS билмейинче эч кандай эмес терс узундугу мааниси кабыл алынышы мүмкүн. Мындай пкс же каз деп, ченемди тактоо керек. Сиз ошондой эле элементтин камтыган блогунун туурасы бир пайыздык болот сенин толтургучтар бир пайызын, көрсөтүүгө болот. Бул жогорку жана төмөнкү толтургучтар үчүн камтыйт. Мисалы:
#container {туурасы: 800px; бийиктиги: 200px; } #container б {туурасы: 400px; бийиктиги: 75%; толтургучтар: 25% 0; }#container элементтин ичинде пунктунун бийиктиги #container .Ал бийиктиги 75% плюс жогорку толтургучтар үчүн, туурасы 25% жана төмөнкү толтургучтар үчүн, туурасы 25% түзөт. Бул түзгөн 300 + 200 + 200 = 700px.
Кошуу CSS толтургучтар тууралуу Effects
On блок-даражадагы элементтер , толтургучтар төрт тарапта колдонулат. элемент мурунтан блок же куту болгондуктан, толтургучтар кутуча тараптын колдонулат.
CSS билмейинче кошулуп жатканда элементтерди киргизилген , ошондой эле тигинен жайгаштырылган толтургучтар линия бийиктиктен жогору болсо, жогоруда көрсөтүлгөн элементтердин жана киргизилген элементи төмөндө айрым кайчы болушу мүмкүн, бирок ал жерден сап бийиктигин түртүп эмес. киргизилген элементтери колдонулат Horizontal CSS билмейинче, элементтин башында жана элементтин аягына чейин кошулуп берилет. Жана толтургучтар линиясын ороп алат. Бирок, көп-линия элементи бардык багыттарын тиешеси жок болот, ошондуктан көп-сап сап контенттин сегментти Чегинүүсү толтургуч колдоно албайт.
Ошондой эле, CSS2.1 сиз туурасы көлөмдөгү (же билмейинче көлөмдөгү) боюнча пайыздык менен элементке көз каранды жерде контейнер блокторду түзүү мүмкүн эмес. Эгер жыйынтыгы белгисиз болуп саналат. Колдонуучулар дагы мазмунун көрсөтүүгө болот, бирок сиз күтүп жаткан натыйжаларды мүмкүн эмес. Сиз бул тууралуу кандай пикирдесиз болсо, анда ал бир алдын-ала аныкталган туурасын жок болсо, анда сиздин контейнер элемент туурасы сыяктуу аныктоо үчүн анын бала элементтердин туурасын билиши керек эле, мааниси, жана бир же бир нече бар контейнер элементтин пайыз катары белгиленген бир, туурасы, бул эч кандай жооп менен тегерек чынжырын орнотот. Эгер документ боюнча эч кандай көлөмдөгү үчүн пайыздарды колдонгон болсо, анда ата-элемент инигма да аныкталат экендигине ишенимде болууга тийиш.