renovations
This commit is contained in:
Ilya Kantor
parent
dceccedb58
commit
6ac9e3a500
182 changed files with 275 additions and 324 deletions
178
8-css-for-js/10-box-sizing/article.md
Normal file
178
8-css-for-js/10-box-sizing/article.md
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
# Свойство "box-sizing"
|
||||
|
||||
Свойство `box-sizing` может принимать одно из двух значений -- `border-box` или `content-box`. В зависимости от выбранного значения браузер по-разному трактует значение свойств `width/height`.
|
||||
[cut]
|
||||
## Значения box-sizing
|
||||
|
||||
|
||||
|
||||
<dl>
|
||||
<dt>`content-box`</dt>
|
||||
<dd>Это значение по умолчанию. В этом случае свойства `width/height` обозначают то, что находится *внутри `padding`*.</dd>
|
||||
<dt>`border-box`</dt>
|
||||
<dd>Значения `width/height` задают высоту/ширину *всего элемента*.</dd>
|
||||
</dl>
|
||||
|
||||
Для большей наглядности посмотрим на картинку этого `div` в зависимости от `box-sizing`:
|
||||
|
||||
```css
|
||||
div {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
*!*
|
||||
box-sizing: border-box (вверху) | content-box (внизу);
|
||||
*/!*
|
||||
|
||||
padding: 20px;
|
||||
border:5px solid brown;
|
||||
}
|
||||
```
|
||||
|
||||
<img src="border-box.svg">
|
||||
|
||||
В верхнем случае браузер нарисовал весь элемент размером в `width x height`, в нижнем -- интерпретировал `width/height` как размеры внутренней области.
|
||||
|
||||
Исторически сложилось так, что по умолчанию принят `content-box`, а `border-box` некоторые браузеры используют если не указан `DOCTYPE`, в режиме совместимости.
|
||||
|
||||
Но есть как минимум один случай, когда явное указание `border-box` может быть полезно: растягивание элемента до ширины родителя.
|
||||
|
||||
## Пример: подстроить ширину к родителю
|
||||
|
||||
Задача: подогнать элемент по ширине внешнего элемента, чтобы он заполнял всё его пространство. Без привязки к конкретному размеру элемента в пикселях.
|
||||
|
||||
Например, мы хотим, чтобы элементы формы ниже были одинакового размера:
|
||||
|
||||
```html
|
||||
<!--+ autorun -->
|
||||
<style>
|
||||
form {
|
||||
width: 200px;
|
||||
border: 2px solid green;
|
||||
}
|
||||
|
||||
form input, form select {
|
||||
display: block;
|
||||
padding-left: 5px; /* padding для красоты */
|
||||
}
|
||||
</style>
|
||||
|
||||
<form>
|
||||
*!*
|
||||
<input>
|
||||
<input>
|
||||
<select><option>опции</option></select>
|
||||
*/!*
|
||||
</form>
|
||||
```
|
||||
|
||||
Как сделать, чтобы элементы растянулись чётко по ширине `FORM`? Попробуйте добиться этого самостоятельно, перед тем как читать дальше.
|
||||
|
||||
### Попытка width:100%
|
||||
|
||||
Первое, что приходит в голову -- поставить всем `INPUT'ам` ширину `width: 100%`.
|
||||
|
||||
Попробуем:
|
||||
|
||||
```html
|
||||
<!--+ autorun height=100 -->
|
||||
<style>
|
||||
form {
|
||||
width: 200px;
|
||||
border: 2px solid green;
|
||||
}
|
||||
|
||||
form input, form select {
|
||||
display: block;
|
||||
padding-left: 5px;
|
||||
*!*
|
||||
width: 100%;
|
||||
*/!*
|
||||
}
|
||||
</style>
|
||||
|
||||
<form>
|
||||
<input>
|
||||
<input>
|
||||
<select><option>опции</option></select>
|
||||
</form>
|
||||
```
|
||||
|
||||
Как видно, не получается. **Элементы вылезают за пределы родителя.**
|
||||
|
||||
**Причина -- ширина элемента 100% по умолчанию относится к внутренней области, не включающей `padding` и `border`.** То есть, внутренняя область растягивается до `100%` родителя, и к ней снаружи прибавляются `padding/border`, которые и вылезают.
|
||||
|
||||
Есть два решения этой проблемы.
|
||||
|
||||
### Решение: дополнительный элемент
|
||||
|
||||
Можно убрать `padding/border` у элементов `INPUT/SELECT` и завернуть каждый из них в дополнительный `DIV`, который будет обеспечивать дизайн:
|
||||
|
||||
```html
|
||||
<!--+ autorun height=100 -->
|
||||
<style>
|
||||
form {
|
||||
width: 200px;
|
||||
border: 2px solid green;
|
||||
}
|
||||
|
||||
/* убрать padding/border */
|
||||
form input, form select {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* внешний div даст дизайн */
|
||||
form div {
|
||||
padding-left: 5px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<form>
|
||||
<div><input></div>
|
||||
<div><input></div>
|
||||
<div><select><option>опции</option></select></div>
|
||||
</form>
|
||||
```
|
||||
|
||||
В принципе, это работает. Но нужны дополнительные элементы. А если мы делаем дерево или большую редактируемую таблицу, да и вообще -- любой интерфейс, где элементов и так много, то лишние нам точно не нужны.
|
||||
|
||||
Кроме того, такое решение заставляет пожертвовать встроенным в браузер дизайном элементов `INPUT/SELECT`.
|
||||
|
||||
### Решение: box-sizing
|
||||
|
||||
Существует другой способ, гораздо более естественный, чем предыдущий.
|
||||
|
||||
**При помощи `box-sizing: border-box` мы можем сказать браузеру, что ширина, которую мы ставим, относится к элементу полностью, включая `border` и `padding`**:
|
||||
|
||||
```html
|
||||
<!--+ autorun height=100 -->
|
||||
<style>
|
||||
form {
|
||||
width: 200px;
|
||||
border: 2px solid green;
|
||||
}
|
||||
|
||||
form input, form select {
|
||||
display: block;
|
||||
padding-left: 5px;
|
||||
*!*
|
||||
-moz-box-sizing: border-box; /* в Firefox нужен префикс */
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
*/!*
|
||||
}
|
||||
</style>
|
||||
|
||||
<form>
|
||||
<input>
|
||||
<input>
|
||||
<select><option>опции</option></select>
|
||||
</form>
|
||||
```
|
||||
|
||||
Мы сохранили "родную" рамку вокруг `INPUT/SELECT` и не добавили лишних элементов. Всё замечательно.
|
||||
|
||||
Свойство `box-sizing` поддерживается в IE начиная с версии 8.
|
||||
40
8-css-for-js/10-box-sizing/border-box.svg
Normal file
40
8-css-for-js/10-box-sizing/border-box.svg
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="550px" height="399px" viewBox="0 0 550 399" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>border-box.svg</title>
|
||||
<desc>Created with bin/sketchtool.</desc>
|
||||
<defs></defs>
|
||||
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="border-box.svg" sketch:type="MSArtboardGroup">
|
||||
<text id="Содержимое" sketch:type="MSTextLayer" font-family="Times" font-size="18" font-weight="normal" sketch:alignment="middle" fill="#5A4739">
|
||||
<tspan x="306.752441" y="96">Содержимое</tspan>
|
||||
</text>
|
||||
<text id="Содержимое" sketch:type="MSTextLayer" font-family="Times" font-size="18" font-weight="normal" sketch:alignment="middle" fill="#5A4739">
|
||||
<tspan x="306.752441" y="301">Содержимое</tspan>
|
||||
</text>
|
||||
<path d="M218,38 L492,38 L492,145 L218,145 L218,38 Z M232,50 L479,50 L479,133 L232,133 L232,50 Z" id="Path-2" fill="#999647" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M193,243 L517,243 L517,350 L193,350 L193,243 Z M207,255 L504,255 L504,338 L207,338 L207,255 Z" id="Path-2" fill="#999647" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M223,43 L487,43 L487,140 L223,140 L223,43 Z M243,63 L467,63 L467,120 L243,120 L243,63 Z" id="Rectangle-222" fill="#E8C48E" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M198,248 L512,248 L512,345 L198,345 L198,248 Z M218,268 L492,268 L492,325 L218,325 L218,268 Z" id="Rectangle-222" fill="#E8C48E" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M217,20.5 L217,364.570007" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M493,20.5 L493,364.570007" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
|
||||
<text id="border-box" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6C49">
|
||||
<tspan x="317.013672" y="24">border-box</tspan>
|
||||
</text>
|
||||
<text id="content-box" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
|
||||
<tspan x="313.165039" y="229">content-box</tspan>
|
||||
</text>
|
||||
<ellipse id="Oval-5" stroke="#EE6B47" stroke-width="2" sketch:type="MSShapeGroup" cx="87" cy="183.5" rx="76" ry="43.5"></ellipse>
|
||||
<path d="M157,203 L186,221" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
|
||||
<path id="Line-3-decoration-1" d="M185.887766,220.930337 C183.229857,218.044784 180.951649,215.571452 178.29374,212.685898 C177.186278,214.470142 176.237025,215.999495 175.129563,217.783739 C178.894934,218.885048 182.122395,219.829028 185.887766,220.930337 C185.887766,220.930337 185.887766,220.930337 185.887766,220.930337 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
|
||||
<path d="M159,165 L191,146" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
|
||||
<path id="Line-4-decoration-1" d="M190.814626,146.110066 C187.028309,147.137055 183.782895,148.017331 179.996578,149.04432 C181.068709,150.850015 181.987679,152.397754 183.059811,154.203449 C185.773996,151.370765 188.10044,148.94275 190.814626,146.110066 C190.814626,146.110066 190.814626,146.110066 190.814626,146.110066 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
|
||||
<text id="border:-5px;" sketch:type="MSTextLayer" font-family="Consolas" font-size="16" font-weight="bold">
|
||||
<tspan x="32" y="176.64193" fill="#999647">border: 5px;</tspan>
|
||||
<tspan x="137.5625" y="176.64193" fill="#8A704D"></tspan>
|
||||
<tspan x="32" y="195.64193" fill="#E8C48E">padding: 20px;</tspan>
|
||||
<tspan x="155.15625" y="195.64193" fill="#8A704D"></tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
Loading…
Add table
Add a link
Reference in a new issue