• Страница 1 из 1
  • 1
Как задается свойства ширины и высоты CSS3
Kosten
Воскресенье, 04 Февраля 2018, 16:39 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Этот учебник предназначен для новичков и людей, кто начал осваивать CSS, и здесь рассмотрим два самых полезных и общих свойств CSS, это ширина и высота на элементы. В CSS вы используете свойства width и height для определения, как вы можете догадываться, что ширины и высоты любого элемента. Когда мы говорим какой-то элемент, мы действительно имеем в виду любой. Вы можете определить что-то такое же большое, как ширина и высота тела всего вашего HTML файла, или что-то такое же маленькое, как маленькая кнопка.

Синтаксис свойств ширины и высоты очень прост для понимания. Оба свойства принимают только несколько разных типов значений. Есть значение auto, значение по умолчанию, тогда есть значение length, где вы можете определить длину, используя единицы измерения по вашему выбору, что включает px, em, rem, cm, и наконец есть значение проценты %, где вы можете определить ширину или высоту объекта в процентах от его родительского элемента, это последнее очень часто и полезно, когда речь идет о гибком и мобильном дизайне.

Одним из наиболее распространенных элементов, к которым применяются свойства width и height, является элемент div. По умолчанию элементы div не имеют фиксированной ширины или высоты, поэтому они имеют только размер содержимого внутри них. Это относится ко всем элементам HTML, но это может стать проблемой для div, потому что разработчики очень часто создают пустые div, чтобы представлять квадраты или прямоугольники. Если вы хотите, чтобы пустые div выглядели как фигуры, вы должны задать им ширину и высоту. Чтобы узнать как это выглядит, то можете ознакомиться с фрагментом кода ниже.

Код
div{
   width: 250px;
   height: 250px;
}

В приведенном выше примере div теперь имеет форму квадрата, так как ширина равна высоте. Сделать прямоугольник так же просто, просто убедитесь, что ширина и высота не имеют равных значений. Возьмите приведенный ниже код в качестве примера.

Код
div{
   width: 500px;
   height: 350px;
}

Также все можно поставить под классы, если вы решите какой-то один элемент выставить. То в коде задаем класс и прописываем его в стилях CSS, как видим не так сложно, главное понять как работает.
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: