HTML блокове и техните css свойства, Web On Life
Изглежда, че е трудно да се гримираме. HTML и CSS дори не са езици за програмиране. HTML страницата е просто блокове, поставени на правилното място. Всъщност всичко не е толкова просто. Да седите на оформлението, без да разбирате нюансите на блоковия модел, означава да губите много време за коригиране на резултатите на случаен принцип, всеки път да бъдете изненадани от неочаквани резултати или тяхната липса. В строителството на обекти, както и в строителството, ако искате да изградите нещо по-сериозно от ограда, трябва да знаете тънкостите.
css свойства за определяне на височината и ширината на блока.
По подразбиране ширината на кутията заема цялото налично пространство и е ограничена от ширината на родителската кутия. Височината на блока се определя от съдържанието му.
Блокът може да бъде преоразмерен с помощта на свойствата за височина и ширина. Тези свойства се задават не за целия блок, а за неговото съдържание. Това трябва да се помни, защото в допълнение към съдържанието още две свойства влияят върху размера на блока - граница и подложка. От името можете да разберете, че границата определя границата. На снимката границата е маркирана с червена линия. Пространството между границата и съдържанието се определя с помощта на свойството padding. Ако не го зададете, тогава текстът на снимката по-долу ще бъде притиснат близо до границата.
По този начин, когато се изчислява размерът на блока, в допълнение към ширината и височината, трябва да се вземат предвид подложката и границата. Например, нека изчислим размера на блока, за който са дадени следните стойности
Ширина на блока 200px+10px*2+5px*2=230px
За да не се занимавате с аритметика и винаги да знаете точно размера на блока, има свойството box-sizing. Приема три стойности.
- content-box - Стойностите, дадени като ширина и височина, се отнасят само за съдържанието.
- padding-box - Стойността, дадена като ширина и височина, определя размера на съдържанието плюс размераподплата.
- border-box - Стойностите, дадени като ширина и височина, определят размера на съдържанието плюс подложката плюс границата
Ако в примера по-горе добавете реда
размерът на блока ще бъде декларираните 200px, а ширината на съдържанието ще бъде намалена до 200px-10px*2-5px*2=170px.
марж как правилно да зададете разстоянието между блоковете.
Би било погрешно да се говори за блокове и да не се споменава маржин, особено след като има какво да се каже. За тези, които не знаят, полето определя свободното пространство около кутията. За разлика от подложката, тук всичко не е толкова очевидно. Помислете за два блока, един вложен в друг. Задайте границата на вложен блок: 10%. Веднага възниква въпросът от какво да броим тези проценти. Процентът се взема от ширината на родителския елемент. Няма значение дали дефинираме хоризонтални или вертикални отстъпи. Отговорът, честно казано, не е очевиден, но ако погледнете обясненията, става ясно защо е избрана тази опция.
Изненадите не свършват дотук. марж, добавен към нашето изображение, ще даде такъв неочакван резултат.
Родителският блок е показан в сиво на снимката. Противно на нашите очаквания маржът, приложен към дъщерния блок, не разширява горната и долната граница на родителя. Това се случи, защото родителският блок няма върху какво да се надгражда. В такива случаи маржът се избутва навън и се отблъсква от съседния блок или границите на блока, разположен едно ниво по-горе. За да може блокът да бъде отблъснат от родителския блок, родителският блок трябва да има подложка или граница или свойството за препълване да е зададено на всяка стойност, различна от видимата.
Друга характеристика на отстъпа е свиването. Въпросът е, че ако два съседни елемента имат набор от граници, тогава разстоянието между тях ще бъде равно на най-голямата стойност.
марж можеприемат отрицателни стойности. В този случай единият блок ще се припокрива с другия. Степента, до която един блок обхожда друг, се определя от
- Ако и двете граници са отрицателни, тогава се взема голяма модулна стойност
- Ако един марж е отрицателен, а другият е положителен, тогава те се сумират.
Член на
ср., 17.12.2014 г. - 20:22 ч
Длъжен съм някога
Някой ден определено ще се науча как да направя уебсайт от нулата. Разбирам много, не разбирам. Трябва да разбера всичко, защото нито една тема не ми пасва напълно. Сега проблемът е как да направите сайта си гумен. Между другото, прочетох за всички тези отстъпи: вие също трябва да можете да зададете параметри, така че всички браузъри да показват всичко еднакво. Освен това трикът е все същият.
Член на
ср., 17.12.2014 г. - 21:15 ч