Задаволены
- Далікатныя прадметы зверху
- Акуратна спакаваныя футболкі
- Шкарпэткі, якія запаўняюць прабелы
- У добры шлях
Зараз поўнач, і тая самая дзів на вашым сайце па-ранейшаму падобна на дзіцячы цацачны куфар. Усе элементы пераблытаны, і кожны раз, калі вы гуляеце з CSS дысплей уласнасці, яны перастаўляюць сябе ў зусім іншую лухту.
Калі вы падобныя на мяне, вы, верагодна, вырашыце гэта, мармычучы сабе пад нос і становячыся ўсё больш агрэсіўнымі з дапамогай клавіятуры. І хоць гэтая стратэгія працавала для мяне раней, нядаўна я вырашыў знайсці лепшы спосаб зразумець яе дысплей маёмасць.
Аказваецца, асновы дысплей значна прасцейшыя, чым я думаў першапачаткова. На самай справе яны выкарыстоўваюць тыя ж прынцыпы, што і ўпакоўка чамадана. Я збіраюся пакрыць дысплей: блок, убудаваны блок і у радку. Калі вы раней упарадкавалі чамадан, вы ўбачыце паралель. Калі вы такі чалавек, які бязладна ўтрамбоўвае ўсю вашу вопратку - ну, я магу зрабіць для вас толькі так шмат.
У нашым чамадане будзе тры віды адзення:
- Далікатныя, як кашуля з каўняром
- Футболкі, якія можна закатаць
- Шкарпэткі або бялізну, якія можна заправіць у шчыліны
Для даведкі, калі мы змадэлявалі чамадан у HTML, ён выглядаў бы так:
div class = 'чемодан'> div class = 'чувствительный'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
Далікатныя прадметы зверху
Дысплей: блок з'яўляецца стандартным для большасці элементаў HTML. Гэта азначае, што элемент займае ўсю гарызантальную прастору ў сваім кантэйнеры дзів. Калі ён знаходзіцца побач з іншымі элементамі брата, ён пачне новы радок і не дазволіць іншыя элементы на сваёй лініі. Гэта падобна на далікатныя прадметы, якія вы паклалі ў верх чамадана. Гэта далікатныя ці разумныя артыкулы, такія як кашулі з каўняром. Вы не хочаце, каб яны маршчыніліся, таму пераканайцеся, што яны не прыціскаюцца да іншых прадметаў адзення.
Тут узнікае адна з самых складаных частак дысплей: блок. Звярніце ўвагу, як кашуля з каўняром не займае ўсю шырыню чамадана? Гэта не азначае, што іншыя прадметы падскочаць да свайго ўзроўню. Скажам, гэтая кашуля складае 60 адсоткаў шырыні чамадана; ён па-ранейшаму будзе заблакаваць далучэнне іншых элементаў да яго на вышэйшым узроўні.
Таму на малюнку аранжавая аблямоўка. А дысплей: блок элемент аўтаматычна дадасць поле вакол яго, калі ён не займае ўсю гарызантальную прастору.
Акуратна спакаваныя футболкі
Большая частка вашай валізкі, напэўна, поўная астатняй адзення для паездкі. Дзеля прастаты мы збіраемся скараціць гэта толькі да футболак. У Інтэрнэце вядуцца вялікія спрэчкі наконт таго, ці складанне альбо катанне больш эфектыўныя. Я складаны чалавек.
У любым выпадку, каб змясціць большасць прадметаў, вы падбіваеце футболкі побач. Гэта менавіта тое, што дысплей: убудаваны блок прызначана для. Гэтыя элементы могуць сядзець побач на адной лініі, а таксама побач дысплей: убудаваны элементаў.
У адрозненне дысплей: убудаваны элементы, ан убудаваны блок элемент перамесціцца на наступны радок, калі ён не змяшчаецца ў сваім змесціве дзів побач з другім убудаваны блок элементаў. Для таго, каб футболка разлілася на наступны шэраг, вам трэба будзе разрэзаць яе напалову і выкарыстаць астатнюю палову, каб пачаць новы шэраг. Убудаваны блок элементы не дазваляюць дзяліць напалову, калі яны не адпавядаюць лініі.
Шкарпэткі, якія запаўняюць прабелы
Вярніцеся да зыходнага HTML, і вы заўважыце, што ёсць адзін шкарпэтка div> паміж васьмю майкамі. Але зірніце на гарызантальны выгляд чамадана справа. Калі ёсць адна шкарпэтка div>, як можна скончыць сярэдні шэраг і пачаць ніжні шэраг? Гэта мэта дысплей: убудаваны!
Ан у радку элемент перакінецца на наступны радок, калі ён перавышае шырыню дзів (гэтым чынам ён адрозніваецца ад убудаваны блок альбо блок). Так як нашы шкарпэткі дзів поўны шкарпэтак, якія выпадкова набіваюцца ў шчыліны, ён можа лёгка пачаць запаўняць шчыліну з правага боку сярэдняга шэрагу і пераліцца, каб пачаць ніжні шэраг.
Каб гэта адбылося, не трэба будзе разразаць напалову шкарпэткі. Вось чаму яны могуць стаць у радку, у той час як футболкі могуць быць толькі убудаваны блок. Калі футболкі на сярэднім шэрагу займалі толькі 60 адсоткаў шырыні, шкарпэткі div> будзе рухацца ўверх, каб запоўніць усю прастору ў астатняй частцы радка.
У добры шлях
Гэта апошні CSS для нашага чамадана:
.delicate {display: block; шырыня: 60%; } .tshirt {адлюстраванне: убудаваны блок; шырыня: 20%; } .шкарпэткі {дысплей: убудаваны; }
Вось некалькі альтэрнатыўных сцэнарыяў для ілюстрацыі розных відаў выкарыстання дысплея. Калі б далікатныя зверху мелі дысплей: убудаваны блок, яны падыдуць побач з футболкамі. Частка футболак будзе рухацца да верхняй лініі, а астатнія будуць карэктавацца адпаведна. Злева і справа ад каўняра з каўняром не было б зручнага буфера.
Калі б кожная футболка была дысплей-блок, у вас будзе масіўны стос футболак адзін на аднаго, па адным на радок. Калі б шкарпэткі мелі дысплей: убудаваны блок, усе яны сядзелі б на ніжнім шэрагу, а не цяклі паміж двума радамі. Некаторыя футболкі будуць перамешчаны на іншы шэраг, утвараючы чацвёрты радок. Справа ад сярэдняга шэрагу футболак будзе разрыў.
З дапамогай метаду, які я тут апісаў, у нас атрымліваецца акуратна спакаваны чамадан, які найбольш эфектыўна выкарыстоўвае наяўную плошчу.
Гэты артыкул першапачаткова з'явіўся ў сеткавы часопіс выпуск 289; купіце яго тут!
