При щелчке я добавляю границу 1px к div, поэтому размер Div увеличивается на 2px X 2px. Я не хочу увеличивать размер div. Есть ли простой способ сделать это?
Беспорядочное подробное объяснение
На самом деле я добавляю DIV с float: left (такого же размера, как значки) в контейнер-div, поэтому все складываются один за другим, и когда (ширина контейнера-div составляет 300 пикселей), по ширине не остается места, поэтому дочерние DIV идут в следующей строке, так что это похоже на каталог, но из-за того, что увеличивается только выбранный размер DIV, DIV под выбранным DIV идет вправо и создает пустое пространство под выбранным DIV.
РЕДАКТИРОВАТЬ:
уменьшение высоты / ширины при выборе, но как увеличить ее обратно. Использование какой-либо сторонней структуры, поэтому не будет события, когда DIV теряет выбор.
Ответы:
Свойство border css увеличит "внешний" размер всех элементов, кроме tds в таблицах. Вы можете получить визуальное представление о том, как это работает в Firebug (поддержка прекращена ), на вкладке html-> layout.
Как пример, div с шириной и высотой 10 пикселей и границей в 1 пиксель будет иметь внешнюю ширину и высоту 12 пикселей.
В вашем случае, чтобы он выглядел так, как будто граница находится «внутри» div, в выбранном вами классе CSS вы можете уменьшить ширину и высоту элемента, удвоив размер границы, или вы можете сделать то же самое для обивка элементов.
Например:
источник
outline
границы или границы того же цвета, что и фон (и изменение ее цвета на другой, когда она выбрана) более гибкая.border-color: transparent
Это также полезно в этом сценарии. это позволяет вам устанавливать границы без изменения ширины div
Взято с http://css-tricks.com/box-sizing/
источник
установите на нем границу, прежде чем щелкнуть, чтобы она была того же цвета, что и фон.
Затем при нажатии просто измените цвет фона, а ширина не изменится.
источник
border-color: transparent
Еще одно хорошее решение - использовать
outline
вместоborder
. Он добавляет границу, не затрагивая блочную модель. Это работает в IE8 +, Chrome, Firefox, Opera, Safari.( https://stackoverflow.com/a/8319190/2105930 )
источник
box-shadow
в моей другой ответ на подобный вопрос. У него нет такой же поддержки браузера, но в наши дни это не проблема.box-shadow
может также поддерживать одностороннюю границу, идеальное решение.border-color: transparent
имеет лучшую кроссбраузерную поддержку --- см. мой ответ ...Попробуйте изменить
border
наoutline
:источник
Пользуясь многими из этих решений, я считаю, что уловка настройки
border-color: transparent
является наиболее гибкой и широко поддерживаемой:Почему лучше:
outline
, вы можете указать, например, верхнюю и нижнюю границы отдельно.источник
transparent
вот какая необходимость!Попробуй это
источник
Обычно я использую отступы, чтобы решить эту проблему. Отступ будет добавлен, когда граница исчезнет, и удален, когда граница появится. Образец кода:
Посмотреть мой полный пример кода на JSFiddle: https://jsfiddle.net/3t7vyebt/4/
источник
Просто уменьшите ширину и высоту вдвое больше ширины границы.
источник
Вы можете делать какие-то необычные вещи с помощью вставных теней. Пример установки границы внизу элемента без изменения его размера:
источник
Иногда вы не хотите, чтобы высота или ширина изменялись без явной настройки. В этом случае я считаю полезным использовать псевдоэлементы.
Вы также можете сделать гораздо больше с псевдоэлементом, так что это довольно мощный шаблон.
источник
width
иheight
и добавленияbottom
иleft
свойства в дополнение кtop
иleft
, все из которых должны быть установлены по ширине противоположностью исходная граница (в моем случае -1px). Отличный хакПопробуйте уменьшить размер поля при увеличении границы
источник
Мне нужно было иметь возможность «ограничивать» любой элемент, добавляя класс, и не влиять на его размеры. Хорошим решением для меня было использование box-shadow. Но в некоторых случаях эффект не был заметен из-за других братьев и сестер. Итак, я объединил как типичную тень блока, так и вставку тени блока. В результате получается рамка без изменения размеров.
Значения разделены запятой. Вот простой пример:
jsfiddle
Настройте свой предпочтительный вид, и все готово!
источник
Мы также можем использовать функцию css calc ()
вычитание 2 пикселей для границ
источник
источник
Вы можете создать элемент с рамкой того же цвета, что и ваш фон, а затем, когда вы хотите, чтобы граница отображалась, просто измените ее цвет.
источник
border-color: transparent
ul li a{border-bottom:2px solid transparent;} ul li a:hover{border-bottom:2px solid red;}
Если ваш контент
div
отображается динамически, и вы хотите установить его высоту, вы можете использовать простой трюкoutline
:Пример здесь: https://codepen.io/Happysk/pen/zeQzaZ
источник
Вы можете попробовать вставку box-shadow
примерно так: box-shadow: inset 0px -5px 0px 0px #fff
добавляет белую рамку 5 пикселей в нижнюю часть элемента без увеличения размера
источник