recursal/MDN huggingface dataset:
Понимание CSS z-index
=====================

Обычно HTML страницы можно считать двухмерными, потому что текст, картинки и другие элементы расположены на странице без перекрытия. Существует единый нормальный поток отрисовки (rendering flow) и элементы избегают пространства, занятого другими.`z-index` атрибут позволяет регулировать порядок наложения объектов друг на друга в процессе отрисовки контента (rendering content).

> 
> *В CSS 2.1, позиция каждого блока была в трёх измерениях. В дополнении к их горизонтальной и вертикальной позиции блоки лежали вдоль оси "z" и располагались один поверх другого. Позиция относительно оси "z" особенно актуальна, когда блоки визуально накладываются друг на друга.*
> 
> 
> 

(from CSS 2.1 Section 9.9.1 - Layered presentation)

Это означает, что правила стиля CSS позволяют вам позиционировать блоки на слоях в дополнение к обычному слою рендеринга (слой 0). Положение Z каждого слоя выражается как целое число, представляющее порядок наложения для рендеринга. Большие числа означают ближе к наблюдателю. Положение Z можно контролировать с помощью свойства CSS z-index.

Использование z-index кажется чрезвычайно простым: одно свойство, которому присваивается одно целое число, с простым для понимания поведением. Однако, когда z-index применяется к сложным иерархиям элементов HTML, его поведение может быть трудно понять или предсказать. Это объясняется целым комплексом правил "укладки" элементов. Фактически в спецификации CSS-2.1 Appendix E (CSS-2.1 Приложение Е) зарезервирован целый раздел, подробно объясняющий эти правила.

Данная статья попытается объяснить эти правила, с некоторым упрощением и несколькими примерами.

1. Позиционирование без z-индекса : правила по умолчанию
2. Позиционирование и float : как себя поводят float элементы c позиционированием
3. Использование z-index : Using z-index to change default stacking
4. The stacking context : Notes on the stacking context
5. Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
6. Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
7. Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
### Информация о документе

* Автор: Paolo Lombardi
* Эта статья - английский перевод статьи, которую я написал на итальянском для YappY. Я даю право делиться всем контентом: Creative Commons: Attribution-Sharealike license
* Дата последнего обновления: 9 июля 2005 г.

Примечание автора: спасибо Владимиру Паланту и Роду Уайтли за обзор.
Using z-index
=============

The first part of this article, Stacking without the z-index property, explains how stacking is arranged by default. If you want to create a custom stacking order, you can use the `z-index` property on a positioned element.

Свойство `z-index` может иметь значение в целых числах (положительные, ноль, или отрицательные), что представляет собой позицию элемента вдоль оси z. Если вы не знакомы с **осью** z, представьте себе страницу как стопку слоёв, имеющих собственное порядковое число. Слои представлены в числовом порядке, with larger numbers above smaller numbers.

* bottom layer *(farthest from the observer)*
* ...
* Layer -3
* Layer -2
* Layer -1
* Layer 0 *(default rendering layer)*
* Layer 1
* Layer 2
* Layer 3
* ...
* top layer *(closest to the observer)*

**Примечание:**

* When no `z-index` property is specified, elements are rendered on the default rendering layer 0 (zero).
* If several elements share the same `z-index` value (i.e., they are placed on the same layer), stacking rules explained in the section Stacking without z-index apply.

In the following example, the layers' stacking order is rearranged using `z-index`. The `z-index` of element #5 has no effect since it is not a positioned element.

Source code for the example
---------------------------

### HTML


```html
<div id="abs1">
  <b>DIV #1</b>
  <br />position: absolute; <br />z-index: 5;
</div>

<div id="rel1">
  <b>DIV #2</b>
  <br />position: relative; <br />z-index: 3;
</div>

<div id="rel2">
  <b>DIV #3</b>
  <br />position: relative; <br />z-index: 2;
</div>

<div id="abs2">
  <b>DIV #4</b>
  <br />position: absolute; <br />z-index: 1;
</div>

<div id="sta1">
  <b>DIV #5</b>
  <br />no positioning <br />z-index: 8;
</div>
```

### CSS


```css
div {
  padding: 10px;
  opacity: 0.7;
  text-align: center;
}

b {
  font-family: sans-serif;
}

#abs1 {
  z-index: 5;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  left: 10px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#rel1 {
  z-index: 3;
  height: 100px;
  position: relative;
  top: 30px;
  border: 1px dashed #696;
  background-color: #cfc;
  margin: 0px 50px 0px 50px;
}

#rel2 {
  z-index: 2;
  height: 100px;
  position: relative;
  top: 15px;
  left: 20px;
  border: 1px dashed #696;
  background-color: #cfc;
  margin: 0px 50px 0px 50px;
}

#abs2 {
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  right: 10px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#sta1 {
  z-index: 8;
  height: 70px;
  border: 1px dashed #996;
  background-color: #ffc;
  margin: 0px 50px 0px 50px;
}
```

See also
--------

* Stacking without the z-index property: The stacking rules that apply when `z-index` is not used.
* Stacking with floated blocks: How floating elements are handled with stacking.
* The stacking context: Notes on the stacking context.
* Stacking context example 1: 2-level HTML hierarchy, z-index on the last level
* Stacking context example 2: 2-level HTML hierarchy, z-index on all levels
* Stacking context example 3: 3-level HTML hierarchy, z-index on the second level
Stacking without z-index
========================

### Наложения без Z-индекса

Когда элементы не имеют z-индекса, они накладываются в таком порядке(снизу вверх):

1. Фон и границы корневого элемента.

2. Дочерние блоки в нормальном потоке в порядке размещения(в HTML порядке).

3. Дочерние позиционированные элементы, в порядке размещения (в HTML порядке).

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

> 
> **Примечания:**
> 
> 
> * Given a homogeneous group of elements without any z-index property, such as the positioned blocks (DIV #1 to #4) in the example, the element's stacking order is their order in the HTML hierarchy, regardless of their position.
> * Standard blocks (DIV #5) in the normal flow, without any positioning property, are always rendered before positioned elements, and appear below them, even if they come later in the HTML hierarchy.
> 
> 
> 

Пример
------

### HTML


```html
<div id="absdiv1">
  <br /><span class="bold">DIV #1</span> <br />position: absolute;
</div>
<div id="reldiv1">
  <br /><span class="bold">DIV #2</span> <br />position: relative;
</div>
<div id="reldiv2">
  <br /><span class="bold">DIV #3</span> <br />position: relative;
</div>
<div id="absdiv2">
  <br /><span class="bold">DIV #4</span> <br />position: absolute;
</div>
<div id="normdiv">
  <br /><span class="bold">DIV #5</span> <br />no positioning
</div>
```

### CSS


```css
.bold {
  font-weight: bold;
  font: 12px Arial;
}
#normdiv {
  height: 70px;
  border: 1px dashed #999966;
  background-color: #ffffcc;
  margin: 0px 50px 0px 50px;
  text-align: center;
}
#reldiv1 {
  opacity: 0.7;
  height: 100px;
  position: relative;
  top: 30px;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  margin: 0px 50px 0px 50px;
  text-align: center;
}
#reldiv2 {
  opacity: 0.7;
  height: 100px;
  position: relative;
  top: 15px;
  left: 20px;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  margin: 0px 50px 0px 50px;
  text-align: center;
}
#absdiv1 {
  opacity: 0.7;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  left: 10px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}
#absdiv2 {
  opacity: 0.7;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  right: 10px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}
```

### Результат

(If the image does not display in CodePen, click the Tidy button in the CSS section)

### Так же посмотрите

* Stacking and float : How floating elements are handled
* Adding z-index : Using z-index to change default stacking
* The stacking context : Notes on the stacking context
* Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
* Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
* Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
additive-symbols
================

Описание
--------

Дескриптор аддитивных символов аналогичен дескриптору `symbols()` (en-US) и позволяет пользователю указывать символы которые будут использоваться для представлений счётчика, когда значение дескриптора `system` (en-US) *аддитивное*. Дескриптор `additive-symbols` определяет так называемые аддитивные кортежи, каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес. Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.

Когда значение системного дескриптора является циклическим, числовым, буквенным, символическим или фиксированным, дескриптор `symbols` используется вместо аддитивных символов для указания символов счётчика.

|  |  |
| --- | --- |
| Связано с @-правила | `@counter-style` |
| Начальное значение | `n/a (required)` |
| Обработка значения | как указано |

Синтаксис
---------


```css
additive-symbols: 3 "0";
additive-symbols:
  3 "0",
  2 "\2E\20";
additive-symbols:
  3 "0",
  2 url(symbol.png);
```

### Формальный синтаксис
```

additive-symbols =   
  [ (en-US) <integer [0,∞]> && (en-US) <symbol> ] (en-US)# (en-US)    
  
<symbol> =   
  <string> (en-US)        | (en-US)  
  <image>         | (en-US)  
  <custom-ident>    
  
<image> =   
  <url>       | (en-US)  
  <gradient> (en-US)    
  
<url> =   
  <url()>  | (en-US)  
  <src()>    
  
<url()> =   
  url( <string> (en-US) <url-modifier>\* (en-US) )  | (en-US)  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <url-modifier>\* (en-US) )    
  
```

Пример
------

### HTML


```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

### CSS


```css
@counter-style additive-symbols-example {
  system: additive;
  additive-symbols: I 1;
}
.list {
  list-style: additive-symbols-example;
}
```

### Результат

Спецификации
------------

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-symbols |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `list-style` (en-US), `list-style-image`, `list-style-position` (en-US)
* `symbols()` (en-US), функциональная запись, создающая анонимные стили счётчиков.
inverted-colors
===============

CSS медиа функция **`inverted-colors`** может использоваться для проверки, инвертирует ли user agent или ОС цвета.

Синтаксис
---------

Функция `inverted-colors` указана в качестве значения ключевого слова, выбранного из списка ниже.

`none`

Цвета отображаются нормально.

`inverted`

Все пиксели в отображаемой области были инвертированы.

Пример
------

### HTML


```html
<p>
  Если вы используете инвертированные цвета, этот текст должен быть синим по
  белому (инверсия жёлтого по чёрному). Если нет, он должен быть красным на
  светло-сером.
</p>
<p>
  Если текст серого цвета, ваш браузер не поддерживает медиа-функцию
  `inverted-colors`.
</p>
```

### CSS


```css
p {
  color: gray;
}

@media (inverted-colors: inverted) {
  p {
    background: black;
    color: yellow;
  }
}

@media (inverted-colors: none) {
  p {
    background: #eee;
    color: red;
  }
}
```

### Result

Спецификация
------------

| Specification |
| --- |
| Media Queries Level 5 # inverted |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
scripting
=========

CSS медиа функция **`scripting`** может использоваться для проверки доступности скриптов (таких как JavaScript)

Синтаксис
---------

Функция **`scripting`** указывается в качестве значения ключевого слова, выбранного из списка ниже.

`none`

Скрипты полностью недоступны в текущем документе.

`initial-only`

Скрипты включаются во время начальной загрузки страницы, но не после.

`enabled`

Скрипты поддерживаются и активны в текущем документе.

Пример
------

### HTML


```html
<p class="script-none">You do not have scripting available. :-(</p>
<p class="script-initial-only">
  Your scripting is only enabled during the initial page load. Weird.
</p>
<p class="script-enabled">You have scripting enabled! :-)</p>
```

### CSS


```css
p {
  color: lightgray;
}

@media (scripting: none) {
  .script-none {
    color: red;
  }
}

@media (scripting: initial-only) {
  .script-initial-only {
    color: red;
  }
}

@media (scripting: enabled) {
  .script-enabled {
    color: red;
  }
}
```

### Result

Спецификация
------------

| Specification |
| --- |
| Media Queries Level 5 # scripting |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
prefers-color-scheme
====================

CSS медиа функция **`prefers-color-scheme`** может использоваться для определения того, светлую или тёмную тему использует пользователь в операционной системе.

Синтаксис
---------

`no-preference`

Указывает, что пользователь не сделал никаких предпочтений, известных системе. Значение этого ключевого слова оценивается как `false` в логическом контексте.

`light`

Указывает, что пользователь выбрал светлую тему в операционной системе.

`dark`

Указывает, что пользователь выбрал тёмную тему в операционной системе.

Примеры
-------

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

### HTML


```html
<div class="day">Day (initial)</div>
<div class="day light-scheme">Day (changes in light scheme)</div>
<div class="day dark-scheme">Day (changes in dark scheme)</div>
<br />

<div class="night">Night (initial)</div>
<div class="night light-scheme">Night (changes in light scheme)</div>
<div class="night dark-scheme">Night (changes in dark scheme)</div>
```

### CSS


```css
.day {
  background: #eee;
  color: black;
}
.night {
  background: #333;
  color: white;
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}

.day,
.night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}
```

### Result

Спецификация
------------

| Specification |
| --- |
| Media Queries Level 5 # prefers-color-scheme |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Редизайн вашего продукта и сайта для тёмного режима(en)
Ориентация
==========

CSS медиа-функции **`orientation`** может использоваться для проверки ориентации области просмотра (или поля страницы для медийных страниц).

**Примечание:** Эта функция не соответствует ориентации *устройства*. Открытие программной клавиатуры на многих устройствах в книжной ориентации приведёт к тому, что область просмотра станет шире, чем высокая, в результате чего браузер будет использовать альбомные стили вместо портретного.

Синтаксис
---------

Функция `orientation` указывается в качестве значения ключевого слова, выбранного из списка ниже.

### Значения ключевых слов

`portrait`

Окно просмотра находится в портретной ориентации, то есть высота больше или равна ширине.

`landscape`

Окно просмотра находится в альбомной ориентации, то есть ширина больше высоты.

Пример
------

### HTML


```html
<div>Вставка 1</div>
<div>Вставка 2</div>
<div>Вставка 3</div>
```

### CSS


```css
body {
  display: flex;
}

div {
  background: yellow;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}
```

### Результат

Характеристики
--------------

| Specification |
| --- |
| Media Queries Level 4 # orientation |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
prefers-reduced-motion
======================

CSS медиа функция **`prefers-reduced-motion`** может использоваться для определения того, запросил ли пользователь, чтобы ОС минимизировала количество анимации или движения, которые она использует.

Синтаксис
---------

`no-preference`

Указывает, что пользователь не сделал никаких предпочтений, известных системе.

`reduce`

Указывает, что пользователь уведомил ОС, что он предпочитает интерфейс, который минимизирует количество движения или анимации, предпочтительно до точки, где удаляются все несущественные движения.

Примеры
-------

В этом примере присутствует раздражающая анимация, если вы не включите «Уменьшить движение» в настройках доступности.

### HTML


```html
<div class="animation">animated box</div>
```

### CSS


```css
.animation {
  -webkit-animation: vibrate 0.3s linear infinite both;
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
    -webkit-animation: none;
  }
}
```


```
.animation {
  background-color: rebeccapurple;
  color: #fff;
  font:
    1.2em Helvetica,
    arial,
    sans-serif;
  width: 200px;
  padding: 1em;
  border-radius: 1em;
  text-align: center;
}

/\* ----------------------------------------------
 \* Generated by Animista on 2018-9-2 13:47:0
 \* w: http://animista.net, t: @cssanimista
 \* ---------------------------------------------- \*/

/\*\*
 \* ----------------------------------------
 \* animation vibrate-1
 \* ----------------------------------------
 \*/
@-webkit-keyframes vibrate {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}
@keyframes vibrate {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}
```

### Результат

Спецификация
------------

| Specification |
| --- |
| Media Queries Level 5 # prefers-reduced-motion |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* An introduction to the reduced motion media query
Примеры
=======

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

Теорема Пифагора

Небольшой пример, демонстрирующий доказательство теоремы Пифагора.

Вывод квадратичной формулы

Излагается вывод Квадратичной Формулы.

Мучительный тест MathML

Большой набор тестов разметки.
Справка по элементам MathML
===========================

Здесь представлен алфавитный список **презентационных (presentation)** элементов MathML.

Термин **презентационная разметка (presentation markup)** используется для описания разметки отображения математической системы обозначений, тогда как **разметка содержимого (content markup)** обеспечивает базовый математический смысл и не должна воспроизводиться парсером MathML (смотрите Firefox bug 276028). Если вы хотите узнать больше о разметке контента, вы можете изучить Chapter 4 из спецификации MathML 3.

### math

* `<math>` (Top-level element)
### A

* `<maction>` (Binded actions to sub-expressions)
* `<maligngroup>` (Alignment group)
* `<malignmark>` (Alignment points)
### E

* `<menclose>` (Enclosed contents)
* `<merror>` (Enclosed syntax error messages)
### F

* `<mfenced>` (Parentheses)
* `<mfrac> (en-US)` (Fraction)
### G

* `<mglyph>` (Displaying non-standard symbols)
### I

* `<mi> (en-US)` (Identifier)
### L

* `<mlabeledtr>` (Labeled row in a table or a matrix)
* `<mlongdiv>` (Long division notation)
### M

* `<mmultiscripts> (en-US)` (Prescripts and tensor indices)
### N

* `<mn>` (Number)
### O

* `<mo> (en-US)` (Operator)
* `<mover>` (Overscript)
### P

* `<mpadded> (en-US)` (Space around content)
* `<mphantom> (en-US)` (Invisible content with reserved space)
### R

* `<mroot> (en-US)` (Radical with specified index)
* `<mrow> (en-US)` (Grouped sub-expressions)
### S

* `<ms> (en-US)` (String literal)
* `<mscarries>` (Annotations such as carries)
* `<mscarry>` (Single carry, child element of `<mscarries>`)
* `<msgroup>` (Grouped rows of `<mstack>` and `<mlongdiv>` elements)
* `<msline>` (Horizontal lines inside `<mstack>` elements)
* `<mspace> (en-US)` (Space)
* `<msqrt> (en-US)` (Square root without an index)
* `<msrow>` (Rows in `<mstack>` elements)
* `<mstack>` (Stacked alignment)
* `<mstyle>` (Style change)
* `<msub> (en-US)` (Subscript)
* `<msup> (en-US)` (Superscript)
* `<msubsup> (en-US)` (Subscript-superscript pair)
### T

* `<mtable> (en-US)` (Table or matrix)
* `<mtd> (en-US)` (Cell in a table or a matrix)
* `<mtext> (en-US)` (Text)
* `<mtr> (en-US)` (Row in a table or a matrix)
### U

* `<munder> (en-US)` (Underscript)
* `<munderover> (en-US)` (Underscript-overscript pair)
### Other elements

* `<semantics> (en-US)` (Container for semantic annotations)
* `<annotation>` (en-US) (Data annotations)
* `<annotation-xml>` (en-US) (XML annotations)
See also
--------

* MathML
* MathML attribute reference
Доказательство теоремы Пифагора
===============================

Сейчас мы докажем Теорему Пифагора:

**Утверждение**: В прямоугольном треугольнике квадрат гипотенузы равен сумме квадратов двух других сторон (катетов).

То есть, если 


a
a

 и 


b
b

 - катеты, а 


c
c

 - гипотенуза, то 


a
2

+

b
2

=

c
2

a^2 + b^2 = c^2

.

**Доказательство:** Мы можем доказать теорему алгебраически, показав, что площадь большого квадрата равна площади внутреннего квадрата (квадрата гипотенузы) плюс площадь четырёх треугольников:



(
a
+
b

)
2

=

c
2

+
4
⋅

(

1
2

⋅
a
b

)

(a + b)^2 = c^2 + 4 \cdot \left( \frac{1}{2} \cdot ab \right)




a
2

+
2
⋅
a
b
+

b
2

=

c
2

+
2
⋅
a
b

a^2 + 2 \cdot ab + b^2 = c^2 + 2 \cdot ab




a
2

+

b
2

=

c
2

a^2 + b^2 = c^2
MathML: Вывод Квадратичной Формулы
==================================

На этой странице описывается вывод Квадратичной Формулы.




Мы берём квадратное уравнение в его общем виде и решаем для х:








a
⁢

x
2

+ 
b
⁢
x

+ 
c

=
0



a
⁢

x
2

+ 
b
⁢
x

=
-
 c



x
2

+ 

b

a

⁤
x

=

-
c

a

Делим на главный коэффициент.




x
2

+ 

b

a

⁤
x
+ 

b

2
a

2

=

-
c
(
4
a
)

a
(
4
a
)

+ 

b
2

4

a
2


Дополняем до квадрата.



(
x
+ 

b

2
a

)
(
x
+ 

b

2
a

)
=

b
2

- 
4
a
c

4

a
2



Получен дискриминант.



(
x
+ 

b

2
a

)

2

=

b
2

- 
4
a
c

4

a
2






x
+ 

b

2
a

=

b
2

- 
4
a
c

4

a
2







x

=

-
b

2
a

±

{
C
}


b
2

- 
4
a
c

4

a
2


Это основная формула.




x

=

-
b
±

{
C
}

b
2

- 
4
a
c

2
a