Описание тега border-box

This is one of the 3 allowed values for the CSS box-sizing property. When this box model is used, the width and height properties include the padding and border, but not the margin.
2 ответа

Border-left-width возвращает NaN в jQuery

Я занят написанием небольшого фрагмента кода, который должен разрешать кросс-браузерное использование модели рамки с рамками. Пока что базовая функциональность работает нормально, но я не могу заставить работать. Он должен адаптироваться к доступном…
01 сен '12 в 22:51
2 ответа

Невозможно переопределить рамку-поле:before и:after с border-radius

Так что я получил эту тему http://demo.theme.co/ethos-1/ и хотел сделать круглые квадраты круглыми. Единственный способ, которым я могу получить их, это если я поменяю *,*:before,*:after { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; b…
06 июл '16 в 16:46
2 ответа

Рамка не отображает текст, рамка не отображается правильно

В настоящее время у меня проблема с моим веб-сайтом и сервисом чата, который мы пытаемся внедрить. Я сузил это до проблемы CSS, связанной со свойством border-box. Эта проблема существует только в Internet Explorer 11. Поле отображается правильно в M…
09 авг '16 в 16:42
4 ответа

Как поместить текст в центр поля при использовании рамки в CSS?

У меня есть следующий код: * { box-sizing: border-box; } .container { width: 100%; max-width: 60rem; /* 960 */ margin: 0 auto; } .item { width: 100%; overflow: hidden; margin-bottom: 5rem; /* 80 */ } .item__img, .item__info { width: 50%; float: righ…
14 апр '15 в 15:07
4 ответа

Адаптивное изображение в контейнере с фиксированным соотношением сторон в Firefox

У меня есть контейнер с фиксированным соотношением сторон. У меня есть изображение с максимальной шириной и высотой воска. Изображение должно содержаться в пределах контейнера. Я отлично работаю в Chrome, но не работает в Firefox. .responsive-contai…
02 окт '14 в 19:46
0 ответов

Почему как минимум.0743em (то есть> 1px) требуется, чтобы граница была видна в элементах формы поиска?

Пожалуйста, обратитесь к 12-й строке в CSS по этой ссылке: http://jsfiddle.net/NLTf9/ в 12-й строке мне нужна ширина границы не менее.0743em, чтобы сделать ее видимой в последних версиях Chrome и Opera на сегодняшний день. (Я имею ввиду границы ввод…
17 июн '14 в 21:14
2 ответа

Встроенные блоки не помещаются в контейнер

Не уверен, что я делаю не так, я подумал, что, добавив рамку, он будет аккуратно помещаться в эти 4 коробки. http://jsfiddle.net/jzhang172/x3ftdx6n/ .ok{ width:300px; background:red; height:100px; box-sizing:border-box; } .box{ display:inline-block;…
26 сен '15 в 19:28
1 ответ

Рамка приоритета CSS

Жертва CSS здесь Почему следующий стиль: .slider-menu .menu-app-container .non-menu .main-container * { box-sizing: border-box; } преобладает над этим: .table > thead > tr > td > input, .table > tbody > tr > td > input, .tabl…
09 сен '14 в 10:38
4 ответа

Рамка не работает, div с оверлеем, включая отступы

Я создаю галерею с изображениями, имеющими наложенный темный фон и текст заголовка. Размещение в порядке, но div оверлея выпадает за границы изображения, потому что для элемента контейнера используется отступ. Я читал об этом в нескольких местах и ​…
14 мар '15 в 11:19
1 ответ

Каковы недостатки использования box-sizing: border-box?

Недавно я снова посмотрел на размерную коробку. Я чувствую, что бордюр на самом деле является более подходящей моделью. Я хочу, чтобы мои блоки включали отступы и границу без необходимости учитывать их каждый раз при расчете ширины, что на самом дел…
05 окт '12 в 19:34
6 ответов

Как получить равную ширину ввода и выбрать поля

На форме у меня есть одно поле выбора и два поля ввода. Эти элементы выровнены по вертикали. К сожалению, я не могу получить равную ширину этих элементов. Вот мой код: <select name="name1" style="width:198px"> <option>value1</option&g…
01 ноя '10 в 22:55
2 ответа

Изображение не масштабируется в IE 11

Когда я изменяю ширину окна браузера, изображения не масштабируются в IE 11 или ниже. Я работаю с Google Chrome. Я попытался добавить положение: абсолютное, но оно разрушило весь макет.Изображение CSS: .auction-item-img-container { display: block; h…
2 ответа

Как сохранить 3 элемента li с 33,3% + margin-right в одном ряду? Border-бокс?

У меня есть 3 элемента li - каждый шириной 33,3%. Я пытаюсь создать margin-right разрыв между каждым <li> - однако дополнительная маржа составляет общую сумму <li> ширина превышает 100% и ломается на новой строке. Смогу ли я разобраться …
18 окт '15 в 11:25
1 ответ

border-box не работает на элементах inline-block?

У меня есть список inline-block элементы, и я хочу добавить границу к элементу, над которым вы наводите курсор. Однако обратите внимание, как граница смещает элемент, даже когда я использую box-sizing: border-box и явно определить ширину и высоту эл…
25 фев '16 в 12:30
6 ответов

Почему отступ расширяет гибкий элемент?

В приведенном ниже фрагменте, первый ряд имеет два элемента div с flex-grow: 1, Как и ожидалось, каждый div занимает 50% экрана. При добавлении отступа к левому элементу div это уже не так. Может кто-нибудь объяснить почему? body > div { height: …
15 окт '15 в 09:48
0 ответов

Использование box-sizing:border-box на мобильном телефоне

Я не могу найти конкретный ответ в Google об использовании box-sizing: border-box на мобильном телефоне. Я видел на http://caniuse.com/ что размеры блоков не полностью поддерживаются нативными браузерами Android (браузеры Android неправильно рассчит…
25 апр '15 в 08:26
1 ответ

box-sizing: border-box, заставляющий div с отступом внутри td иметь поля, ПОЧЕМУ?

Я хочу сделать коробку с содержимым, которое центрируется по вертикали, но также прокручивается, если содержимое переполняется. Я могу использовать таблицу с вертикальным выравниванием: средним для достижения вертикального центрирования, но тд не мо…
13 июн '14 в 17:51
2 ответа

Border-Box Прозрачный бордюр

Я пытаюсь использовать рамку для создания эффекта черной границы 50% прозрачности вокруг трех изображений столбцов. Я прочитал это, чтобы заставить границу двигаться внутрь, чтобы использовать отступы, и я не могу заставить его работать. Вот мой код…
16 ноя '13 в 02:02
2 ответа

box-sizing: проблема определения размера рамки в Firefox

При тестировании сайта в FF я столкнулся со странной проблемой. Ситуация такая: box-sizing: border-box применяется ко всему. У меня есть плавающая оболочка <div>с фиксированной высотой. Внутри обертка <img> с height: 100%, Когда я добавл…
27 май '14 в 11:42
1 ответ

Почему заполнение не применяется внутри при использовании рамки

У меня простой вопрос, на который, надеюсь, есть простой ответ. Это кажется простым, но я просто не могу разобраться с этим. Итак, у меня есть четыре ящика в контейнере: div { box-sizing: border-box; padding: 0; margin: 0; } .wrapper { box-sizing: c…
14 сен '18 в 21:08