Съдържание
- Деликатните предмети отгоре
- Прилежно опаковани тениски
- Чорапите, които запълват празнините
- Бон пътуване
Полунощ е, и то тази div на вашия сайт все още изглежда като детска ракла за играчки. Всички елементи са бъркана бъркотия и всеки път, когато играете с CSS дисплей собственост, те се пренареждат в съвсем различна глупост.
Ако сте като мен, вероятно ще разрешите това, като мърморите под носа си и ставате постоянно по-агресивни с клавиатурата си. И въпреки че тази стратегия е работила за мен и преди, наскоро се заех да намеря по-добър начин да разбера дисплей Имот.
Оказва се основите на дисплей са много по-прости, отколкото първоначално си мислех. Всъщност те използват същите принципи като опаковането на куфар. Ще покрия дисплей: блок, вграден блок и в редица. Ако и преди сте подреждали куфар по подреден начин, ще видите паралела. Ако сте от хората, които хаотично избиват цялото ви облекло - е, има само толкова много, което мога да направя за вас.
Нашият куфар ще съдържа три вида дрехи:
- Деликатни, като риза с яка
- Тениски, които могат да се навиват
- Чорапи или бельо, които могат да се натъпкат в пролуки
За справка, ако моделирахме куфара в HTML, той ще изглежда така:
div class = 'suitcase'> 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 елементи. Това означава, че елементът заема цялото хоризонтално пространство в контейнера си div. Ако е до други елементи на брат или сестра, той ще започне нов ред и няма да позволи други елементи на неговата линия. Подобно е на деликатните предмети, които поставяте в горната част на куфара си. Това са деликатни или умни артикули като ризи с яка. Не искате те да се набръчкат, затова се уверете, че те не са притиснати към други парчета дрехи.
Това извежда една от най-трудните части на дисплей: блок. Забележете как ризата с яка не заема цялата ширина на куфара? Това не означава, че други елементи ще скочат до нивото си. Да приемем, че тази риза е 60 процента от ширината на куфара; все пак ще блокира други елементи да се присъединят към него на най-високото ниво.
Ето защо на снимката има оранжева граница. A дисплей: блок елемент автоматично ще добави поле около него, ако не заема цялото хоризонтално пространство.
Прилежно опаковани тениски
По-голямата част от куфара ви вероятно е пълна с останалата част от дрехите ви за пътуване. За по-голяма простота ще намалим това само на тениски. В интернет има голям дебат дали сгъването или валцуването е по-ефективно. Аз съм сгъваем човек.
Както и да е, за да поберете най-много артикули, подреждате тениските си една до друга. Това е точно това дисплей: вграден блок е предназначен за. Тези елементи могат да седят един до друг на една и съща линия, както и до дисплей: вграден елементи.
За разлика от дисплей: вграден елементи, an вграден блок елемент ще се премести на следващия ред, ако не се побира в съдържащата го div редом с другия вграден блок елементи. За да се разлее тениска на следващия ред, ще трябва да я срежете наполовина и да използвате останалата половина, за да започнете нов ред. Вграден блок елементите нямат право да се разделят наполовина, ако не се побират на линия.
Чорапите, които запълват празнините
Проверете обратно към оригиналния HTML и ще забележите, че има един чорап div> между осемте тениски. Но погледнете хоризонталния изглед на куфара вдясно. Ако има един чорап div>, как може да завърши средния ред и да започне долния ред? Това е целта на дисплей: вграден!
An в редица елемент ще се разлее на следващия ред, ако надвишава ширината на div (по този начин се различава от вграден блок или блок). Тъй като нашите чорапи div е пълен с чорапи, които са случайно натъпкани в пролуки, той може лесно да започне да запълва празнината от дясната страна на средния ред и да се разлее, за да започне долния ред.
За да се случи, няма да е необходимо да намалите наполовина чорапи. Ето защо те могат да станат в редица, докато тениските могат да бъдат само вграден блок. Ако тениските на средния ред заемаха само 60 процента от ширината, чорапите div> ще се премести нагоре, за да запълни цялото пространство в останалата част от реда.
Бон пътуване
Това е последният CSS за нашия куфар:
.delicate {display: block; ширина: 60%; } .tshirt {дисплей: вграден блок; ширина: 20%; }. чорапи {дисплей: вграден; }
Ето няколко алтернативни сценария, които илюстрират различните приложения на дисплея. Ако деликатесите отгоре имаха дисплей: вграден блок, те биха паснали точно до тениските. Някои от тениските ще се придвижат нагоре до горната линия, а останалите ще се коригират съответно. Нямаше да има удобен буфер отляво и отдясно на ризата с яка.
Ако всяка тениска имаше дисплей-блок, ще имате масивен куп тениски една върху друга, по една на ред. Ако чорапите имаха дисплей: вграден блок, всички те биха седнали на най-долния ред, вместо да текат между двата реда. Някои тениски щяха да бъдат избутани на друг ред, образувайки четвърти ред. Щеше да има празнина вдясно от средния ред тениски.
С метода, който описах тук, се оказваме с добре опакован куфар, който използва най-добре наличното пространство.
Тази статия първоначално се появи в нетно списание брой 289; купете го тук!
