Адаптивная сетка для новостных блоков

Допустимые значения

Для HTML5 ограничениями на значение id являются:

1. он должен быть уникальным в документе
2. он не должен содержать пробелов
3. он должен содержать хотя бы один символ

Таким образом, значением могут быть все цифры, только одна цифра, только знаки пунктуации, включая специальные символы, все что угодно. Просто не должно быть пробелов.
Таким образом, нижеследующие объявления являются допустимыми:

Недопустимо:

Также неверен нижеследующий код, если включен в один документ:

Для HTML 4.01 и ниже для значения всегда должно начинаться с буквы, а остальными символами могут быть:

• латинские буквы (A-Z/a-z)
• цифры (0-9)
• тире («-«)
• подчеркивания («_»)
• двоеточия («:»)
• точки («.»)

В этом случае в вышеприведённом примере для HTML5, допустим только один вариант:

Другие примеры, допустимые в HTML 4.01 и ниже:

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

А это совершенно нормально:

Имейте в виду, что приведенные выше правила и примеры применяются в контексте HTML.
Использование чисел, знаков препинания или специальных символов в значении i и может вызвать проблемы в других контекстах, таких как CSS, JavaScript и регулярных выражениях.
Например, хотя в HTML5 допустим следующий идентификатор:

Он не допустим в CSS.

В CSS различные идентификаторы (включая имена элементов, классы и идентификаторы в селекторах)
могут содержать только символы и символы из ISO 10646 U + 0080 и выше, а также дефис ()
и подчеркивание ();
они не могут начинаться с цифры, двух дефисов или дефисов, за которыми следует цифра.
( )

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

Селекторы class и id

В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

<div id="first">текст в первом диве</div>
<div class="second">текст во втором диве</div>
<div id="third" class="first second third">текст в третьем диве</div>

На что стоит обратить внимание:

• Классы и идентификаторы можно присваивать любым (всем) тегам.
• Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
• Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
• Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
• Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.

Как обратиться к классу или id в файле стилей (CSS)?

Смотрим пример:

#first {color: red;} /* обращаемся к id с именем first */
.second {color: blue;} /* обращаемся к классу с именем second */
#first .second {color: orange;} /* обращаемся к классу с именем second, ТОЛЬКО если он находится ВНУТРИ тега с идентификатором first */
.first .third {color: grey;} /* обращаемся к классу с именем third, ТОЛЬКО если он находится ВНУТРИ тега с классом first */

В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.).

Использование классов и идентификаторов очень удобно, но оно увеличивает нашу HTML разметку, в идеале (которого никогда нет) мы вовсе не должны их использовать, вместо них мы будем использовать комбинации и группировки селекторов, о них и будет вся остальная часть статьи, но! Но это совсем не означает, что вы должны полностью отказаться от использования классов и идентификаторов, просто вы должны иметь ввиду, что очень часто вместо создания нового class или id можно обойтись приёмами, описанными ниже и они также могут быть вполне удобны.

В чём различие class и id?

Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:

 <style>
#first {color: red;}
.blue {color: blue;}
</style>
<div id="first" class="blue">текст в диве</div>

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

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

.myclass {свойства} /* применятся ко всем тегам, которые содержат класс myclass */
div.myclass {свойства} /* применятся только к тегам div, которые содержат класс myclass */

Для id это тоже будет работать, но такая запись лишена всякого смысла, так как id не может повторяться на странице, а значит достаточно просто объявлять id, без тега к которому оно относится:

<style>
#super {свойства} /* правильно */
div#super {свойства} /* Неправильно, но работать будет */
</style>
<div id="super">текст</div>

Вроде бы осталось только одно неоговорённое отличие, и оно касается темы, которую в ближайшем будущем я не планировал затрагивать на этом блоге – Javascript. Но всё же обязан доложить вам о нём: если вы хотите обратиться к элементу с помощью Javascript, то для этой цели очень удобным будет наличие id у этого элемента. Чтобы обратиться к элементу по его классу в Javascript нет такой встроенной возможности, вам придётся использовать вспомогательные функции + это не всегда кроссбраузерно.

Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно.

Зачем использовать div в HTML?

Чаще всего вы будете использовать элемент div для группировки разделов кода, на которые вы хотите настроить таргетинг с помощью CSS. Вы можете стилизовать их так, чтобы они выглядели иначе, чем другие разделы на странице, или расположить их иначе. Вы также можете использовать атрибут div и language, чтобы изменить язык определенного раздела на странице.

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

Вот HTML:

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

Вы начнете тем же способом изменить стиль div, но вместо добавления языкового атрибута вы добавите атрибут ID или класса. Затем вы используете соответствующий селектор, чтобы добавить нужный CSS.

Давайте посмотрим на пример, когда вы использовали бы div для изменения внешнего вида раздела своей веб-страницы. Предположим, вы хотите стилизовать определенный заголовок и абзац на странице, а остальные оставить без стиля. Затем вы должны заключить отдельный заголовок и абзац в элемент div и дать ему имя класса. Для этой демонстрации мы будем использовать «myDiv» в качестве имени класса.

Затем в разделе заголовка вашего HTML-документа или во внешней таблице стилей вы можете использовать селектор классов .myDiv и определить любые свойства CSS, которые вы хотите. В этой демонстрации мы будем использовать свойства границы, цвета фона, выравнивания текста и цвета.

Вот CSS:

Вот HTML:

Вот результат на передней панели:

Теперь давайте посмотрим на пример, когда вы использовали бы div для изменения позиционирования или макета раздела вашей веб-страницы. Вы можете найти этот и многие другие примеры в посте «Вот разница между Flexbox, CSS Grid и Bootstrap».

Скажем, я хочу создать сетку flexbox с шестью столбцами. Я бы начал с создания шести элементов

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Управление переполнением блочных элементов

В процессе верстки у вас будут возникать такие ситуации, когда содержимое элемента будет отображаться за пределами границ элемента. По умолчанию браузер отображает такое содержимое (переполнение элемента отображается), что в некоторых случаях приводит к визуальным ошибкам. За такое поведение браузера отвечает CSS свойство overflow. Рассмотрим его возможные значения:

Значение	Описание
visible	Переполнение не обрезается, содержимое выходит за пределы размеров элемента. Это значение по умолчанию.
hidden	Переполнение обрезается (контент, который выходит за размеры будет невидимым).
scroll	Переполнение обрезается, но добавляется полоса прокрутки, позволяющая увидеть содержимое, которое выходит из заданных размеров.
auto	Если переполнение обрезается, то полоса прокрутки будет добавлена автоматически, чтобы увидеть содержимое, которое выходит из заданных размеров.

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
<title>Пример управления переполнением элемента</title>
<style> 
div {
display: inline-block;  /*  устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку)  */
width: 125px; /* устанавливаем ширину блока */
height: 100px;  /* устанавливаем высоту блока */
padding: 5px;  /* устанавливаем внутренний отступ для всех сторон */
border: 1px solid orange;  /* устанавливаем сплошную границу 1px оранжевого цвета */
vertical-align: top; /* верх элемента выравнивается по верху самого высокого элемента в строке (вертикальное позиционирование) */
}
.test {
overflow: visible; /* переполнение не обрезается */
}
.test2 {
overflow: hidden; /* переполнение обрезается */
}
.test3 {
overflow: scroll; /* переполнение обрезается, но добавляется полоса прокрутки */
}
.test4 {
overflow: auto; /* если переполнение обрезается, то полоса прокрутки будет добавлена автоматически */
}
</style>
</head>
<body>
	<div class = "test"><p>overflow: visible</p>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
	<div class = "test2"><p>overflow: hidden</p>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
	<div class = "test3"><p>overflow: scroll</p>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
	<div class = "test4"><p>overflow: auto</p>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
</body>
</html>

В данном примере мы разместили четыре блока фиксированной ширины и высоты, для которых указали различные значения CSS свойства overflow:

• Первый блок (значение visible) – содержимое выходит за границы элемента (значение по умолчанию).
• Второй блок (значение hidden) – содержимое, которое переполняет элемент обрезается.
• Третий блок (значение scroll) – переполнение обрезается, но добавляется полоса прокрутки.
• Четвертый блок (значение auto) – как и при значении scroll, только полоса прокрутки будет добавлена автоматически, если произойдет переполнение блока по определенной оси (x — горизонтальной, либо y — вертикальной), а не отображается на странице постоянно.

Результат нашего примера:

Рис. 104 Пример управления переполнением элемента.

Переполнение по определённой оси

С выходом стандарта CSS 3 были добавлены свойства, которые способны управлять по отдельности горизонтальным переполнением (ось x) – overflow-x и вертикальным переполнением (ось y) – overflow-y. В отличии от свойства overflow, данные свойства отвечают только за одну ось (x, либо y) при этом значения и синтаксис аналогичен свойству overflow (таблица выше).

Давайте рассмотрим пример, в котором нам необходимо добавить полосу прокрутки для блока текста, если содержимое переполнит элемент по горизонтали:

<!DOCTYPE html>
<html>
<head>
	<title>Пример управления переполнением элемента по горизонтальной оси</title>
<style> 
pre {
width: 300px; /* устанавливаем ширину элемента */
overflow-x: scroll; /* переполнение обрезается, но добавляется полоса прокрутки */
background-color: orange; /* задаем цвет заднего фона */
}
</style>
</head>
	<body>
		<pre>
			Съешь же ещё этих мягких французских булок да выпей чаю. 
		</pre>
	</body>
</html>

В данном примере мы использовали элемент <pre>, который сохраняет все пробелы и переносы строк (текст может выходить из отведённой области), что нам и помогло продемонстрировать возможности свойства overflow-x. В нашем случае текст вышел за пределы ширины размера элемента <pre> и браузер добавил горизонтальный бегунок прокрутки, что нам и требовалось.

Результат нашего примера:

Рис. 105 Пример управления переполнением элемента по горизонтальной оси.

Сетка и колонки

Бут­страп для себя делит экран на 12 коло­нок, неза­ви­си­мо от раз­ме­ра экра­на. Даже малень­кий экран ста­ро­го теле­фо­на Бут­страп разо­бьёт на 12 коло­нок и будет ими управ­лять. На этом хол­сте вы може­те созда­вать бло­ки шири­ной с какое-то коли­че­ство коло­нок. Напри­мер, что­бы напи­сать текст на поло­ви­ну шири­ны экра­на, нуж­но создать блок шири­ной 6 колонок.

Бло­ки живут не сами по себе, а как бы в таб­ли­цах. Вы гово­ри­те Бут­стра­пу: «Создай мне кон­тей­нер для бло­ка, в кон­тей­не­ре — стро­ку, внут­ри стро­ки — колон­ку, а внутрь колон­ки — поло­жи этот текст». Сей­час это выгля­дит стран­но, но поз­же вы привыкнете.

Стро­ка запол­ня­ет­ся ячей­ка­ми сле­ва напра­во. Когда кон­ча­ет­ся стро­ка, мож­но создать новую стро­ку и сно­ва запол­нить её ячей­ка­ми раз­ной шири­ны. Шири­на яче­ек выра­жа­ет­ся в колон­ках. Ячей­ка шири­ной на весь экран будет иметь шири­ну 12 коло­нок, на пол-экрана — 6 коло­нок. Что­бы раз­бить экран на три части по гори­зон­та­ли, нуж­но 3 ячей­ки шири­ной по 4 колон­ки. Что­бы сде­лать сет­ку, как у обыч­но­го трёх­ко­ло­ноч­но­го сай­та, попро­буй­те три ячей­ки: 2 колон­ки, 8 коло­нок, 2 колонки. 

Мож­но ска­зать Бут­стра­пу: «Когда экран малень­кий, эту колон­ку выво­ди на всю шири­ну, а ту вооб­ще прячь». Напри­мер, у нас в левой колон­ке было меню сай­та, в цен­траль­ной — основ­ной текст, а в пра­вой — вся­кие вспо­мо­га­тель­ные ссыл­ки. Тогда гово­рим левой колон­ке на мобил­ке выве­стись на всю шири­ну, основ­ной колон­ке — тоже на всю шири­ну, а пра­вой — скрыть­ся. Полу­чит­ся мобиль­ная вер­сия сайта.

И так мож­но дол­го кура­жить­ся. Если инте­рес­но, про­чи­тай­те доку­мен­та­цию по сет­кам Бут­стра­па — там всё понят­но по кар­тин­кам. 

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

Используя полученные знания составьте следующий документ, посвященный белому тигру (внимательно изучите страницу перед выполнением):
Практическое задание № 26.

Обратите внимание, что при уменьшении размера окна браузера страница принимает следующий вид:
Практическое задание № 26 (при уменьшении размеров окна).Обращаю Ваше внимание, что для выполнения этого задания Вам необходимы знания из прошлых статей учебника. Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован

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

Тень элемента в CSS

Плавающие элементы в CSS

МЕНЮ

(adsbygoogle = window.adsbygoogle || []).push({});

×

Кажется, вы используете блокировщик рекламы 🙁

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Как отключить?
Поддержать

Присвоение класса элементу

Классы указывают признак для элементов. Используйте атрибут , чтобы назначить класс элементу.

Чтобы назначить несколько классов элементу разделите имена классов пробелами.

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

Множество элементов могут иметь одинаковые классы и все они получат стиль, связанный с этим классом. Это всегда будет верно, если внутри CSS вы не укажете элемент.
Например, у нас есть два элемента: оба с классом highlight:

Если ваш стиль такой, как показано ниже, то оба элемента будут содержать зеленый текст:

Однако, если мы хотим только чтобы класс работал только внутри div, мы можем добавить конкретики, как показано ниже:

Тем не менее, при стилизации с помощью CSS обычно рекомендуется использовать только классы (например, .highlight), а не элементы с классами (например, div.highlight).
Как и любой другой селектор, классы могут быть вложенными:

Вы также можете связать селектор классов только с элементами, имеющими определенную комбинацию из нескольких классов. Например, если это наш HTML:

И мы хотим покрасить текст этого элемента в розовый цвет, то можем написать в CSS следующее:

Добавляем отступ между контейнерами

Помните, я не рекомендовал использовать сокращенную версию кода для центрирования контейнера? Я говорю об этой версии:

CSS

.wrapper {
  margin: 0 auto;
}

Она может привести к неполадкам, если на странице несколько контейнеров, и вы хотите добавить отступ между ними. Если вы зачем-то добавили другую вариацию класса к элементу wrapper, по определённым причинам у вас может не получиться добавить отступ.

CSS

.wrapper-variation {
  margin-top: 50px;
}

.wrapper {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

Свойство margin не будет работать для элемента wrapper-variation, потому что оно противоречит свойству margin: 0 auto. Сокращенное свойство будет отменять полное. Чтобы избежать подобной путаницы, в таких случаях рекомендуется использовать полные свойства.

Теперь давайте перейдём к созданию отступа. В каждом проекте я подготавливаю несколько служебных классов и использую их по необходимости

Обратите внимание на следующую модель:

HTML

<div class="wrapper mb-5"></div>
<section>
  <div class="wrapper"></div>
</section>
<div class="wrapper"></div>

CSS

.mb-5 {
  margin-bottom: 3rem !important;
}

Благодаря подобному подходу, сам контейнер остаётся без изменений, а отступ добавляется к дополнительным служебным классам в CSS. Теперь вы, наверное, спросите, зачем мне создавать несколько контейнеров на странице, если я могу создать один? В HTML-коде, приведенном выше, между двумя контейнерами есть элемент <section>.

Здесь было бы полезно использовать декларацию !important, так как основная цель служебных классов в CSS, – сделать определенное свойство обязательным. Мы гарантируем это, добавляя !important.

Когда применять высоту/ширину в 100%?

Высота в 100%

Давайте сперва разберемся с менее сложным примером. Когда использовать height: 100%? Вообще-то многие из нас как минимум единожды задавались вопросом “какого черта? Я рассчитывал на то, что моя страница будет как минимум занимать всю высоту экрана!” Я прав?

Для того, чтобы ответить на этот вопрос, необходимо понимать, что на самом деле означает свойство height: 100%: полную высоту родительского элемента. Это далеко не означает “всю высоту экрана”. Так что если вы хотите, чтобы ваш контейнер занимал всю высоту экрана, height: 100% недостаточно.

Почему? Потому, что родительский элемент вашего контейнера (body) имеет высоту по умолчанию auto, что означает, что его размер определяется содержимым. Так что можете попробовать проставить height: 100% и для элемента body — это все равно не даст желаемого эффекта.

Почему? Потому, что родительский элемент тега body (html) имеет высоту по умолчанию auto, что означает, что его размеры зависят от содержимого. А что если попробовать задать элементу html height: 100%? Работает!

Почему? На самом деле потому, что корневой элемент (html) — это не самый последний родительский блок на странице — есть еще окно просмотра (viewport). Проще говоря — это окно браузера. Так что если задать height: 100% элементу html, вы сделаете его высоту, равной высоте браузера. Вот так-то просто.

Результат нашей истории отражен в следующем коде:

html, body, .container {
  height: 100%;
}

А что если у родительского элемента задан min-height, но не задан height?

Roger Johansson недавно выявил проблему с height: 100% в случае когда у родительского элемента нет назначенной высоты, но для него задана минимальная высота. Я не буду углубляться в описание, но в итоге решение состоит в том, что родительскому элементу нужно задать высоту в 1px, так чтобы дочерний элемент мог растянуть его до min-height.

.parent {
  min-height: 300px;
  height: 1px; /* Необходим для того, чтобы дочерний элемент раскрылся на всю высоту min-height */
}

.child {
  height: 100%;
}

Ширина в 100%

Теперь давайте разберемся с параметром width: 100%. Сразу напомню, что, как и с высотой, настройка width: 100% — это указание, что элемент должен быть такой же ширины, как и родительский элемент. Никаких сюрпризов здесь нет.

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

Если мы добавим внутреннее поле и границы к вашему элементу, которому выставлена ширина width: 100%, то этот элемент уже не будет вписываться в родительский — он будет выходить за его пределы. Все это из-за полей и границ. И именно поэтому свойство width должно было бы называться content-width (шириной контента). Пожалуйста, рассмотрите следующий пример, чтобы понять, что я имею в виду:

Ширина родительского элемента равна 25em. Ширина дочернего элемента равна 100% (от его родительского элемента), но также имеет поля размером 1em (1em слева, 1em справа. В сумме по горизонтали это будет 2em), а также границу в 0.5em (всего 1em по горизонтали), что приводит к тому, что результирующая ширина дочернего элемента состовит 25em(100%) + 2em + 1em = 28em. Хмм… Хьюстон, похоже, у нас проблема.

Есть четыре способа поправить положение дел. Первый, и определенно лучший — избегать установки width: 100%, особенно если в этом нет пользы, как в данном случае. Дочерний элемент является блочным элементом, что автоматически расширяет его до ширины родительского элемента (без той проблемы, что мы видим выше). К сожалению, если мы имеем дело со строчно-блочными элементами, то можно воспользоваться следующим фиксом.

Можно не использовать width: 100%, и выставить конкретную ширину элементу самостоятельно. В нашем случае, это 20 — (2 + 1) = 22em. Надо сказать, что это решение плоховато, так как нужно вручную вычислять необходимую ширину элемента. Поищим другой способ!

Третьим вариантом будет использование calc(), чтобы автоматизировать вычисления: width: calc(100% — 3em). Все равно плохо. Во-первых, нам нужно вычислять сумму горизонтальных полей + вертикальных границ. Во-вторых, calc() поддерживается не самым лучшим образом в браузерах (его не поддерживают IE 8, Safari 5, Opera 12 и стандартный браузер Android).

Четвертый вариант — использовать свойство box-sizing: border-box. По существу, она меняет поведение модели контейнера так, что свойство width отражает суммарную ширину элемента, границы и поля включены. Хорошие новости заключаются в том, что поддержка браузерами этого свойства довольно хороша (все, кроме IE 7- и Opera 9).