Съдържание
Уеб браузъри като Firefox, Chrome, Safari, Opera и др. Всички тях следвайте правилата за това как да преоразмерите елементите в зависимост от потока и оформлението на страницатаМоже би тези правила могат да бъдат много подробни, но това ни позволява да уточним как трябва да се третират елементите, така че размерите винаги да се поддържат пропорционално на това, което искаме от тях.Свойства на размера
Има някои свойства на размера, които ни позволяват да кажем на браузъра как трябва да тълкува нашите елементи, нека да видим списък с тях, преди да отидем в приложението им:
Ширина, височина: Те конфигурират ширината и височината на елемент, стойностите, които може да приеме, са следните: auto и.
мин. ширина / мин. височина: Тя ни позволява да зададем минималната ширина или височина за елемент, стойностите, които може да приеме, са следните: auto и
макс. ширина / макс. височина: Задава максимално допустимата височина или ширина за елемент, възможните му стойности са: auto и
размер на кутията: Той установява коя част от полето на елемента се приема за размера, наличните са: съдържание-кутия подложка-поле граница-поле поле-поле.
Ако не зададете никаква стойност на разглежданите свойства, стойността по подразбиране ще бъде: auto, дори и да не е посочена, което означава, че браузърът ще бъде този, който задава размерите, също както видяхме, можем да зададем размерите с помощта дължини или проценти, като процентите се изчисляват въз основа на ширината на елемента на контейнера.
След като видяхме теорията, сега ще преминем на практика, нека видим следния код, където ще зададем размера на два елемента, така че да можем да видим как работи всичко това:
Пример
Както можем да видим, това, което направихме тук, е много просто, установихме ширина и височина за елемента div на страницата, след това посочваме два идентификатора, където поставяме всеки различен размер на кутиятаНека да видим какво ни генерира всичко това:
Какво ще се случи, ако сега поиграем малко с преоразмеряването на размера на прозореца на браузъра, знаем, че div ще бъде 75% от размера на неговия контейнер, в този случай неговият контейнер е тяло, което се променя с прозореца и на свой ред изображението със селектор #първо Това е 50% от ширината на неговия контейнер, което в случая е div, когато видим това, знаем, че нещо няма да се запази такова, каквото е, нека видим какво се случва в браузъра с всичко това.
Увеличете
