From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- files/ru/learn/css/css_layout/grids/index.html | 70 +++++++++++++------------- 1 file changed, 35 insertions(+), 35 deletions(-) (limited to 'files/ru/learn/css/css_layout/grids/index.html') diff --git a/files/ru/learn/css/css_layout/grids/index.html b/files/ru/learn/css/css_layout/grids/index.html index cfdfcd3c83..89129aff25 100644 --- a/files/ru/learn/css/css_layout/grids/index.html +++ b/files/ru/learn/css/css_layout/grids/index.html @@ -60,7 +60,7 @@ translation_of: Learn/CSS/CSS_layout/Grids

Начните с создания локальной копии нашего образца simple-grid.html файла, который содержит следующую разметку в своём теле.

-
<div class="wrapper">
+
<div class="wrapper">
   <div class="row">
     <div class="col">1</div>
     <div class="col">2</div>
@@ -89,7 +89,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 
В элементе {{htmlelement ("style")}} добавьте следующий код, который даёт контейнеру ширину 980 пикселей с отступом с правой стороны 20 пикселей. Это даёт нам 960 пикселей для нашей общей ширины столбца/желоба - в этом случае отступы вычитаются из общей ширины содержимого, потому что мы установили {{cssxref ("box-sizing")}} в рамку по всем элементам на сайте (см. Changing the box model completely для большего объяснения).

 
-
* {
+
* {
   box-sizing: border-box;
 }
 
@@ -105,7 +105,7 @@ body {
 
 
Теперь используйте контейнер строк, который обёрнут вокруг каждой строки сетки, чтобы очистить одну строку от другой. Добавьте следующее правило ниже предыдущего:

 
-
.row {
+
.row {
   clear: both;
 }

 
@@ -115,7 +115,7 @@ body {
 
 
Нам нужно вычесть это из нашей общей ширины 960 пикселей, что даёт нам 720 пикселей для наших столбцов. Если мы разделим это на 12, мы знаем, что каждый столбец должен быть 60 пикселей в ширину. Наш следующий шаг - создать правило для класса .col, плавающее влево, предоставив ему {{cssxref ("margin-left")}} из 20 пикселей для формирования желоба и {{cssxref ("width" )}} из 60 пикселей. Добавьте нижеследующее правило в CSS:

 
-
.col {
+
.col {
   float: left;
   margin-left: 20px;
   width: 60px;
@@ -132,7 +132,7 @@ body {
 
 
Добавьте нижеследующую часть вашего CSS:

 
-
/ * Ширина двух колонок (120 пикселей) плюс одна ширина желоба (20 пикселей) */
+
/ * Ширина двух колонок (120 пикселей) плюс одна ширина желоба (20 пикселей) */
 .col.span2 { width: 140px; }
 / * Три ширины столбца (180 пикселей) плюс две ширины желоба (40 пикселей) * /
 .col.span3 { width: 220px; }
@@ -155,7 +155,7 @@ body {
 
 
Попробуйте изменить классы на своих элементах или даже добавить и удалить некоторые контейнеры, чтобы увидеть, как вы можете изменять макет. Например, вы можете сделать вторую строку следующим образом:

 
-
<div class="row">
+
<div class="row">
   <div class="col span8">13</div>
   <div class="col span4">14</div>
 </div>

@@ -168,17 +168,17 @@ body {
 
 
Уравнение, которое превращает фиксированную ширину в гибкую, основанную на процентах, выглядит следующим образом.

 
-
target / context = result

+
target / context = result

 
 
Для нашей ширины столбца наша целевая ширина составляет 60 пикселей, а наш контекст  960 пикселей. Для расчёта процента мы можем использовать следующее.

 
-
60 / 960 = 0.0625

+
60 / 960 = 0.0625

 
 
Затем мы перемещаем десятичные точки на 2 места, давая нам процент от 6,25%. Таким образом, в нашем CSS мы можем заменить ширину столбца 60 пикселей на 6,25%.

 
 
Мы должны сделать то же самое с нашей шириной желоба:

 
-
20 / 960 = 0.02083333333

+
20 / 960 = 0.02083333333

 
 
Поэтому нам нужно заменить 20 пикселей {{cssxref ("margin-left")}} на наше правило .col  20 пикселей {{cssxref ("padding-right")}} на .wrapper с 2.08333333%.

 
@@ -188,7 +188,7 @@ body {
 
 
Обновите второе правило CSS (с помощью селектора .wrapper) следующим образом:

 
-
body {
+
body {
   width: 90%;
   max-width: 980px;
   margin: 0 auto;
@@ -202,7 +202,7 @@ body {
 
 
Затем обновите четвёртое правило CSS (с селектором .col) следующим образом:

 
-
.col {
+
.col {
   float: left;
   margin-left: 2.08333333%;
   width: 6.25%;
@@ -213,7 +213,7 @@ body {
 
 
Обновите нижний блок правил CSS следующим образом:

 
-
/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
+
/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
 .col.span2 { width: 14.58333333%; }
 /* Three column widths (18.75%) plus two gutter widths (4.1666666) */
 .col.span3 { width: 22.91666666%; }
@@ -240,13 +240,13 @@ body {
 
 
В любом случае, вернёмся к нашим сетям! Любой столбец, который охватывает более одного столбца нашей сетки, имеет общую ширину 6,25%, умноженную на количество столбцов, спаренных плюс 2.08333333%, умноженное на количество желобов (которые всегда будут числом столбцов минус 1). Функция calc () позволяет нам делать это вычисление прямо внутри значения ширины, поэтому для любого элемента, охватывающего 4 столбца, мы можем это сделать, например:

 
-
.col.span4 {
+
.col.span4 {
   width: calc((6.25%*4) + (2.08333333%*3));
 }

 
 
Попробуйте заменить нижний блок правил следующим, а затем перезагрузите его в браузере, чтобы узнать, получаете ли вы тот же результат:

 
-
.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
+
.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
 .col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
 .col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
 .col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
@@ -272,7 +272,7 @@ body {
 
 
Это не единственный подход. Вместо этого вы можете выбрать свою сетку, а затем добавить информацию о размерах в правила для существующих семантических классов. Например, если у вас есть {{htmlelement ("div")}} с классом content в нем, который вы хотите разбить на 8 столбцов, вы можете скопировать по ширине из класса span8, предоставив вам следующее правило:

 
-
.content {
+
.content {
   width: calc((6.25%*8) + (2.08333333%*7));
 }

 
@@ -290,23 +290,23 @@ body {
 
 
Давайте создадим класс в нашем CSS, который будет смещать элемент контейнера на одну ширину столбца. Добавьте нижеследующую часть вашего CSS:

 
-
.offset-by-one {
+
.offset-by-one {
   margin-left: calc(6.25% + (2.08333333%*2));
 }

 
 
Или если вы предпочитаете самостоятельно рассчитать проценты, используйте это:

 
-
.offset-by-one {
+
.offset-by-one {
   margin-left: 10.41666666%;
 }

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

 
-
<div class="col span6">14</div>

+
<div class="col span6">14</div>

 
 
Попробуйте заменить его на

 
-
<div class="col span5 offset-by-one">14</div>

+
<div class="col span5 offset-by-one">14</div>

 
 

 
Примечание: Обратите внимание, что вам необходимо уменьшить количество столбцов, чтобы освободить место для смещения!

@@ -334,7 +334,7 @@ body {
 
 
Однако flexbox никогда не разрабатывался как сетчатая система и создаёт новый набор проблем при использовании в качестве одного. В качестве простого примера мы можем использовать тот же пример разметки, который мы использовали выше, и использовать следующий CSS для стилей классов-оболочек (wrapper), row и col классов:

 
-
body {
+
body {
   width: 90%;
   max-width: 980px;
   margin: 0 auto;
@@ -387,7 +387,7 @@ body {
 
 
Включите скелет и нормализуйте CSS на странице HTML, добавив следующее в голову:

 
-
<link href="normalize.css" rel="stylesheet">
+
<link href="normalize.css" rel="stylesheet">
 <link href="skeleton.css" rel="stylesheet">

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

@@ -398,7 +398,7 @@ body {
 
 
Мы будем использовать аналогичный HTML для нашего предыдущего примера. Добавьте в свой HTML-код следующее:

 
-
<div class="container">
+
<div class="container">
   <div class="row">
     <div class="col">1</div>
     <div class="col">2</div>
@@ -426,7 +426,7 @@ body {
 
 
Вы можете посмотреть в файле skeleton.css, чтобы увидеть CSS, который используется, когда мы применяем этот класс. <div> центрируется с использованием auto левого и правого полей, а отступы в 20 пикселей применяются слева и справа. Скелет также устанавливает свойство {{cssxref ("box-sizing")}} в border-box, как мы делали это раньше, поэтому дополнение и границы этого элемента будут включены в общую ширину.

 
-
.container {
+
.container {
   position: relative;
   width: 100%;
   max-width: 960px;
@@ -441,7 +441,7 @@ body {
 
 
Добавьте их сейчас, как показано в следующем фрагменте:

 
-
<div class="container">
+
<div class="container">
   <div class="row">
     <div class="one column">1</div>
     <div class="one column">2</div>
@@ -452,7 +452,7 @@ body {
 
 
Затем дайте контейнеры во втором классе классов, объясняющие количество столбцов, которые они должны охватывать, например:

 
-
<div class="row">
+
<div class="row">
   <div class="one column">13</div>
   <div class="six columns">14</div>
   <div class="three columns">15</div>
@@ -467,7 +467,7 @@ body {
 
 
Если вы посмотрите в файле skeleton.css, вы увидите, как это работает. Например, у Skeleton определены следующие элементы стиля с добавленными к ним классами «три столбца».

 
-
.three.columns { width: 22%; }

+
.three.columns { width: 22%; }

 
 
Весь Skeleton (или любая другая структура сетки) выполняет настройку предопределённых классов, которые вы можете использовать, добавив их в свою разметку. Это точно так же, как если бы вы сами делали расчёт этих процентов.

 
@@ -491,7 +491,7 @@ body {
 
 
Сначала начните с создания локальной копии файла css-grid.html. Он содержит следующую разметку:

 
-
<div class="wrapper">
+
<div class="wrapper">
   <div class="col">1</div>
   <div class="col">2</div>
   <div class="col">3</div>
@@ -514,7 +514,7 @@ body {
 
 
Теперь добавьте следующее в элемент {{htmlelement ("style")}}:

 
-
.wrapper {
+
.wrapper {
   width: 90%;
   max-width: 960px;
   margin: 0 auto;
@@ -539,13 +539,13 @@ body {
 
 
Чтобы создать контейнеры, которые охватывают несколько треков столбцов в сетке, мы можем использовать свойство {{cssxref ("grid-column")}}. Чтобы охватить 6 столбцов, например:

 
-
.span6 {
+
.span6 {
   grid-column: auto / span 6;
 }

 
 
И для span 3:

 
-
.span3 {
+
.span3 {
   grid-column: auto / span 3;
 }

 
@@ -553,7 +553,7 @@ body {
 
 
Добавьте нижеследующую часть вашего CSS:

 
-
.span2 { grid-column: auto / span 2;}
+
.span2 { grid-column: auto / span 2;}
 .span3 { grid-column: auto / span 3;}
 .span4 { grid-column: auto / span 4;}
 .span5 { grid-column: auto / span 5;}
@@ -571,7 +571,7 @@ body {
 
 
Вы можете проверить это, заменив последние 4 col <div> s следующим:

 
-
<div class="col">13some<br>content</div>
+
<div class="col">13some<br>content</div>
 <div class="col span6">14this<br>is<br>more<br>content</div>
 <div class="col span3">15this<br>is<br>less</div>
 <div class="col span2">16</div>

@@ -590,17 +590,17 @@ body {
 
 
С сетками CSS нам не нужно толкать вещи вдоль полей, чтобы их компенсировать. Попробуйте внести эти изменения в свой CSS:

 
-
.content {
+
.content {
   grid-column: 2 / 8;
 }

 
-
<div class="col span2 content">16</div>

+
<div class="col span2 content">16</div>

 
 
Контейнер 16 теперь будет охватывать столбцы с 2 по 8, в следующей доступной строке, где он может поместиться.

 
 
Мы можем так же легко группировать строки так же, как и столбцы:

 
-
.content {
+
.content {
   grid-column: 2 / 8;
   grid-row: 3 / 5;
 }

-- 
cgit v1.2.3-54-g00ecf