Уменьшить блок div css

Как изменить ширину элемента. Свойство width

CSS-свойство width определяет ширину элемента на странице. Оно позволяет управлять размером элемента и адаптировать его под разные размеры экрана.

Свойство width записывается так:

Ширина может быть автоматической — если её не указать, то она будет иметь значение auto . В этом случае браузер сам решит, какую ширину установить элементу на основе размеров родительского элемента и содержимого.

Если вы хотите управлять шириной, укажите значение — определённую вами ширину элемента. Тогда она будет постоянной или будет меняться в зависимости от всего вокруг на странице. Можно использовать единицы измерения — например, px , % , em , rem .

Вот так — в пикселях, тогда ширина будет постоянной. В этом случае — 200 пикселей.

А так — в процентах, тогда ширина будет меняться при изменении размеров окна. В этом случае — 50% от ширины родительского элемента.

В любом варианте к ширине нужно относиться внимательно, чтобы всё сошлось с макетом.

Если пока не понимаете, зачем здесь фигурные скобки — прочитайте о селекторах.

Для чего использовать свойство width

Один из вариантов — чтобы ограничить ширину текстового блока и улучшить читаемость на больших экранах. Например, когда вы делаете блог и хотите, чтобы текст не растягивался на всю ширину экрана. Как на этой странице.

Вот так мы стилизуем элемент с шириной 50%, который находится по центру экрана.

Относительные единицы измерения помогают создавать адаптивные страницы. Попробуйте сами — контейнер будет тянуться вместе с окном браузера.

Другой вариант использования — создать сетку на основе флексбоксов с фиксированными размерами колонок.

Это очень простой пример сеток, но если интересно, прочитайте наше пошаговое рукововодство по созданию адаптивных сеток.

С шириной всё вообще непросто — иногда с непривычки могут произойти странные ситуации, из-за которых придётся долго гуглить. Давайте о них поговорим.

Элемент на странице шире, чем вы задумали

Виновато свойство box-sizing , которое по умолчанию имеет значение content-box .

Почему так. Когда вы задаете ширину элемента с помощью свойства width , она применяется только к содержимому элемента и не учитывает его отступы, поля ( padding и margin ) и границы ( border ). Это может привести к тому, что общая ширина элемента будет больше, чем ожидалось.

Например, у нас есть такой элемент с классом box :

И мы применяем следующие стили — ширина 100 пикселей, отступы по 10 пикселей со всех сторон и вдобавок пятипиксельную границу.

Тогда вспоминаем математику и считаем — общая ширина элемента с заданной шириной 100px будет на самом деле равна 130px .

100px + 2 × 10px (отступы) + 2 × 5px (границы) = 130px 

Как починить. Нужно включить отступы и границы в заданную ширину элемента. Для этого используйте свойство box-sizing со значением border-box :

Теперь общая ширина элемента будет равна 100px , так как отступы и границы будут включены в указанную ширину. Такое поведение следует учитывать при вёрстке и подготовке макетов, чтобы в результате не оказалось непредвиденных сюрпризов.

Ширина элемента больше ширины родителя

Если ширина нашего элемента случайно оказалась больше, чем у родительского, то он не вместится. И будет как-то так:

Создаём два вложенных элемента с классами parent и child .

И стилизуем их. У parent ширина 100 пикселей, а у child — 200.

Выше вы уже видели, что произойдёт в этом случае — элемент child с синим фоном будет выходить за пределы родительского элемента с рамкой.

Конечно, иногда так поступают специально — например, чтобы иллюстрации в блоге выходили за пределы колонки с текстом и были покрупнее.

Хотя если указать только width без ограничений, то при уменьшении окна картинка не вместится.

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

Ну и не забывайте тестировать сайты и проверять их в разных браузерах — это важный навык для всех веб-разработчиков в любом году.

👉 Все браузеры поддерживают свойство width , так что смело пользуйтесь.

Материалы по теме

• Не шириной единой — свойство height ещё запутаннее, но тоже важное
• Чем отличаются margin и padding (и как их больше никогда не перепутать)
• Как создавать адаптивные сетки

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Как задавать в css размер блока

Дело в том, что не все фрагменты на веб-странице – блоки. Элементы вообще делятся на блочные и строчные. Вторые могут спокойно записываться в одну строку и при этом им не нужно ничего дополнительно прописывать. Простой пример строчного элемента – ссылка. На одной строке может быть сколько угодно ссылок, пока они будут помещаться на ней.

Блочные элементы имеют абсолютно другое поведение. Без дополнительных манипуляций они не смогут стать в один ряд. Пример такого блока – абзац, который задается тегом p. Так вот, зачем я вам все это говорю? Это сказано для того, чтобы вы понимали – размер нужно задавать только блочным элементам, что мы и будем делать в этой статье.

Рис. 1. Основные свойства, которые помогают задать размер

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Простые свойства для размеров

Самые простые свойства, которыми можно записать размеры – это width и height. Означают они, соответственно, ширину и высоту. К ним также можно дописывать префиксы min- и max-. В таком случае будет задаваться минимальная и максимальная ширина или высота соответственно.

Значения можно записывать в пикселях или в процентах. Иногда еще используется относительная единица em (высота шрифта), но обычно с ее помощью определяется величина текста. По умолчанию все сетки (главные структурные блоки шаблона), в которых размеры определяются в процентах, называют резиновыми. Также процентная запись помогает легко адаптировать шаблон, что тоже очень важно.

Размер в пикселях

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

Источник

Размеры блока

Если в CSS размеры блока не заданы, то они формируются так:

• Ширина определяется шириной окна страницы или шириной внешнего блока. Блок занимает всю ширину окна страницы или внешнего блока за исключением отступов.
• Высота блока устанавливается такой, чтобы в блок поместилось всё содержимое.

Для примера создадим блок без указания размеров и посмотрим, как он выглядит. Чтобы видеть размеры блока, зададим рамку с помощью свойства border .

Блок без указания размеров

Попробуйте менять ширину окна браузера, Вы увидите, что ширина блока тоже меняется.

Установка размеров блока в CSS

Для установления размеров блока есть свойство width , которое устанавливает ширину, и свойство height , которое устанавливает высоту. В значениях этих свойств указываются размеры блока в любых единицах, существующих в CSS, например в пикселях. При указании значения, единицы обязательно нужно указывать.

Добавим на страницу ещё один блок с шириной 500 пикселей и высотой 200 пикселей.

Размеры можно указывать в процентах от внешнего блока. Если внешнего блока нет, то размер будет в процентах от размера страницы. Попробуем оба варианта. В блок с размерами поместим ещё один блок и укажем ему ширину 70%. Также создадим отельный блок и тоже укажем ширину 70%

 
Блок с размерами 
В процентах от внешнего блока
 
 
В процентах от страницы

Обратите внимание — при изменении ширины окна браузера отдельный блок меняет свою ширину. А тот, который внутри другого блока, остаётся неизменным, ведь его ширина зависит от размера, заданного точно.

При этом значении размеры блока определяются также, как если они не заданы. Это значение используется, если размер ранее был задан, а теперь его нужно вернуть к начальному.

Также у размеров есть значение:

При этих свойствах блок получает значения размеов от родительского элемента.

Браузеры, особенно старые, по-разному определяют CSS размеры блока. Поэтому при установлении размеров нужно тщательно проверять отображение страницы.

Минимальные и максимальные размеры блока

Если в CSS размер блока не задан точно и может меняться, то можно установить минимальный и максимальный размер. Для этого есть свойства min-width , max-width , min-height , max-height .

Для примера создадим ещё один блок размером также 70%. Установим ему минимальную ширину 600 пикселей. Когда Вы будете уменьшать окно браузера, этот блок уменьшится только до 600 пикселей, а далее будет неизменным.

 
Блок в процентах с минимальной шириной

Содержимое за пределами блока

Если блоку заданы размеры, то часть содержимого может не поместиться в блок и оказаться за его пределами. Свойство overflow определяет, как отображается эта часть содержимого. Значения:

overflow: visible — отображается и не учитывает границы (по умолчанию)

overflow: hidden — не отображается

overflow: scroll — содержимое не выходит за границы, а у блока есть полосы прокрутки

overflow: auto — пока содержимое полностью помещается в блок, полос прокрутки нет. А когда содержимое перестаёт помещаться, они появляются

overflow: inherit — значение принимается от родительского элемента

Создадим блок с контентом, выходящим за его пределы. Свойство overflow пока не устанавливаем.

 
Элемент
с большим
количеством
содержимого 
которое
занимает
несколько
строк
 
Следующий элемент

Текст этого блока выходит за границы и накладывается на другие элементы страницы. Установим свойство overflow :

Теперь содержимое за границами блока не отображается. Для текста это не подходит, ведь пользователь не сможет его прочитать. Попробуйте установить другие значения. Со значением scroll блок имеет обе полосы прокрутки. А со значением auto горизонтальной прокрутки нет, ведь содержимое помещается в блок по ширине.

Существуют свойства overflow-x и overflow-y , которые отдельно устанавливают отображение содержимого по ширине и высоте. Они имеют те же значения.

Коприрование материалов сайта возможно только с согласия администрации

2017 — 2023 © basecourse.ru Все права защищены

Источник