{"id":7162,"date":"2010-04-17T00:07:58","date_gmt":"2010-04-16T22:07:58","guid":{"rendered":"http:\/\/atbliss.ru\/?p=7162"},"modified":"2017-12-25T00:41:29","modified_gmt":"2017-12-24T22:41:29","slug":"konferenciya-rit-2010","status":"publish","type":"post","link":"https:\/\/atbliss.ru\/konferenciya-rit-2010\/","title":{"rendered":"CSS3: \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u0432 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0438"},"content":{"rendered":"<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/p><ul class=\"toc_list\"><li><a href=\"#CSS3_layout\">CSS3: layout<\/a><ul><li><a href=\"#_Grid\">\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f Grid<\/a><\/li><li><a href=\"#_Mozilla_Flexbox\">\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043e\u0442 Mozilla (Flexbox)<\/a><\/li><li><a href=\"#_Template_Layout_W3C\">\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f Template Layout (W3C)<\/a><\/li><\/ul><\/li><\/ul><\/div>\n<p>\u041a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 \u043d\u043e\u0432\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u0445 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0432 \u0441\u0432\u043e\u0435\u043c \u0431\u043b\u043e\u0433\u0435\u00a0\u043d\u0430\u043f\u0438\u0441\u0430\u043b\u00a0\u0437\u0430\u043c\u0435\u0442\u043a\u0443\u00a0\u0415\u0432\u0433\u0435\u043d\u0438\u0439 \u0421\u0442\u0435\u043f\u0430\u043d\u0438\u0449\u0435\u0432, \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u0433\u0440\u0443\u043f\u043f\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u00ab\u042f\u043d\u0434\u0435\u043a\u0441\u00bb, CSS3: layout<\/p>\n<h1 class=\"content-header\"><span id=\"CSS3_layout\">CSS3: layout<\/span><\/h1>\n<div class=\"content-text\">\n<p>\u041f\u0440\u043e \u0431\u0443\u0434\u0443\u0449\u0435\u0435 layout \u0432 CSS. \u0422\u0440\u0438 \u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u2014 <span  class=\"root-pseudo-link js-link\" data-href=\"aHR0cDovL3d3dy53My5vcmcvVFIvY3NzMy1ncmlkLw==\"  data-target=\"_blank\" rel=\"noopener\">Grid\u00a0<\/span>(\u043e\u0442 Microsoft), <span  class=\"root-pseudo-link js-link\" data-href=\"aHR0cDovL3d3dy53My5vcmcvVFIvY3NzMy1mbGV4Ym94Lw==\"  data-target=\"_blank\" rel=\"noopener\">Flexbox\u00a0<\/span>(Mozilla) \u0438 <span  class=\"root-pseudo-link js-link\" data-href=\"aHR0cDovL3d3dy53My5vcmcvVFIvY3NzMy1sYXlvdXQv\"  data-target=\"_blank\" rel=\"noopener\">Template Layout<\/span>\u00a0(W3C).<\/p>\n<p>\u0412\u043a\u0440\u0430\u0442\u0446\u0435.<\/p>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f (Grid) \u0437\u0430\u0434\u0430\u0451\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u0443\u044e \u0441\u0435\u0442\u043a\u0443, \u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443, \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u043a\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435 \u0441\u0435\u0442\u043a\u0438 \u0435\u043c\u0443 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0438 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre class=\"dont-autosize\"><code class=\"hljs css\"><span class=\"hljs-selector-tag\">body<\/span> { <span class=\"hljs-attribute\">columns<\/span>:<span class=\"hljs-number\">3<\/span>; <span class=\"hljs-attribute\">column-gap<\/span>:<span class=\"hljs-number\">0.5in<\/span>; } \r\n<span class=\"hljs-selector-tag\">img<\/span> { <span class=\"hljs-attribute\">float<\/span>:page top right; <span class=\"hljs-attribute\">width<\/span>:<span class=\"hljs-number\">3<\/span>gr; }<\/code><\/pre>\n<p>\u042d\u0442\u043e \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0438 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u0430\u044f \u0438\u0434\u0435\u044f, \u0447\u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b \u0432\u043e\u043f\u0440\u043e\u0441 \u00ab\u0430 \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u0442\u0430\u043a\u00bb, \u043a\u043e\u0433\u0434\u0430 \u044f \u0435\u0449\u0451 \u043d\u0430\u0447\u0438\u043d\u0430\u043b \u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u2014 \u0432 1997-\u043c \u0433\u043e\u0434\u0443. \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043f\u043e\u043a\u0430 \u043d\u0435 \u0434\u043e\u043f\u0438\u0441\u0430\u043d\u0430 (\u0432\u043e\u0442 \u0443\u0436\u0435 \u0442\u0440\u0438 \u0433\u043e\u0434\u0430 \u043a\u0430\u043a) \u0438 \u043d\u0438\u0433\u0434\u0435 \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430.<\/p>\n<p>\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043e\u0442 Mozilla (Flexbox) \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u044d\u0442\u043e \u0447\u0430\u0441\u0442\u044c XUL, \u0442\u043e \u0435\u0441\u0442\u044c \u044d\u0442\u0430 \u0441\u0435\u0442\u043a\u0430 \u0443\u0436\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 Gecko, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0432 Chrome \u0438 Safari. \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0432\u0432\u043e\u0434\u0438\u0442 \u043a\u0443\u0447\u0443 \u043d\u043e\u0432\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u0430 \u0441\u0435\u0442\u043a\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0434\u0440\u0435\u0432\u043e\u0432\u0438\u0434\u043d\u0430\u044f. \u0417\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0438 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0433\u0440\u0443\u043f\u043f \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430.<\/p>\n<p>\u0425\u043e\u0442\u044f \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u044d\u0442\u043e \u0432\u0441\u0451 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u043d\u043e, \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0442\u0430\u043a\u0430\u044f \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0430 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u00ab\u0440\u0435\u0437\u0438\u043d\u043e\u0432\u044b\u0445\u00bb \u0441\u0430\u0439\u0442\u043e\u0432. \u0427\u0435\u043c-\u0442\u043e \u044d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0441\u0442\u0430\u0440\u044b\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043d\u043e \u043a\u0440\u0443\u0447\u0435.<\/p>\n<pre class=\"dont-autosize\"><code class=\"hljs css\">    <span class=\"hljs-selector-id\">#div1<\/span> {\r\n      <span class=\"hljs-attribute\">display<\/span>: box;\r\n      <span class=\"hljs-attribute\">box-lines<\/span>: multiple;\r\n      <span class=\"hljs-attribute\">box-pack<\/span>: center;\r\n      <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">300px<\/span>;\r\n    }\r\n    <span class=\"hljs-selector-tag\">button<\/span> {\r\n      <span class=\"hljs-attribute\">box-flex<\/span>: <span class=\"hljs-number\">1.0<\/span>;\r\n      <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">90px<\/span>;\r\n      <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">90px<\/span>;\r\n    }<\/code><\/pre>\n<p>\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f Template Layout (W3C) \u2014 \u044d\u0442\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 display \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u00ab\u0441\u043b\u043e\u0442\u044b\u00bb, \u00abposition\u00bb \u0437\u0430\u0434\u0430\u0451\u0442 \u0432 \u043a\u0430\u043a\u043e\u043c \u0441\u043b\u043e\u0442\u0435 \u0443 \u043d\u0430\u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442. \u0412\u0438\u0434\u0438\u043c\u043e, \u044d\u0442\u043e \u0431\u043b\u0438\u0436\u0435 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u0430\u043b\u0430\u0433\u0430\u0435\u0442 Microsoft.<\/p>\n<pre class=\"dont-autosize\"><code class=\"hljs css\">  <span class=\"hljs-selector-tag\">body<\/span> { <span class=\"hljs-attribute\">display<\/span>: <span class=\"hljs-string\">\"aaa\"<\/span>\r\n                  <span class=\"hljs-string\">\"bcd\"<\/span> }\r\n  <span class=\"hljs-selector-id\">#head<\/span> { <span class=\"hljs-attribute\">position<\/span>: a }\r\n  <span class=\"hljs-selector-id\">#nav<\/span> { <span class=\"hljs-attribute\">position<\/span>: b }\r\n  <span class=\"hljs-selector-id\">#adv<\/span> { <span class=\"hljs-attribute\">position<\/span>: c }\r\n  <span class=\"hljs-selector-id\">#body<\/span> { <span class=\"hljs-attribute\">position<\/span>: d }<\/code><\/pre>\n<p>\u042d\u0442\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043d\u0438\u0433\u0434\u0435 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430, \u043d\u043e \u0435\u0441\u0442\u044c <span  class=\"root-pseudo-link js-link\" data-href=\"aHR0cDovL2NvZGUuZ29vZ2xlLmNvbS9wL2Nzcy10ZW1wbGF0ZS1sYXlvdXQv\"  data-target=\"_blank\" rel=\"noopener\">\u043f\u043b\u0430\u0433\u0438\u043d \u043a jQuery<\/span>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f Template Layout \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 (\u0432 IE \u0442\u043e\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442).<\/p>\n<p>\u042d\u0442\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u043a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440. \u0421\u0430\u043c\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u0447\u0443\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e Flexbox.<\/p>\n<\/div>\n<p>\u0422\u0440\u0438 \u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f:<\/p>\n<ol>\n<li>Grid (\u043e\u0442 Microsoft) \/\/www.w3.org\/TR\/css3-grid\/.<\/li>\n<li>Flexbox (Mozilla) \/\/www.w3.org\/TR\/css3-flexbox\/.<\/li>\n<li>Template Layout (W3C) \/\/www.w3.org\/TR\/css3-layout\/.<\/li>\n<\/ol>\n<p>\u0412\u043a\u0440\u0430\u0442\u0446\u0435 \u043e\u0431 \u044d\u0442\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n<h2><span id=\"_Grid\">\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f Grid<\/span><\/h2>\n<p><strong>\u041f\u0435\u0440\u0432\u0430\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f (Grid)<\/strong> \u0437\u0430\u0434\u0430\u0451\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u0443\u044e \u0441\u0435\u0442\u043a\u0443, \u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443, \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u043a\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435 \u0441\u0435\u0442\u043a\u0438 \u0435\u043c\u0443 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0438 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<br \/>\n<code><br \/>\nbody { columns:3; column-gap:0.5in; }<br \/>\nimg { float:page top right; width:3gr; }<\/code><\/p>\n<p>\u042d\u0442\u043e \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0438 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u0430\u044f \u0438\u0434\u0435\u044f, \u0447\u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b \u0432\u043e\u043f\u0440\u043e\u0441 \u00ab\u0430 \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u0442\u0430\u043a\u00bb, \u043a\u043e\u0433\u0434\u0430 \u044f \u0435\u0449\u0451 \u043d\u0430\u0447\u0438\u043d\u0430\u043b \u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u2014 \u0432 1997-\u043c \u0433\u043e\u0434\u0443. \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043f\u043e\u043a\u0430 \u043d\u0435 \u0434\u043e\u043f\u0438\u0441\u0430\u043d\u0430 (\u0432\u043e\u0442 \u0443\u0436\u0435 \u0442\u0440\u0438 \u0433\u043e\u0434\u0430 \u043a\u0430\u043a) \u0438 \u043d\u0438\u0433\u0434\u0435 \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430.<\/p>\n<h2><span id=\"_Mozilla_Flexbox\">\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043e\u0442 Mozilla (Flexbox)<\/span><\/h2>\n<p><strong>\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043e\u0442 Mozilla (Flexbox)<\/strong> \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u044d\u0442\u043e \u0447\u0430\u0441\u0442\u044c XUL, \u0442\u043e \u0435\u0441\u0442\u044c \u044d\u0442\u0430 \u0441\u0435\u0442\u043a\u0430 \u0443\u0436\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 Gecko, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0432 Chrome \u0438 Safari. \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0432\u0432\u043e\u0434\u0438\u0442 \u043a\u0443\u0447\u0443 \u043d\u043e\u0432\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u0430 \u0441\u0435\u0442\u043a\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0434\u0440\u0435\u0432\u043e\u0432\u0438\u0434\u043d\u0430\u044f. \u0417\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0438 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0433\u0440\u0443\u043f\u043f \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430.<\/p>\n<p>\u0425\u043e\u0442\u044f \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u044d\u0442\u043e \u0432\u0441\u0451 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u043d\u043e, \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0442\u0430\u043a\u0430\u044f \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0430 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u00ab\u0440\u0435\u0437\u0438\u043d\u043e\u0432\u044b\u0445\u00bb \u0441\u0430\u0439\u0442\u043e\u0432. \u0427\u0435\u043c-\u0442\u043e \u044d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0441\u0442\u0430\u0440\u044b\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043d\u043e \u043a\u0440\u0443\u0447\u0435.<\/p>\n<p><code>#div1 {<br \/>\ndisplay: box;<br \/>\nbox-lines: multiple;<br \/>\nbox-pack: center;<br \/>\nwidth: 300px;<br \/>\n}<br \/>\nbutton {<br \/>\nbox-flex: 1.0;<br \/>\nwidth: 90px;<br \/>\nmax-width: 90px;<br \/>\n}<br \/>\n<\/code><\/p>\n<h2><span id=\"_Template_Layout_W3C\">\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f Template Layout (W3C)<\/span><\/h2>\n<p><strong>\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f Template Layout (W3C)<\/strong> \u2014 \u044d\u0442\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>display <\/code>\u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u00ab\u0441\u043b\u043e\u0442\u044b\u00bb, \u00ab<code>position<\/code>\u00bb \u0437\u0430\u0434\u0430\u0451\u0442 \u0432 \u043a\u0430\u043a\u043e\u043c \u0441\u043b\u043e\u0442\u0435 \u0443 \u043d\u0430\u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442. \u0412\u0438\u0434\u0438\u043c\u043e, \u044d\u0442\u043e \u0431\u043b\u0438\u0436\u0435 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u0430\u043b\u0430\u0433\u0430\u0435\u0442 Microsoft.<\/p>\n<p><code>body { display: \"aaa\"<br \/>\n\"bcd\" }<br \/>\n#head { position: a }<br \/>\n#nav { position: b }<br \/>\n#adv { position: c }<br \/>\n#body { position: d }<\/code><\/p>\n<p>\u042d\u0442\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043d\u0438\u0433\u0434\u0435 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430, \u043d\u043e \u0435\u0441\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d \u043a jQuery (code.google.com\/p\/css-template-layout\/), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f Template Layout \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 (\u0432 IE \u0442\u043e\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442).<\/p>\n<p>\u042d\u0442\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u043a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440. \u0421\u0430\u043c\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u0447\u0443\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e Flexbox.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435CSS3: layout\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f Grid\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043e\u0442 Mozilla (Flexbox)\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f Template Layout (W3C) \u041a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 \u043d\u043e\u0432\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u0445 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0432 \u0441\u0432\u043e\u0435\u043c \u0431\u043b\u043e\u0433\u0435\u00a0\u043d\u0430\u043f\u0438\u0441\u0430\u043b\u00a0\u0437\u0430\u043c\u0435\u0442\u043a\u0443\u00a0\u0415\u0432\u0433\u0435\u043d\u0438\u0439 \u0421\u0442\u0435\u043f\u0430\u043d\u0438\u0449\u0435\u0432, \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u0433\u0440\u0443\u043f\u043f\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u00ab\u042f\u043d\u0434\u0435\u043a\u0441\u00bb, CSS3: layout CSS3: layout \u041f\u0440\u043e \u0431\u0443\u0434\u0443\u0449\u0435\u0435 layout \u0432 CSS. \u0422\u0440\u0438 \u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u2014 Grid\u00a0(\u043e\u0442 Microsoft), Flexbox\u00a0(Mozilla) \u0438 Template Layout\u00a0(W3C). \u0412\u043a\u0440\u0430\u0442\u0446\u0435. \u041f\u0435\u0440\u0432\u0430\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f (Grid) \u0437\u0430\u0434\u0430\u0451\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u0443\u044e \u0441\u0435\u0442\u043a\u0443, \u0430 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[994],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS3: \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u0432 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0438 (Grid, Flexbox \u0438 W3C)<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atbliss.ru\/konferenciya-rit-2010\/\" \/>\n<meta property=\"og:locale\" content=\"ru_RU\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3: \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u0432 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0438 (Grid, Flexbox \u0438 W3C)\" \/>\n<meta property=\"og:description\" content=\"\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435CSS3: layout\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f Grid\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043e\u0442 Mozilla (Flexbox)\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f Template Layout (W3C) \u041a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 \u043d\u043e\u0432\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u0445 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0432 \u0441\u0432\u043e\u0435\u043c \u0431\u043b\u043e\u0433\u0435\u00a0\u043d\u0430\u043f\u0438\u0441\u0430\u043b\u00a0\u0437\u0430\u043c\u0435\u0442\u043a\u0443\u00a0\u0415\u0432\u0433\u0435\u043d\u0438\u0439 \u0421\u0442\u0435\u043f\u0430\u043d\u0438\u0449\u0435\u0432, \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u0433\u0440\u0443\u043f\u043f\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u00ab\u042f\u043d\u0434\u0435\u043a\u0441\u00bb, CSS3: layout CSS3: layout \u041f\u0440\u043e \u0431\u0443\u0434\u0443\u0449\u0435\u0435 layout \u0432 CSS. \u0422\u0440\u0438 \u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u2014 Grid\u00a0(\u043e\u0442 Microsoft), Flexbox\u00a0(Mozilla) \u0438 Template Layout\u00a0(W3C). \u0412\u043a\u0440\u0430\u0442\u0446\u0435. \u041f\u0435\u0440\u0432\u0430\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f (Grid) \u0437\u0430\u0434\u0430\u0451\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u0443\u044e \u0441\u0435\u0442\u043a\u0443, \u0430 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atbliss.ru\/konferenciya-rit-2010\/\" \/>\n<meta property=\"og:site_name\" content=\"\u265b atbliss.ru\" \/>\n<meta property=\"article:published_time\" content=\"2010-04-16T22:07:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-24T22:41:29+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:creator\" content=\"@fortresseo\" \/>\n<meta name=\"twitter:site\" content=\"@fortresseo\" \/>\n<meta name=\"twitter:label1\" content=\"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 \u043c\u0438\u043d\u0443\u0442\u0430\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atbliss.ru\/#website\",\"url\":\"https:\/\/atbliss.ru\/\",\"name\":\"\\u265b atbliss.ru\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/atbliss.ru\/#\/schema\/person\/f2a825e30885a03a307bafc0fe7f546a\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/atbliss.ru\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"ru-RU\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atbliss.ru\/konferenciya-rit-2010\/#webpage\",\"url\":\"https:\/\/atbliss.ru\/konferenciya-rit-2010\/\",\"name\":\"CSS3: \\u0431\\u0443\\u0434\\u0443\\u0449\\u0435\\u0435 \\u043c\\u0435\\u0445\\u0430\\u043d\\u0438\\u0437\\u043c\\u043e\\u0432 \\u0440\\u0430\\u0441\\u043a\\u043b\\u0430\\u0434\\u043a\\u0438 (Grid, Flexbox \\u0438 W3C)\",\"isPartOf\":{\"@id\":\"https:\/\/atbliss.ru\/#website\"},\"datePublished\":\"2010-04-16T22:07:58+00:00\",\"dateModified\":\"2017-12-24T22:41:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atbliss.ru\/konferenciya-rit-2010\/#breadcrumb\"},\"inLanguage\":\"ru-RU\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atbliss.ru\/konferenciya-rit-2010\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atbliss.ru\/konferenciya-rit-2010\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atbliss.ru\/\",\"url\":\"https:\/\/atbliss.ru\/\",\"name\":\"atbliss.ru\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atbliss.ru\/sozdanie-sajta\/\",\"url\":\"https:\/\/atbliss.ru\/sozdanie-sajta\/\",\"name\":\"\\u0421\\u043e\\u0437\\u0434\\u0430\\u043d\\u0438\\u0435 \\u0441\\u0430\\u0439\\u0442\\u0430\"}},{\"@type\":\"ListItem\",\"position\":3,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atbliss.ru\/sozdanie-sajta\/css\/\",\"url\":\"https:\/\/atbliss.ru\/sozdanie-sajta\/css\/\",\"name\":\"CSS\"}},{\"@type\":\"ListItem\",\"position\":4,\"item\":{\"@id\":\"https:\/\/atbliss.ru\/konferenciya-rit-2010\/#webpage\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/atbliss.ru\/konferenciya-rit-2010\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atbliss.ru\/konferenciya-rit-2010\/#webpage\"},\"author\":{\"@id\":\"https:\/\/atbliss.ru\/#\/schema\/person\/f2a825e30885a03a307bafc0fe7f546a\"},\"headline\":\"CSS3: \\u0431\\u0443\\u0434\\u0443\\u0449\\u0435\\u0435 \\u043c\\u0435\\u0445\\u0430\\u043d\\u0438\\u0437\\u043c\\u043e\\u0432 \\u0440\\u0430\\u0441\\u043a\\u043b\\u0430\\u0434\\u043a\\u0438\",\"datePublished\":\"2010-04-16T22:07:58+00:00\",\"dateModified\":\"2017-12-24T22:41:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atbliss.ru\/konferenciya-rit-2010\/#webpage\"},\"wordCount\":109,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/atbliss.ru\/#\/schema\/person\/f2a825e30885a03a307bafc0fe7f546a\"},\"articleSection\":[\"CSS\"],\"inLanguage\":\"ru-RU\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/atbliss.ru\/konferenciya-rit-2010\/#respond\"]}]},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/atbliss.ru\/#\/schema\/person\/f2a825e30885a03a307bafc0fe7f546a\",\"name\":\"atbliss.ru\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/atbliss.ru\/#personlogo\",\"inLanguage\":\"ru-RU\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/61034ac273e6e5c82bf4c34dfe7a3318?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/61034ac273e6e5c82bf4c34dfe7a3318?s=96&r=g\",\"caption\":\"atbliss.ru\"},\"logo\":{\"@id\":\"https:\/\/atbliss.ru\/#personlogo\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/atbliss.ru\/wp-json\/wp\/v2\/posts\/7162"}],"collection":[{"href":"https:\/\/atbliss.ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atbliss.ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atbliss.ru\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/atbliss.ru\/wp-json\/wp\/v2\/comments?post=7162"}],"version-history":[{"count":0,"href":"https:\/\/atbliss.ru\/wp-json\/wp\/v2\/posts\/7162\/revisions"}],"wp:attachment":[{"href":"https:\/\/atbliss.ru\/wp-json\/wp\/v2\/media?parent=7162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atbliss.ru\/wp-json\/wp\/v2\/categories?post=7162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atbliss.ru\/wp-json\/wp\/v2\/tags?post=7162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}