{"id":272026,"date":"2016-01-13T07:15:02","date_gmt":"2016-01-13T04:15:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=272026"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=272026","title":{"rendered":"\u041a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u0438 \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u043f\u043e \u0432\u0451\u0440\u0441\u0442\u043a\u0435"},"content":{"rendered":"<p>       <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/1ce\/3e2\/c73\/1ce3e2c734424532bd09eed3bfc3febd.jpg\" align=\"left\"\/><\/p>\n<h4><b>CSS Refresher<\/b><\/h4>\n<p>  \u042d\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u0438 \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u043f\u043e \u0432\u0451\u0440\u0441\u0442\u043a\u0435. \u0421\u0432\u043e\u0435\u043e\u0431\u0440\u0430\u0437\u043d\u0430\u044f \u043f\u0430\u043c\u044f\u0442\u043a\u0430 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043a\u0430\u0436\u0434\u043e\u0434\u043d\u0435\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 CSS. \u041e\u0441\u0432\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0441\u0430\u043c\u044b\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u0442\u0435\u043c\u044b, \u043e\u0442 \u0434\u0435\u0442\u0430\u043b\u0435\u0439 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f SVG \u0438 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432. \u041f\u0440\u043e\u0435\u043a\u0442 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e github \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0432 \u043d\u0435\u043c \u0443\u0447\u0430\u0441\u0442\u0438\u0435, \u0442\u0430\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u0438 \u043d\u0435 \u0441\u043b\u044b\u0448\u0430\u043b\u0438.<\/p>\n<h4><b>\u041e\u0442 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430<\/b><\/h4>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e \u0432\u0441\u0435\u0445, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041c\u0430\u043a\u0441\u0438\u043c \u0418\u0432\u0430\u043d\u043e\u0432, \u0438 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b \u0434\u043b\u044f \u0432\u0430\u0441 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0438\u0437 \u0421\u0430\u043d-\u0424\u0440\u0430\u043d\u0446\u0438\u0441\u043a\u043e <a href=\"http:\/\/www.vasanthk.com\/#\/resume\">\u0412\u0430\u0441\u0430\u043d\u0442\u0430 \u041a\u0440\u0438\u0448\u043d\u0430\u043c\u0443\u0440\u0442\u0438<\/a> (Vasanth Krishnamoorthy) \u00ab<a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes\">CSS Refresher<\/a>\u00bb. Web-\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u043e\u0442\u0440\u0430\u0441\u043b\u0435\u0439 \u0432 \u043d\u0430\u0448\u0435 \u0432\u0440\u0435\u043c\u044f. \u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0432\u043e\u0437\u044c\u043c\u0438 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0432\u0438\u0434\u0435\u043e\u043a\u0443\u0440\u0441 \u043d\u0430 tuts+ \u0438 \u043e\u0441\u0432\u043e\u0439 html-\u0432\u0435\u0440\u0441\u0442\u043a\u0443, \u043e\u0434\u043d\u0430\u043a\u043e, \u043a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a Opera Software \u0412\u0430\u0434\u0438\u043c \u041c\u0430\u043a\u0435\u0435\u0432, \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u044f \u043d\u0430 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 CodeFest, \u043e\u043d\u0438 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u044e\u0442 \u043f\u043b\u043e\u0445\u043e. \u041d\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043c\u043e\u0436\u0435\u0442 \u043c\u044b \u0438\u0442\u0430\u043a \u0432\u0441\u0435 \u044d\u0442\u043e \u0437\u043d\u0430\u0435\u043c. <\/p>\n<h4><b>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/b><\/h4>\n<p>  <\/p>\n<ol>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#positioning\">\u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 (position)<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#display\">\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 (display)<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#floats\">\u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b (float)<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#css-selectors\">CSS \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#selector-efficiency\">\u042d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#repaints-and-reflows\">\u041f\u0435\u0440\u0435\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0438 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#css3-properties\">CSS3 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/a> <\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#css3-media-queries\">CSS3 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#responsive-web-design\">\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 web-\u0434\u0438\u0437\u0430\u0439\u043d<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#css3-transitions\">CSS3 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#css-animations\">CSS3 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#scalable-vector-graphics-svg\">\u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430 (SVG)<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#css-sprites\">CSS \u0441\u043f\u0440\u0430\u0439\u0442\u044b<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#vertical-alignment\">\u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#known-issues\">\u0418\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/a><\/li>\n<\/ol>\n<p>  <a name=\"habracut\"><\/a>  <\/p>\n<h4><b>1. \u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/b><\/h4>\n<p>  CSS \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0434\u043e 5 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 position. \u041d\u043e \u043f\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443, \u0442\u043e\u043b\u044c\u043a\u043e 4 \u0438\u0437 \u043d\u0438\u0445 \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f.  <\/p>\n<pre><code class=\"css\">div {   position: static; \/* \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e *\/   position: relative;   position: absolute;   position: fixed;   position: inherit; \/* \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f *\/ } <\/code><\/pre>\n<p>  <\/p>\n<h5><b>\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435<\/b> (static, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e):<\/h5>\n<p>  <\/p>\n<ul>\n<li>\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u0437\u0430\u0434\u0430\u0432\u0430\u044f \u0435\u0433\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c, \u044d\u0442\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043e \u043a \u044d\u0442\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f. \u0422\u0430\u043a\u0430\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0440\u0435\u0434\u043a\u0430\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u0441\u043a\u0430\u0434\u043e\u043c.<\/li>\n<\/ul>\n<h5><b>\u041e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435<\/b> (relative):<\/h5>\n<p>  <\/p>\n<ul>\n<li>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043c\u0435\u0449\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u0445, \u0441\u0434\u0432\u0438\u0433\u0430\u0442\u044c \u043e\u0442 \u0432\u0435\u0440\u0445\u043d\u0435\u0439, \u043f\u0440\u0430\u0432\u043e\u0439, \u043d\u0438\u0436\u043d\u0435\u0439 \u0438 \u043b\u0435\u0432\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0448\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439 \u0434\u043b\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430, \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e.<\/li>\n<li>\u041f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0432 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 relative \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043e\u0431\u044a\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435, \u0435\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u0438\u0445 \u0432 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 static.<\/li>\n<li>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Z-\u0438\u043d\u0434\u0435\u043a\u0441\u044b, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e Z-\u0438\u043d\u0434\u0435\u043a\u0441\u044b \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435 \u0443\u043c\u0435\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 Z-\u0438\u043d\u0434\u0435\u043a\u0441\u0430, \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0432\u0435\u0440\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438-\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/li>\n<li>\u042d\u0442\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u0444\u0435\u0440\u0443 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041b\u044e\u0431\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430.<\/li>\n<\/ul>\n<h5><b>\u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0435<\/b> (absolute):<\/h5>\n<p>  <\/p>\n<ul>\n<li>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0435 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u043c \u043f\u043e\u0442\u043e\u043a\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043e\u043d \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0441\u0440\u0435\u0434\u0438 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u0430\u043b\u0438, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0431\u044b\u043b \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0438\u043b\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438. \u041f\u0440\u043e\u0441\u0442\u043e \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u0433\u0434\u0435 \u0435\u043c\u0443 \u0431\u044b\u0442\u044c \u0438 \u043e\u043d \u043f\u0440\u0438\u043b\u0438\u043f\u043d\u0435\u0442.<\/li>\n<li>\u0414\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c absolute, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0432\u0435\u0440\u0445\u0443, \u0441\u043b\u0435\u0432\u0430, \u0441\u043d\u0438\u0437\u0443 \u0438 \u0441\u043f\u0440\u0430\u0432\u0430, \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043c\u0435\u0441\u0442\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0432 \u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432. \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c (\u0438\u043b\u0438 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u043c) \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c. \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0430\u043c\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/li>\n<li>\u041a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441, \u0438 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u0430\u0436\u043d\u0430\u044f \u0432\u0435\u0449\u044c, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043f\u0440\u043e \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u044d\u0442\u0438\u043c \u0442\u0438\u043f\u043e\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/li>\n<\/ul>\n<h5><b>\u0424\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435<\/b> (fixed):<\/h5>\n<p>  <\/p>\n<ul>\n<li>\u041f\u043e\u0434\u043e\u0431\u043d\u043e \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u043c\u0443 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e, \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438, \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u043c \u043f\u043e\u0442\u043e\u043a\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u041e\u0434\u043d\u0430\u043a\u043e, \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0430\u043c\u043e\u0433\u043e \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/li>\n<li>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0435\u0440\u0435\u0442 \u0441\u0432\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/li>\n<li>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u044f\u0435\u0442\u0441\u044f \u043a \u0442\u043e\u0447\u043a\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0438 \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. <\/li>\n<\/ul>\n<h5><b>\u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u043d\u043e\u0435<\/b> (inherit):<\/h5>\n<p>  <\/p>\n<ul>\n<li>\u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u0441\u0432\u043e\u0435\u0433\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f. \u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0435\u0441\u043b\u0438 \u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u0438.<\/li>\n<\/ul>\n<h5><b>\u0412 \u0438\u0442\u043e\u0433\u0435<\/b>:<\/h5>\n<p>  <\/p>\n<ul>\n<li>\u041e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0430\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0435\u0431\u044f.<\/li>\n<li>\u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0430\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043d\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f.<\/li>\n<li>\u041a\u0430\u043a \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435, \u0442\u0430\u043a \u0438 \u0438 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e-\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0440\u044f\u0434\u043e\u043c \u0441 \u043d\u0438\u043c\u0438 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 (\u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e-\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430, \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u0435\u0436\u043d\u0435\u043c \u043f\u043e\u0442\u043e\u043a\u0435).<\/li>\n<\/ul>\n<h5><b>\u041f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438<\/b>:<\/h5>\n<p>  <\/p>\n<ul>\n<li>\u0412\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e position \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e float. \u0415\u0441\u043b\u0438 \u0432\u044b \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043e\u0431\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u0430\u0448\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u044b\u043b\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c.<\/li>\n<li>\u0412\u043d\u0435\u0448\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b (margin) \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e-\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444 (p \u044d\u043b\u0435\u043c\u0435\u043d\u0442) \u0441 \u043d\u0438\u0436\u043d\u0438\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u043c \u0432 20px (\u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439). \u041d\u0438\u0436\u0435 \u043d\u0435\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441 \u0432\u0435\u0440\u0445\u043d\u0438\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u043c \u0432 30px. \u041f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u043e\u043c \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 50px (20px + 30px), \u0430 \u0441\u043a\u043e\u0440\u0435\u0435 30px (30px &gt; 20 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439). \u042d\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u043e\u0442\u0441\u0442\u0443\u043f\u044b. \u0414\u0432\u0430 \u043e\u0442\u0441\u0442\u0443\u043f\u0430 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u044e\u0442 (\u0438\u043b\u0438 \u0441\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f) \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c\u0441\u044f \u0432 \u043e\u0434\u0438\u043d. \u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e-\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u044e\u0442 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043f\u0435\u0440\u0435\u0434 \u0432\u0430\u043c\u0438 \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u0439 \u043a\u0430\u0437\u0443\u0441. <\/li>\n<\/ul>\n<h5><b>\u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:<\/h5>\n<p>  <a href=\"https:\/\/css-tricks.com\/absolute-relative-fixed-positioining-how-do-they-differ\/\">Absolute, Relative, Fixed Positioning: How Do They Differ?<\/a><br \/>  <a href=\"http:\/\/alistapart.com\/article\/css-positioning-101\">CSS Positioning 101<\/a><br \/>  <a href=\"http:\/\/www.barelyfitz.com\/screencast\/html-training\/css\/positioning\/\">Learn CSS Positioning in Ten Steps<\/a><\/p>\n<h4><b>2. \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435<\/b><\/h4>\n<p>  \u041a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 display \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0431\u044f \u044d\u0442\u043e\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a, \u043a\u0430\u043a\u0438\u043c \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c.<\/p>\n<pre><code class=\"css\">div {     display: inline;     display: inline-block;     display: block;     display: run-in;     display: flex;     display: grid;     display: none; } <\/code><\/pre>\n<p>  \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u0447\u043d\u044b\u043c\u0438 (inline), \u043a\u0440\u043e\u043c\u0435 \u0442\u0435\u0445, \u043a\u0442\u043e \u0437\u0430\u0432\u0435\u0434\u043e\u043c\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u0443\u043a\u0430\u0437\u0430\u043d \u043a\u0430\u043a \u0431\u043b\u043e\u0447\u043d\u044b\u0439 (block). \u0412 \u043b\u0443\u0447\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u0432\u043e\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0441\u0442\u0438\u043b\u0435\u0439, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0437\u0430\u0434\u0430\u0432 \u0435\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u00abblock\u00bb.<\/p>\n<h5><b>\u0421\u0442\u0440\u043e\u0447\u043d\u044b\u0439<\/b> (inline):<\/h5>\n<p>  <\/p>\n<ul>\n<li>\u0421\u0442\u0440\u043e\u0447\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0438\u043c\u0435\u044e\u0449\u0438\u0435 \u00abinline\u00bb \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0422\u0430\u043a\u0438\u0435 \u043a\u0430\u043a span, b, em \u0438 \u0442\u0434.<\/li>\n<li>CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0438 \u043d\u0438\u0436\u043d\u0435\u0433\u043e margin\/padding \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043d\u043e \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u044b \u043b\u0435\u0432\u044b\u0439 \u0438 \u043f\u0440\u0430\u0432\u044b\u0435 margin\/padding \u043e\u0442\u0441\u0442\u0443\u043f\u044b. \u0422\u043e \u0435\u0441\u0442\u044c \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u043d\u043e \u043d\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438.<\/li>\n<li>\u0414\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b.<\/li>\n<li>\u0415\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u0442\u0435\u043a\u0430\u0435\u043c\u044b\u043c (\u0438\u043c\u0435\u0435\u0442 float), \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043e\u043d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u00abblock\u00bb \u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0431\u043b\u043e\u0447\u043d\u044b\u043c.<\/li>\n<\/ul>\n<h5><b>\u0411\u043b\u043e\u0447\u043d\u043e-\u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0439 <\/b> (inline-block):<\/h5>\n<p>  <\/p>\n<ul>\n<li>\u0411\u043b\u043e\u0447\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0442\u0435\u043a\u0430\u0435\u0442\u0441\u044f \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u043e \u0441\u0442\u0440\u043e\u0447\u043d\u043e\u043c\u0443.<\/li>\n<li>\u0422\u0430\u043a\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443, \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b (\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438). <\/li>\n<li>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0442\u0430\u043a\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u00abblock\u00bb (\u0441\u043b\u043e\u0432\u043d\u043e \u0432\u044b \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, img), \u043e\u0434\u043d\u0430\u043a\u043e \u0437\u0430\u0442\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u043a\u0430\u043a \u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442.<\/li>\n<li>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0441 \u0432\u043d\u0435\u0448\u043d\u0438\u043c\u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c\u0438.<\/li>\n<\/ul>\n<h5><b>\u0411\u043b\u043e\u0447\u043d\u044b\u0439 <\/b> (block):<\/h5>\n<p>  <\/p>\n<ul>\n<li>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0440\u044f\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u043c\u0435\u044e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u00abblock\u00bb. \u0422\u0430\u043a\u0438\u0435 \u043a\u0430\u043a div, section, ul \u0438 \u0442\u0434. <\/li>\n<li>\u0411\u043b\u043e\u0447\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u0438\u0434\u0443\u0442 \u0434\u0440\u0443\u0433 \u0437\u0430 \u0434\u0440\u0443\u0433\u043e\u043c, \u043a\u0430\u043a \u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0435, \u043e\u043d\u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443. \u0415\u0441\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0448\u0438\u0440\u0438\u043d\u0430 \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u0430, \u0431\u043b\u043e\u043a \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d \u0434\u043e \u0448\u0438\u0440\u0438\u043d\u044b \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442 \u0435\u0433\u043e.<\/li>\n<li>\u0418\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f vertical-align.<\/li>\n<\/ul>\n<h5><b>\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u044b\u0439 <\/b> (run-in):<\/h5>\n<p>  <\/p>\n<ul>\n<li>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u0430\u043a \u0431\u043b\u043e\u0447\u043d\u044b\u0439 \u0438\u043b\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430.<\/li>\n<li>\u041d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 Firefox + \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430.<\/li>\n<li>\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 display \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 run-in \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0431\u043b\u043e\u043a, \u0442\u043e \u043e\u043d \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u0441 \u043d\u0438\u043c \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u044c\u044e. \u0418\u043d\u0430\u0447\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u044b\u0432 \u0441\u0442\u0440\u043e\u043a\u0438.<\/li>\n<\/ul>\n<h5><b>\u0421\u043a\u0440\u044b\u0442\u044b\u0439 <\/b> (none):<\/h5>\n<p>  <\/p>\n<ul>\n<li>\u041f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/li>\n<li>\u0412 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 DOM \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u043e\u043d \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0438, \u0432 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/li>\n<\/ul>\n<h5><b>\u0422\u0430\u0431\u043b\u0438\u0447\u043d\u044b\u0439 <\/b> (table):<\/h5>\n<p>  <\/p>\n<ul>\n<li>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0446\u0435\u043b\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439, \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044f \u0442\u0430\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435. <\/li>\n<li>\u0422\u0430\u043a\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0440\u0435\u0434\u043a\u043e, \u0438\u043d\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u043e\u0441\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u043c\u044b\u0441\u043b\u043e\u0432\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432 \u0432\u0430\u0448\u0435\u043c \u043a\u043e\u0434\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446.<\/li>\n<\/ul>\n<pre><code class=\"css\">div {   display: table;   display: inline-table; \/* \u043a\u0430\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u0430, \u043d\u043e \u0432 \u0441\u0442\u0438\u043b\u0435 inline-block *\/   display: table-cell;   display: table-column;   display: table-colgroup;   display: table-header-group;   display: table-row-group;   display: table-footer-group;   display: table-row;   display: table-caption; } <\/code><\/pre>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u041f\u0440\u0438\u043c\u0435\u0440:  <\/p>\n<pre><code class=\"html\">&lt;div style=&quot;display: table;&quot;&gt;   &lt;div style=&quot;display: table-row;&quot;&gt;     &lt;div style=&quot;display: table-cell;&quot;&gt;       \u041f\u0440\u043e\u0442\u0438\u0432\u043d\u043e, \u043d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u043e.     &lt;\/div&gt;   &lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<h5><b>\u0410\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439<\/b> (flex):<\/h5>\n<p>  <\/p>\n<ul>\n<li>\u041d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430 \u043d\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u0438 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043c\u0435\u0441\u0442\u0430 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 (\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0431\u043b\u043e\u043a\u0435), \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440 \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u0435\u043d \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439.<\/li>\n<li>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f flex-\u0431\u043b\u043e\u043a\u043e\u0432, \u043e\u0431\u043b\u0430\u0434\u0430\u0442\u044c \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0432\u043e\u044e \u0448\u0438\u0440\u0438\u043d\u0430\/\u0432\u044b\u0441\u043e\u0442\u0430 (\u0438 \u0434\u0440\u0443\u0433\u043e\u0435), \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e (\u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c, \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u0432\u0441\u0435\u0445 \u0432\u0438\u0434\u0430\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u044d\u043a\u0440\u0430\u043d\u0430).<\/li>\n<li>\u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u043b\u0438\u0431\u043e \u0432\u0434\u043e\u043b\u044c \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u043e\u0441\u0438, \u043b\u0438\u0431\u043e \u0432\u0434\u043e\u043b\u044c \u043f\u043e\u043f\u0435\u0440\u0435\u0447\u043d\u043e\u0439 \u043e\u0441\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/li>\n<li>Flex-\u0431\u043b\u043e\u043a\u0438 \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043c\u0435\u043b\u043a\u043e\u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a grid-\u0431\u043b\u043e\u043a\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430.<\/li>\n<li>\u0422\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 inline-block, inline-table, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438 inline-flex.<\/li>\n<\/ul>\n<h5><b>\u0421\u0435\u0442\u043e\u0447\u043d\u044b\u0439<\/b> (grid):<\/h5>\n<p>  <\/p>\n<ul>\n<li>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 grid \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043c\u0430\u043a\u0435\u0442 \u0441\u0435\u0442\u043a\u0438. \u041e\u043d\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430 \u043d\u0430 \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441\u043e \u0441\u0442\u0430\u0440\u044b\u043c\u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u0431\u043b\u043e\u043a\u043e\u0432, \u0438\u043c\u0435\u044e\u0449\u0438\u0445 float \u0438 inline-block, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0438\u043c\u0435\u044e\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438, \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0430\u043b\u0438\u0441\u044c \u0434\u043b\u044f \u043c\u0430\u043a\u0435\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/li>\n<li>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f grid-\u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044f \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0438\u043c\u0435\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0431\u043b\u043e\u043a\u043e\u0432 \u0432 \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0438 \u0441\u0442\u0440\u043e\u043a\u0438, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0431\u043e\u0440\u0430 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432.<\/li>\n<li>\u0412\u043c\u0435\u0441\u0442\u0435 \u0441 \u044d\u0442\u0438\u043c \u0444\u0430\u043a\u0442\u043e\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u043e\u043f\u0438\u0440\u0430\u044f\u0441\u044c \u043d\u0430 \u0441\u0442\u0430\u0440\u0443\u044e \u0442\u0435\u0445\u043d\u0438\u043a\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u0430\u0439\u0442\u043e\u0432, \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u044b \u0442\u0440\u0430\u0442\u0438\u0442\u0435 \u043c\u0435\u043d\u044c\u0448\u0435 \u0443\u0441\u0438\u043b\u0438\u0439.<\/li>\n<li>\u041d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u0422\u043e\u043b\u044c\u043a\u043e \u0432 IE10+.<\/li>\n<li>\u0422\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 inline-block, inline-table, inline-flex, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438 inline-grid<\/li>\n<\/ul>\n<h5><b>\u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:<\/h5>\n<p>  <a href=\"http:\/\/flexboxfroggy.com\/\">Flexbox Froggy<\/a><br \/>  <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/d\/display\/\">CSS Almanac: Display<\/a><br \/>  <a href=\"http:\/\/www.impressivewebs.com\/difference-block-inline-css\/\">The Difference Between \u201cBlock\u201d and \u201cInline\u201d<\/a><br \/>  <a href=\"http:\/\/learnlayout.com\/display.html\">Learn CSS Layout: The \u00abdisplay\u00bb property<\/a><\/p>\n<h4><b>3. \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/b><\/h4>\n<p>  <\/p>\n<pre><code class=\"css\">div {   float: none; \/* \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e *\/   float: left;   float: right;   float: both;   float: inherit; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>Float \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043f\u043e \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u0442\u0435\u043a\u0430\u0442\u044c \u0435\u0433\u043e \u0441 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u043e\u0440\u043e\u043d. \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 (\u043e\u0431\u0442\u0435\u043a\u0430\u044e\u0449\u0438\u0435) \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0442\u043e\u043a\u0435, \u0437\u0430\u0442\u0435\u043c \u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0442\u043e\u043a, \u0438 \u043e\u043d\u0438 \u0441\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u043b\u0438\u0431\u043e \u0432\u043f\u0440\u0430\u0432\u043e, \u043b\u0438\u0431\u043e \u0432\u043b\u0435\u0432\u043e (\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f) \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435. \u0418\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043e\u043d\u0438 \u0438\u0434\u0443\u0442 \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0434\u0440\u0443\u0433 \u0437\u0430 \u0434\u0440\u0443\u0433\u043e\u043c. \u0423\u0447\u0438\u0442\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430, \u044d\u0442\u0438 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0438 \u043d\u0435 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043c\u0435\u0436\u0434\u0443 \u044d\u0442\u0438\u043c\u0438 \u0441\u0430\u043c\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438.<\/li>\n<li>\u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443. \u042d\u0442\u043e \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e float \u0432\u0435\u0434\u0435\u0442 \u0441\u0435\u0431\u044f \u0442\u0430\u043a \u043a\u0430\u043a \u0438 \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c, \u0438\u0437\u0431\u0435\u0433\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445.<\/li>\n<li>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043f\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439: left, right, both, inherit, \u0438 none. \u041f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u00ableft\u00bb \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u0438\u0434\u0443\u0449\u0438\u043c \u0432 DOM \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435, \u0447\u0442\u043e \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0431\u0442\u0435\u043a\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u043b\u0435\u0432\u043e\u0433\u043e \u043a\u0440\u0430\u044f.<\/li>\n<li>\u041f\u0440\u0430\u0432\u0438\u043b\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b \u0434\u043b\u044f \u0441\u0435\u0431\u044f, \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043b\u044f \u043c\u043e\u0438\u0445 float-\u043c\u0430\u043a\u0435\u0442\u043e\u0432.\u0412 \u0441\u0432\u043e\u0435\u043c HTML \u043a\u043e\u0434\u0435, \u044f \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u044e \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043d\u0438\u043c\u0438. \u0412\u044b \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u0435 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0438 \u044d\u0442\u043e \u0434\u0430\u0435\u0442 \u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/li>\n<li>\u041d\u043e \u0438 \u0442\u0443\u0442 \u0431\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0435 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0431\u043b\u043e\u043a \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u0441\u0432\u043e\u0438\u0445 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0432\u044b\u0441\u043e\u0442\u0443 \u0440\u0430\u0432\u043d\u0443\u044e \u043d\u0443\u043b\u044e. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u043e\u043c\u0430\u0442\u044c \u0432\u0430\u0448\u0443 \u0432\u0435\u0440\u0441\u0442\u043a\u0443. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u0435\u0442\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0432\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438. \u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e overflow (\u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435) \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c hidden (\u0441\u043a\u0440\u044b\u0442\u044c). \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 overflow \u043d\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043e \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0440\u043e\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0441\u043a\u0440\u044b\u0442\u0438\u0435 \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0438\u043b\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u043e\u0441 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438.<\/li>\n<\/ul>\n<p>  \u0425\u0430\u043a: \u0434\u043b\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043b\u0443\u0447\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u2018overflow:auto\u2019 \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443.<\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u0442\u0440\u044e\u043a \u043d\u0435 \u043e\u0447\u0438\u0449\u0430\u0435\u0442 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u2014 \u043e\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c float, \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0435 \u043e\u0447\u0438\u0449\u0430\u044e\u0449\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0438\u043b\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u043c \u043d\u0443\u0436\u043d\u043e\u043c \u0432\u0430\u043c \u043c\u0435\u0441\u0442\u0435, \u0441\u043e\u0437\u0434\u0430\u0432 \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0442\u043e\u043a. \u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u043e\u0447\u0438\u0449\u0430\u0442\u044c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n<h5><b>9 \u043f\u0440\u0430\u0432\u0438\u043b<\/b>:<\/h5>\n<p>  1. \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u0436\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u043a \u0433\u0440\u0430\u043d\u0438\u0446\u0430\u043c \u0441\u0432\u043e\u0438\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432, \u043d\u043e \u043d\u0435 \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<p>  2. \u041b\u044e\u0431\u043e\u0439 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043b\u0438\u0431\u043e \u0440\u044f\u0434\u043e\u043c, \u043b\u0438\u0431\u043e \u043d\u0438\u0436\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0415\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u0436\u0430\u0442\u044b \u0432\u043b\u0435\u0432\u043e, \u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0442\u043e\u0447\u043d\u043e \u0441\u043f\u0440\u0430\u0432\u0430 \u043e\u0442 \u043f\u0435\u0440\u0432\u043e\u0433\u043e. \u0415\u0441\u043b\u0438 \u043e\u043d\u0438 \u043f\u0440\u0438\u0436\u0430\u0442\u044b \u0432\u043f\u0440\u0430\u0432\u043e, \u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0432\u0430 \u043e\u0442 \u043f\u0435\u0440\u0432\u043e\u0433\u043e (reverse).<\/p>\n<p>  3. \u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u043b\u0435\u0432\u044b\u043c \u043e\u0431\u0442\u0435\u043a\u0430\u043d\u0438\u0435\u043c, \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0430\u0432\u0435\u0435, \u0447\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u043f\u0440\u0430\u0432\u044b\u043c \u043e\u0431\u0442\u0435\u043a\u0430\u043d\u0438\u0435\u043c.<\/p>\n<p>  4. \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0434\u043d\u044f\u0442\u044c\u0441\u044f \u0432\u044b\u0448\u0435 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043a\u0440\u0430\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 (\u043e\u0434\u043d\u0430\u043a\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0435\u0449\u0435 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u044b \u043e\u0442\u0441\u0442\u0443\u043f\u044b).<\/p>\n<p>  5. \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u0448\u0435 \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u043e\u0441\u0435\u0434\u0430 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  6. \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u0448\u0435 \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u043e\u0441\u0435\u0434\u0430 \u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  7. \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441\u043e \u0441\u0432\u043e\u0438\u043c \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u0441\u043e\u0441\u0435\u0434\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c, \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0445\u043e\u0434\u0438\u0442\u044c \u0437\u0430 \u043a\u0440\u0430\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<p>  8. \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u043e\u043c\u0435\u0449\u0435\u043d \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0448\u0435.<\/p>\n<p>  9. \u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u043b\u0435\u0432\u044b\u043c \u043e\u0431\u0442\u0435\u043a\u0430\u043d\u0438\u0435\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u043e\u043c\u0435\u0449\u0435\u043d \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u043b\u044c\u0448\u0435 \u0432\u043b\u0435\u0432\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u043f\u0440\u0430\u0432\u044b\u043c \u043e\u0431\u0442\u0435\u043a\u0430\u043d\u0438\u0435\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u043e\u043c\u0435\u0449\u0435\u043d \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u043b\u044c\u0448\u0435 \u0432\u043f\u0440\u0430\u0432\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e.<\/p>\n<h5><b>\u041f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438<\/b>:<\/h5>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;img src=&quot;http:\/\/lorempixum.com\/200\/200\/&quot;&gt; &lt;p&gt;Lorem ipsum...&lt;\/p&gt; <\/code><\/pre>\n<pre><code class=\"css\">img {   float: right;   margin: 20px; } <\/code><\/pre>\n<p>  \u0412\u043d\u0435\u0448\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a \u0430\u0431\u0437\u0430\u0446\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u0434\u0430\u043b\u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u043e\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u2014 \u0431\u043b\u043e\u043a! \u0412\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443 \u043e\u043d \u043d\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0438 \u0430\u0431\u0437\u0430\u0446\u0435\u043c.<\/p>\n<h5><b>\u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:<\/h5>\n<p>  <a href=\"http:\/\/www.quirksmode.org\/css\/clearing.html\">Clearing floats<\/a><br \/>  <a href=\"http:\/\/designshack.net\/articles\/css\/everything-you-never-knew-about-css-floats\/\">Everything You Never Knew About CSS Floats<\/a><br \/>  <a href=\"http:\/\/alistapart.com\/article\/css-floats-101\">CSS Floats 101<\/a><\/p>\n<h4><b>4. CSS \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b<\/b><\/h4>\n<p>  <\/p>\n<pre><code class=\"css\">div#container &gt; ul {   border: 1px solid black; } <\/code><\/pre>\n<p>  \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 \u0432\u044b\u0431\u043e\u0440\u043a\u043e\u0439 X Y \u0438 X &gt; Y \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u044f\u043c\u044b\u0435 \u043f\u043e\u0442\u043e\u043c\u043a\u0438.<\/p>\n<pre><code class=\"css\">ul ~ p {    color: red; } <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u0425 + Y, \u043d\u043e \u043e\u043d \u043c\u0435\u043d\u0435\u0435 \u0441\u0442\u0440\u043e\u0433\u0438\u0439. \u0412 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u0441\u043c\u0435\u0436\u043d\u044b\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 (ul + p) \u0432\u044b\u0431\u0435\u0440\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0440\u0435\u0434\u0448\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e \u043f\u043e\u0441\u043b\u0435 p, \u0432 \u043d\u0430\u0448\u0435\u043c \u0436\u0435 \u0441\u043b\u0443\u0447\u0430\u0435, \u044d\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u043e\u0431\u043e\u0431\u0449\u0435\u043d\u043d\u0430\u044f \u0432\u044b\u0431\u043e\u0440\u043a\u0430. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u043d \u043e\u0442\u0431\u0435\u0440\u0435\u0442 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b p, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0437\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c ul.<\/p>\n<pre><code class=\"css\">a[href*=&quot;google&quot;] {   color: #1f6053; } <\/code><\/pre>\n<p>  \u0417\u0432\u0435\u0437\u0434\u0430 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0433\u0434\u0435-\u0442\u043e \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430.<\/p>\n<pre><code class=\"css\">a[href^=&quot;http&quot;] {    background: url(path\/to\/external\/icon.png) no-repeat;    padding-left: 10px; } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0441\u044b\u043b\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 href, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0441 http, \u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440, \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435.<\/p>\n<pre><code class=\"css\">a[href$=&quot;.jpg&quot;] {    color: red; } <\/code><\/pre>\n<p>  \u0418 \u0441\u043d\u043e\u0432\u0430, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u0438\u043c\u0432\u043e\u043b \u2014 $, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0449\u0435\u0442 \u0441 \u043a\u043e\u043d\u0446\u0430 \u0441\u0442\u0440\u043e\u043a\u0438. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0438\u0449\u0435\u043c \u0432\u0441\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430 \u0444\u043e\u0440\u043c\u0430\u0442 JPG.<\/p>\n<pre><code class=\"css\">a[data-info~=&quot;image&quot;] {    border: 1px solid black; } <\/code><\/pre>\n<p>  \u0422\u0438\u043b\u044c\u0434\u0430 (~), \u0441\u0438\u043c\u0432\u043e\u043b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0438\u0441\u043a\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u043c.<\/p>\n<pre><code class=\"css\">div:not(#container) {    color: blue; } <\/code><\/pre>\n<p>  \u0412\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b div, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043e\u0434\u043d\u043e\u0433\u043e, \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u0435\u0435\u0442 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<pre><code class=\"css\">p::first-line {    font-weight: bold;    font-size: 1.2em; } <\/code><\/pre>\n<p>  \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0441\u0435\u0432\u0434\u043e-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b (\u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 ::) \u0432 \u0441\u0442\u0438\u043b\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0438\u043b\u0438 \u043f\u0435\u0440\u0432\u0443\u044e \u0431\u0443\u043a\u0432\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0431\u043b\u043e\u0447\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<pre><code class=\"css\">li:nth-child(3) {    color: red; } <\/code><\/pre>\n<p>  nth-child \u043f\u0441\u0435\u0432\u0434\u043e-\u043a\u043b\u0430\u0441\u0441\u044b \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0441\u0442\u0435\u043a\u0435 (\u043d\u0430\u0431\u043e\u0440 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u043f\u043e \u0442\u0438\u043f\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432). \u041e\u043d\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0446\u0435\u043b\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430, \u0442\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043e\u0442\u0441\u0447\u0435\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u0441 \u043d\u0443\u043b\u044f. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0432\u044b\u0442\u0430\u0449\u0438\u0442\u044c \u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 li:nth-child(2). \u041c\u044b \u0434\u0430\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0434\u0443\u044e\u0449\u0438\u0435\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0441\u0442\u0435\u043a\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e (\u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442). \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0442\u0430\u0449\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c li:nth-child(4n).<\/p>\n<pre><code class=\"css\">li:nth-last-child(2) {    color: red; } <\/code><\/pre>\n<p>  \u0427\u0442\u043e \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 UL, \u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442? \u041f\u0443\u0441\u0442\u044c \u0443 \u043d\u0430\u0441 \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0437 10 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a li:nth-child(9), \u043d\u043e \u0430 \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435.<\/p>\n<pre><code class=\"css\">li:first-child {     border-top: none; }  li:last-child {    border-bottom: none; } <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u0440\u0438 \u0437\u0430\u0434\u0430\u043d\u0438\u0438 \u0440\u0430\u043c\u043e\u043a \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0434\u043b\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0438 \u0442\u0430\u0431\u043b\u0438\u0446.<\/p>\n<h5><b>\u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:<\/h5>\n<p>  <a href=\"http:\/\/code.tutsplus.com\/tutorials\/the-30-css-selectors-you-must-memorize--net-16048\">The 30 CSS Selectors you Must Memorize<\/a><\/p>\n<h4><b>5. \u042d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b<\/b><\/h4>\n<p>  \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 (c \u0443\u0447\u0435\u0442\u043e\u043c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u043f\u043e\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438). \u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438, \u0430 \u043f\u0441\u0435\u0432\u0434\u043e-\u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u043f\u0441\u0435\u0432\u0434\u043e-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438.<\/p>\n<pre><code class=\"css\">id (#myid) class (.myclass) tag (div, h1, p) adjacent sibling (h1 + p) child (ul &gt; li) descendant (li a) universal (*) attribute (a[rel=\u201dexternal\u201d]) pseudo-class and pseudo element (a:hover, li:first) <\/code><\/pre>\n<h5><b>\u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:<\/h5>\n<p>  <a href=\"http:\/\/vanseodesign.com\/css\/css-selector-performance\/\">CSS Selectors: Should You Optimize Them To Perform Better?<\/a><\/p>\n<h4><b>6. \u041f\u0435\u0440\u0435\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0438 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442<\/b><\/h4>\n<p>  <\/p>\n<h5><b>\u041f\u0435\u0440\u0435\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430<\/b> (repaint):<\/h5>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0435, \u043a\u0430\u043a redraw \u2014 \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0447\u0442\u043e-\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0432\u0438\u0434\u0438\u043c\u044b\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0435\u0441\u043b\u0438 \u0440\u0430\u043d\u0435\u0435 \u043e\u043d\u043e \u0431\u044b\u043b\u043e \u0441\u043a\u0440\u044b\u0442\u043e (visibility:hidden, overflow:hidden, display:none, \u0438 \u0434\u0440), \u0438\u043b\u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 (visibility:visible, overflow:auto, display:static, \u0438 \u0434\u0440), \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043c\u0430\u043a\u0435\u0442\u0435. \u041f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e: \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0440\u0430\u043c\u043a\u0438, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u0444\u043e\u043d\u0430, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u2014 \u0432\u0441\u0435 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043f\u0435\u0440\u0435\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0422\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0434\u0430\u043d\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0440\u043e\u0433\u043e \u0432\u0430\u043c \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0432 \u043f\u043b\u0430\u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u043f\u043e\u0438\u0441\u043a\u043e\u043c, \u043f\u0440\u043e\u0445\u043e\u0434\u0430\u043c\u0438 \u043f\u043e \u0432\u0441\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u0447\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0438\u0434\u0438\u043c\u044b\u043c \u0443\u0436\u0435, \u0430 \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c\u0441\u044f.<\/p>\n<h5><b>\u041f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442<\/b> (reflow):<\/h5>\n<p>  \u041f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442 (\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0430) \u043d\u043e\u0441\u0438\u0442 \u0431\u043e\u043b\u0435\u0435 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440. \u042d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0432\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441 DOM-\u0434\u0435\u0440\u0435\u0432\u043e\u043c HTML \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0438\u043b\u0438 \u043a\u043e\u0433\u0434\u0430 \u0441\u0442\u0438\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 class \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0438\u043b\u0438 \u0432\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0426\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u0433\u0434\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 \u0441\u0430\u0439\u0442\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f. \u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0442\u043e\u0433\u0434\u0430 \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0438 \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u0430\u043d\u044b. \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a DOM \u0431\u044b\u043b\u043e \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043e, \u0431\u0443\u0434\u0443\u0442 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0437\u0430\u043d\u043e\u0432\u043e. \u0415\u0441\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0442\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u0430\u043d \u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0447\u0442\u043e\u0431\u044b \u0443\u0447\u0435\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0438\u0445 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432. \u0417\u0430\u0442\u0435\u043c, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0435\u0440\u0435\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430.<\/p>\n<p>  \u041f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u0440\u043e\u0433\u043e \u043e\u0431\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043f\u043b\u0430\u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u0447\u0438\u043d \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0441 \u043d\u0438\u0437\u043a\u043e\u0439 \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043c\u043e\u0449\u043d\u043e\u0441\u0442\u0438, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u044b.<\/p>\n<h5><b>\u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442<\/b> (minimal reflow):<\/h5>\n<p>  \u0414\u043e\u043b\u0433\u0438\u0439 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u0432\u0435\u0441\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442, \u0432\u0441\u044e \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u0427\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442, \u0442\u0435\u043c \u0434\u043e\u043b\u044c\u0448\u0435 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442. \u041c\u0435\u043d\u044c\u0448\u0435 HTML-\u043a\u043e\u0434\u0430 \u043b\u0443\u0447\u0448\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043b\u0438 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c, \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0442\u043e\u043a\u0435, \u0435\u0441\u043b\u0438 \u0432 \u043d\u0438\u0445 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0434\u0432\u0435\u0440\u0436\u0435\u043d\u044b \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u0443. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0443\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0435\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b, \u043d\u043e \u044d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0430\u0431\u044b\u0439 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440, \u0447\u0435\u043c \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442 \u0432\u0441\u0435\u0433\u043e DOM-\u0434\u0435\u0440\u0435\u0432\u0430.<\/p>\n<p>  \u0422\u0430\u043a \u0447\u0442\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0430 \u043a\u043e \u0432\u0441\u0435\u043c\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0443, \u0431\u044b\u043b\u043e \u0431\u044b \u043b\u0443\u0447\u0448\u0438\u043c, \u0435\u0441\u043b\u0438 \u0431\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0414\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e.<\/p>\n<h5><b>\u0427\u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442<\/b>:<\/h5>\n<p>   \u2014 \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u043a\u043d\u0430<br \/>   \u2014 \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u0430<br \/>   \u2014 \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0438\u043b\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u0441\u0442\u0438\u043b\u0435\u0439<br \/>   \u2014 \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0432\u043e\u0434\u0438\u0442 \u0442\u0435\u043a\u0441\u0442 \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430<br \/>   \u2014 \u0410\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u044f CSS \u043f\u0441\u0435\u0432\u0434\u043e-\u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0441\u043e\u0431\u044b\u0442\u0438\u0435 :hover<br \/>   \u2014 \u041c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c class<br \/>   \u2014 \u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441 DOM-\u0434\u0435\u0440\u0435\u0432\u043e\u043c<br \/>   \u2014 \u0420\u0430\u0441\u0447\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 offsetWidth \u0438 offsetHeight<br \/>   \u2014 \u0417\u0430\u0434\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 style<\/p>\n<p>  \u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a, \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u041f\u043e\u043b\u043e\u043c \u0410\u0439\u0440\u0438\u0448\u043e\u043c (Paul Irish), \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u0443 DOM \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u0441\u044f <a href=\"https:\/\/gist.github.com\/paulirish\/5d52fb081b3570c81e3a\">\u0442\u0443\u0442<\/a>. <\/p>\n<h5><b>\u041a\u0430\u043a \u0441\u0432\u0435\u0441\u0442\u0438 \u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c\u0443 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/b>:<\/h5>\n<p>   \u2014 \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u043a\u043b\u0430\u0441\u0441\u0430 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0436\u0435 (\u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0439 \u0432 DOM-\u0434\u0435\u0440\u0435\u0432\u0435).<br \/>   \u2014 \u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439.<br \/>   \u2014 \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0438\u043b\u0438 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<br \/>   \u2014 \u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438.<br \/>  \u0414\u0430\u0436\u0435 \u043d\u0435\u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u044f\u0447\u0435\u0439\u043a\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0432\u044b\u0437\u043e\u0432\u0443\u0442 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442 \u043d\u0430 \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0443\u0437\u043b\u0430\u0445 \u0442\u0430\u0431\u043b\u0438\u0446\u044b.<br \/>   \u2014 \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 CSS (\u0442\u043e\u043b\u044c\u043a\u043e \u0432 IE)<\/p>\n<h5><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/b>:<\/h5>\n<p>  \u041f\u043e\u0442\u0435\u0442\u044c \u043d\u0430\u0434 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u043c\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u043e. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0431\u044b\u0441\u0442\u0440\u044b\u0435 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435, \u0447\u0442\u043e \u043d\u0430 \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0435\u0441\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u0438 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b. <\/p>\n<p>  \u0427\u0440\u0435\u0437\u043c\u0435\u0440\u043d\u044b\u0435 \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0431\u0438\u0442\u044c \u043f\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0447\u0435\u043c \u043b\u044e\u0431\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432 \u0441\u0432\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442. \u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u0440\u0438\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0432\u043e\u0438\u0445 css-\u0441\u0442\u0438\u043b\u044f\u0445. 3000 \u0441\u0442\u0440\u043e\u043a \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0438\u043b\u0438 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u0445 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0441\u0442\u0438\u043b\u0435\u0439, \u0432 \u043d\u0430\u0448\u0435 \u0432\u0440\u0435\u043c\u044f, \u044d\u0442\u043e \u043d\u0435 \u0440\u0435\u0434\u043a\u043e\u0441\u0442\u044c. \u0415\u0441\u043b\u0438 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430, \u0440\u0430\u0437\u0431\u0435\u0439\u0442\u0435 \u0432\u0430\u0448 \u043e\u0434\u0438\u043d \u0438 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 styles.css \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043b\u0443\u0447\u0448\u0438\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c.<\/p>\n<h5><b>\u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:<\/h5>\n<p>  <a href=\"http:\/\/www.stubbornella.org\/content\/2009\/03\/27\/reflows-repaints-css-performance-making-your-javascript-slow\/\">Reflows &#038; Repaints: CSS performance making your JavaScript slow?<\/a><br \/>  <a href=\"http:\/\/csswizardry.com\/2011\/09\/writing-efficient-css-selectors\/\">Writing efficient CSS selectors<\/a><br \/>  <a href=\"http:\/\/stackoverflow.com\/questions\/5797014\/why-do-browsers-match-css-selectors-from-right-to-left\">Why do browsers match CSS selectors from right to left?<\/a><br \/>  <a href=\"https:\/\/benfrain.com\/css-performance-revisited-selectors-bloat-expensive-styles\/\">CSS performance revisited: selectors, bloat and expensive styles<\/a><\/p>\n<h4><b>7. CSS3 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/b><\/h4>\n<p>  <\/p>\n<h5><b>border-radius<\/b>:<\/h5>\n<p>  <\/p>\n<pre><code class=\"css\">-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; <\/code><\/pre>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0435\u0442 \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u043d\u044b\u0435 \u043a\u0440\u0430\u044f \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>  \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0435 \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0435 CSS3 \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u0432\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b (-webkit-, -moz-, -ms-, -o-) \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 css-\u043f\u0440\u0430\u0432\u0438\u043b, \u043b\u0438\u0431\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c css-\u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u044b \u0434\u043b\u044f \u043e\u0431\u043b\u0435\u0433\u0447\u0435\u043d\u0438\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f css-\u043a\u043e\u0434\u0430.<\/p>\n<h5><b>box-shadow<\/b>:<\/h5>\n<p>  <\/p>\n<pre><code class=\"css\">-webkit-box-shadow: 1px 1px 3px #292929; -moz-box-shadow: 1px 1px 3px #292929; box-shadow: 1px 1px 3px #292929; <\/code><\/pre>\n<p>  \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043b\u0435\u0433\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0442\u0435\u043d\u0438 (\u043d\u0430\u0440\u0443\u0436\u043d\u044b\u0439 \u0438\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439) \u0443 \u0431\u043b\u043e\u0447\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0446\u0432\u0435\u0442\u0430, \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u044f \u0438 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f. <\/p>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0434\u0430\u0432\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 css3 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0434\u0430\u043b\u0435\u0435 \u0431\u0443\u0434\u0435\u043c \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e IE.<br \/>  \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430: IE9+<\/p>\n<p>  box-shadow \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0447\u0435\u0442\u044b\u0440\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430: x-\u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435, y-\u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435, \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u0435, \u0446\u0432\u0435\u0442 \u0442\u0435\u043d\u0438.<\/p>\n<p>  \u041f\u0435\u0440\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0435\u0442 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0442\u0435\u043d\u0438, \u0441 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0442\u0435\u043d\u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0438 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043b\u0435\u0432\u0430.<\/p>\n<p>  \u0412\u0442\u043e\u0440\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0442\u0435\u043d\u0438, \u0441 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0442\u0435\u043d\u0438 \u043e\u0442 \u043d\u0438\u0436\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0438 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u0435\u0440\u0445\u0443.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0442\u0440\u0435\u0442\u044c\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u044f \u0442\u0435\u043d\u0438. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0438 \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043c\u044b\u0442\u044b \u043a\u0440\u0430\u044f.<\/p>\n<p>  \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0442\u0435\u043d\u0438. \u041f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0442\u0435\u043d\u044c \u0444\u043e\u0440\u043c\u044b \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c\u0441\u044f \u0432\u043e \u0432\u0441\u0435\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u0445, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0443\u0442 \u0441 \u0443\u0436\u0435\u043d\u0438\u044e.<\/p>\n<pre><code class=\"css\">-webkit-box-shadow: 0 0 20px #333 inset; -moz-box-shadow: 0 0 20px #333 inset; box-shadow: 0 0 20px #333 inset; <\/code><\/pre>\n<p>  \u041d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e &#8216;insert&#8217; \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u043f\u043e\u0441\u043b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438 \u0446\u0432\u0435\u0442\u0430 \u0442\u0435\u043d\u0438. \u0415\u0441\u043b\u0438 \u043e\u043d\u043e \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442, \u0442\u043e\u0433\u0434\u0430 \u0442\u0435\u043d\u044c \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430: IE9+<\/p>\n<h5><b>text-shadow<\/b>:<\/h5>\n<pre><code class=\"css\">color: #fff; text-shadow: 0 0 50px #333; <\/code><\/pre>\n<p>  \u0422\u0435\u043a\u0441\u0442\u043e\u0432\u0430\u044f \u0442\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u0442\u0435\u043d\u0438 \u0440\u0430\u043c\u043e\u043a \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0442\u0435\u043d\u044f\u043c\u0438 \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430, \u0430 \u043d\u0435 \u0442\u0435\u043d\u044c\u044e \u0432\u0441\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u043d\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e.<\/p>\n<p>  \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0442\u0435\u043d\u0438 \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u0442\u0430\u043a\u0438\u0435 \u0436\u0435, \u043a\u0430\u043a \u0434\u043b\u044f box-shadow \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u043a\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430.<\/p>\n<p>  \u041a\u0430\u043a \u0441 box-shadow, \u043c\u043e\u0436\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0442\u0435\u043d\u0435\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u044f \u0438\u0445 \u0437\u0430\u043f\u044f\u0442\u044b\u043c\u0438. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0438\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u044b\u043b\u0430\u044e\u0449\u0435\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430:<\/p>\n<pre><code class=\"css\">text-shadow: 0 0 4px #ccc,              0 -5px 4px #ff3,              2px -10px 6px #fd3,              -2px -15px 11px #f80,              2px -18px 18px #f20; <\/code><\/pre>\n<p>  \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430: IE10+<\/p>\n<h5><b>\u0413\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b<\/b>:<\/h5>\n<p>  \u041c\u043e\u0436\u043d\u043e \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0444\u043e\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u043b\u043e\u0448\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c, \u043b\u0438\u0431\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u0434\u0430\u0442\u044c \u0435\u0433\u043e \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b, \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0432 CSS, \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  \u0413\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u2014 \u044d\u0442\u043e, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043e\u0434\u0438\u043d \u0446\u0432\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439, \u043d\u043e \u0432 CSS \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0430\u0441\u043f\u0435\u043a\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c, \u043e\u0442 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0433\u043e \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"css\">.gradient {   \/* \u043a\u0430\u043a \u0437\u0430\u043f\u0430\u0441\u043d\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 *\/   background-color: red;    \/* \u0431\u0443\u0434\u0435\u0442 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0435\u0439, \u0435\u0441\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0435\u0433\u043e *\/   background-image: linear-gradient(red, orange);    \/* \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441\u0431\u0440\u043e\u0441\u044f\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u0430\u043a \u0444\u043e\u043d-\u043f\u043e\u0437\u0438\u0446\u0438\u044f, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u0439\u043c\u0435\u0442, \u0447\u0442\u043e \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0442 \u043d\u0435\u0433\u043e *\/   background: red;   background: linear-gradient(red, orange); } <\/code><\/pre>\n<p>  \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430: IE10+<\/p>\n<h5><b>\u041b\u0438\u043d\u0435\u0439\u043d\u044b\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b<\/b>:<\/h5>\n<p>  \u041f\u043e\u0436\u0430\u043b\u0443\u0439, \u0441\u0430\u043c\u044b\u0439 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0439 \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0432\u0438\u0434 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430. \u041f\u043e \u043e\u0441\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u0435\u0442 \u0438\u0434\u0442\u0438 \u0441\u043b\u0435\u0432\u0430-\u043d\u0430\u043f\u0440\u0430\u0432\u043e, \u0441\u0432\u0435\u0440\u0445\u0443-\u0432\u043d\u0438\u0437, \u0438\u043b\u0438 \u043f\u043e\u0434 \u043b\u044e\u0431\u044b\u043c \u0443\u0433\u043b\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442\u0435 \u0443\u0433\u043e\u043b, \u0442\u043e\u0433\u0434\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0430\u043d\u0430 \u043e\u0441\u044c \u0441\u0432\u0435\u0440\u0445\u0443-\u0432\u043d\u0438\u0437. \u0427\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u043e\u0441\u044c \u0441\u043b\u0435\u0432\u0430-\u043d\u0430\u043f\u0440\u0430\u0432\u043e, \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0433\u043e \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430, \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0443\u044e\u0441\u044f \u0441\u043e \u0441\u043b\u043e\u0432\u0430 \u00abto right\u00bb, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u00ab\u043d\u0430\u043f\u0440\u0430\u0432\u043e\u00bb. \u0421\u043b\u043e\u0432\u043e \u00abto\u00bb \u043b\u0438\u0448\u044c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0430 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u0443\u0433\u043b\u043e\u0432. \u0412\u044b \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0435 \u0441\u0435\u0431\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0432\u0443\u043c\u044f \u0446\u0432\u0435\u0442\u0430\u043c\u0438. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c, \u0433\u0434\u0435 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0442\u043e\u0442 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u0446\u0432\u0435\u0442. \u0412\u0441\u0435 \u044d\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u00abcolor-stops\u00bb.<\/p>\n<pre><code class=\"css\">.gradient {   height: 100px;   background-image:     linear-gradient(       to right,       red,       yellow 10%     ); } <\/code><\/pre>\n<h5><b>\u041f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438<\/b>:<\/h5>\n<p>  \u041c\u044b \u0441\u043a\u043b\u043e\u043d\u043d\u044b \u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0442\u043e \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b \u043b\u0438\u0448\u044c \u0440\u0430\u0437\u043c\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0446\u0432\u0435\u0442, \u043d\u043e \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0446\u0432\u0435\u0442\u0430, \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435\u0441\u044c \u043d\u0430 \u043d\u0438\u0445, \u0447\u0442\u043e \u0436\u0435, \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438 \u0441\u043f\u043b\u043e\u0448\u043d\u043e\u0439 \u0446\u0432\u0435\u0442, \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439, \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0441\u0442\u044b\u0439 \u0446\u0432\u0435\u0442. <\/p>\n<p>  \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0442\u0440\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442:<br \/>   \u2014 \u0421\u0442\u0430\u0440\u044b\u0439: \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a WebKit \u0438 \u0435\u0433\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c from() \u0438 color-stop()<br \/>   \u2014 \u0420\u0435\u0434\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439: \u0441\u0442\u0430\u0440\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0443\u0433\u043b\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u00abto left\u00bb<br \/>   \u2014 \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439: \u043d\u043e\u0432\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0443\u0433\u043b\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u00abto right\u00bb<\/p>\n<p>  \u041a\u0441\u0442\u0430\u0442\u0438 \u0441\u0442\u0430\u0440\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0441\u0435\u0439\u0447\u0430\u0441, \u0445\u043e\u0442\u044f \u043d\u043e\u0432\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f. \u041f\u043e \u0441\u0442\u0430\u0440\u043e\u043c\u0443 \u0441\u043f\u043e\u0441\u043e\u0431\u0443 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c 0deg \u0438 \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e \u0438 \u0438\u0434\u0435\u0442 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0442\u0438\u0432 \u0447\u0430\u0441\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0438, \u0432 \u043d\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 (\u043e\u0431\u044b\u0447\u043d\u043e \u0431\u0435\u0437 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430) \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 0deg \u043a\u0430\u043a \u0441\u043d\u0438\u0437\u0443 \u0432\u0432\u0435\u0440\u0445 \u0438 \u043f\u043e \u0447\u0430\u0441\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0435.<\/p>\n<p>  \u0424\u043e\u0440\u043c\u0443\u043b\u0430: OLD (or TWEENER) = (450 \u2014 new) % 360<br \/>  \u0418\u043b\u0438 \u0434\u0430\u0436\u0435 \u043f\u0440\u043e\u0449\u0435: NEW = 90 \u2014 OLD, OLD = 90 \u2014 NEW<br \/>  \u0421\u0442\u0430\u0440\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441: linear-gradient(135deg, red, blue)<br \/>  \u041d\u043e\u0432\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441: linear-gradient(315deg, red, blue)<\/p>\n<h5><b>\u0420\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b<\/b>:<\/h5>\n<p>  \u0420\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0445 \u0442\u0435\u043c, \u0447\u0442\u043e \u043e\u043d \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043e\u0434\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u0438 \u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430\u0440\u0443\u0436\u0443. \u0413\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u0438 \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435, \u043a\u0430\u043a \u043c\u044b \u0437\u043d\u0430\u0435\u043c, \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u044f\u043c\u0430\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c \u0431\u043e\u043b\u0435\u0435 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0432\u0435\u0449\u0438.<\/p>\n<p>  \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u044b\u0439 \u0446\u0432\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0438\u0437 \u0446\u0435\u043d\u0442\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u043f\u043e \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u043a \u043a\u0440\u0430\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0417\u0430\u0442\u0443\u0445\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u0440\u0430\u0432\u043d\u043e\u043c \u043e\u0431\u044a\u0435\u043c\u0435 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u0432 \u043a\u0430\u043a\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0432 \u0444\u043e\u0440\u043c\u0435 \u044d\u043b\u043b\u0438\u043f\u0441\u0430.<\/p>\n<p>  \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f: \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439-\u0443\u0433\u043b\u043e\u0432\u043e\u0439, \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0430\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u0430, \u0441\u0430\u043c\u044b\u0439 \u0434\u0430\u043b\u044c\u043d\u0438\u0439 \u0443\u0433\u043e\u043b\u043e\u043a, \u0441\u0430\u043c\u044b\u0439 \u0434\u0430\u043b\u044c\u043d\u044f\u044f-\u0431\u043e\u043a\u043e\u0432\u0430\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u0430. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0430\u0437\u043c\u044b\u0448\u043b\u044f\u0442\u044c \u0442\u0430\u043a: \u00ab\u044f \u0445\u043e\u0447\u0443, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0442 \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b\u0441\u044f \u0438\u0437 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0434\u043e \u0442\u0430\u043a\u043e\u0439 \u0442\u043e \u0442\u043e\u0447\u043a\u0438, \u0438 \u043f\u0443\u0441\u043a\u0430\u0439 \u0432\u0435\u0437\u0434\u0435 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0446\u0432\u0435\u0442\u043e\u043c\u00bb. \u0412\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u00abat ______\u00bb \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430.<\/p>\n<h5><b>\u041f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438<\/b>:<\/h5>\n<p>  \u0415\u0441\u0442\u044c \u043e\u043f\u044f\u0442\u044c \u0442\u0440\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b:<br \/>   \u2014 \u0421\u0442\u0430\u0440\u044b\u0439: \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a WebKit \u0438 \u0435\u0433\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c from() \u0438 color-stop()<br \/>   \u2014 \u0420\u0435\u0434\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439: \u0432\u0430\u0448\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0435 \u0438\u0437 \u0446\u0435\u043d\u0442\u0440\u0430, \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u043b\u043e\u043c\u0430\u0442\u044c\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u043a\u0430\u043a \u0440\u0430\u0437 \u043d\u043e\u0432\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 (\u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430\u043c\u0438) \u0438 \u043d\u043e\u0432\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0443\u0433\u043b\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442.<br \/>   \u2014 \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u0432\u044f\u0437\u043a\u0443, \u00abcircle closest-corner at top right\u00bb<\/p>\n<p>  \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c autoprefixer \u043a\u0430\u043a \u0432 postcss \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043c\u0443\u0447\u0438\u0442\u0441\u044f \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438.<\/p>\n<h5><b>\u041f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b<\/b>:<\/h5>\n<p>  \u0420\u0430\u0437\u043c\u0435\u0440 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440. \u0415\u0441\u043b\u0438 \u0432\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 20 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0440\u0430\u0437\u043c\u0435\u0440 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 (\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442\u0441\u044f) \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f 20 \u043e\u0442 20px \u043f\u043b\u043e\u0449\u0430\u0434\u0438.<\/p>\n<pre><code class=\"css\">.repeat {   background-image:     repeating-linear-gradient(       45deg,       yellow,       yellow 10px,       red 10px,       red 20px \/* \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 *\/     ); } <\/code><\/pre>\n<p>  \u041e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u043c \u0438 \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u044f\u043c\u0438. <\/p>\n<h5><b>\u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:<\/h5>\n<p>  <a href=\"http:\/\/www.css3.info\/preview\/box-shadow\/\">Box-shadow, one of CSS3\u2019s best new features<\/a><br \/>  <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/box-shadow\/\">CSS Almanac: box-shadow<\/a><br \/>  <a href=\"https:\/\/css-tricks.com\/css3-gradients\/\">CSS Gradients<\/a><\/p>\n<h4><b>8. CSS3 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b<\/b><\/h4>\n<p>  Media-\u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, \u0432 \u043a\u0430\u043a\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043a\u0430\u043a\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c CSS \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u0438\u043b\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043c\u0430\u043a\u0435\u0442 \u0434\u043b\u044f \u043f\u0435\u0447\u0430\u0442\u0438.<\/p>\n<p>  \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u0440\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 (\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u0441\u0442\u0438\u043b\u0438):<br \/>   \u2014 \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 HTML \u0438\u043b\u0438 XHTML:<\/p>\n<pre><code class=\"html\">&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; media=&quot;all and (color)&quot; href=&quot;\/style.css&quot;&gt; <\/code><\/pre>\n<p>   \u2014 \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0432 XML:<\/p>\n<pre><code class=\"html\">&lt;?xml-stylesheet media=&quot;all and (color)&quot; rel=&quot;stylesheet&quot; href=&quot;\/style.css&quot; ?&gt; <\/code><\/pre>\n<p>   \u2014 \u0418 \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u0432 css-\u0441\u0442\u0438\u043b\u044f\u0445, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u0430\u0432\u0438\u043b\u0430  <a href=\"http:\/\/habrahabr.ru\/users\/import\/\" class=\"user_link\">import<\/a>:<\/p>\n<pre><code class=\"css\">@import url(&quot;\/style.css&quot;) all and (color); <\/code><\/pre>\n<p>   \u2014 \u0418\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u0430\u0432\u0438\u043b\u0430  <a href=\"http:\/\/habrahabr.ru\/users\/media\/\" class=\"user_link\">media<\/a>:<\/p>\n<pre><code class=\"css\">@media all and (color) { \/* css-\u043a\u043e\u0434 *\/ } <\/code><\/pre>\n<p>  \u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 13 \u043c\u0443\u043b\u044c\u0442\u0438\u043c\u0435\u0434\u0438\u0439\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438, \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430: \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443, \u0432\u044b\u0441\u043e\u0442\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0446\u0432\u0435\u0442, \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u0438\u043d\u0434\u0435\u043a\u0441, \u043c\u043e\u043d\u043e\u0445\u0440\u043e\u043c\u043d\u043e\u0441\u0442\u044c, \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u0430, \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u043a\u0443 \u0438 \u0441\u0435\u0442\u043a\u0438. \u0412\u0441\u0435, \u043a\u0440\u043e\u043c\u0435 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0438 \u0441\u0435\u0442\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c min \u2014 \u0438 max \u2014 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b.<\/p>\n<h4><b>9. \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 web-\u0434\u0438\u0437\u0430\u0439\u043d<\/b><\/h4>\n<p>  <\/p>\n<h5><b>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430<\/b> (viewport):<\/h5>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; <\/code><\/pre>\n<p>  \u041e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0434\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<p>  \u0428\u0438\u0440\u0438\u043d\u0430 = \u0447\u0430\u0441\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u044b \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u2014 \u0448\u0438\u0440\u0438\u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 (width=device-width), \u0442\u0430\u043a \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 (\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430). <\/p>\n<p>  \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u0440\u0430\u0432\u0435\u043d 1.0, \u044d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c.<\/p>\n<h5><b>\u041f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438<\/b>:<\/h5>\n<p>  \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0438\u0431\u043e \u0435\u0441\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0448\u0438\u0440\u0435, \u0447\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c, \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043e\u043a\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438.<\/p>\n<p>  \u041d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0439\u0442\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0430 \u044d\u043a\u0440\u0430\u043d\u0430, \u0437\u0430\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443, \u0438\u0431\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u0432 css \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u0440\u044c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438, \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u043a\u0430\u043a\u043e\u0433\u043e-\u043b\u0438\u0431\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0445\u043e\u0440\u043e\u0448\u043e, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043d\u0435\u0442.<\/p>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 media-\u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043c\u0430\u043b\u044b\u0445 \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442 \u043e\u043a\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u00abwidth: 100%\u00bb. \u0422\u0430\u043a\u0436\u0435, \u0431\u0443\u0434\u044c\u0442\u0435 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u044b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0412\u0430\u0448 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0443\u0439\u0442\u0438 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u043e\u043a\u043d\u0430 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<h5><b>\u0421\u0435\u0442\u043a\u0430 \u0441\u0430\u0439\u0442\u0430<\/b>:<\/h5>\n<p>  \u0412 \u0442\u0435\u043e\u0440\u0438\u0438, \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u0430\u044f \u0441\u0435\u0442\u043a\u0430 \u0438\u043c\u0435\u0435\u0442 12 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432, \u0438 \u043e\u0431\u0449\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 100%, \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0436\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<p>  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u0441\u0435 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442 box-sizing \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u0432 border-box. \u042d\u0442\u043e \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e padding \u0438 border \u0432\u0445\u043e\u0434\u044f\u0442 \u0432 \u043e\u0431\u0449\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 \u0432\u0430\u0448 CSS:  <\/p>\n<pre><code class=\"css\">* {     box-sizing: border-box; } <\/code><\/pre>\n<h5><b>\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/b>:<\/h5>\n<p>  \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u043c\u0438 \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438, \u0435\u0441\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e width \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f \u2014 100%. \u041e\u0434\u043d\u0430\u043a\u043e, \u043b\u0443\u0447\u0448\u0438\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 max-\u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0448\u0438\u0440\u0438\u043d\u044b (width) \u0432 100%, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f (\u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f), \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u043e\u043b\u044c\u0448\u0435, \u0430 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431.<\/p>\n<p>  \u0424\u043e\u043d\u043e\u0432\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<p>  \u0415\u0441\u043b\u0438 background-size \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u00abcontain\u00bb, \u0444\u043e\u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0438 \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0432\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e. \u041e\u0434\u043d\u0430\u043a\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442 \u0441\u0432\u043e\u0438 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 background-size \u0437\u0430\u0434\u0430\u043d\u043e \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u00ab100% 100%\u00bb, \u0444\u043e\u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0440\u044b\u0442\u044c \u0432\u0441\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e.<\/p>\n<p>  \u0415\u0441\u043b\u0438 background-size \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u00abcover\u00bb, \u0444\u043e\u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0440\u044b\u0442\u044c \u0432\u0441\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u00abcover\u00bb \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0440\u043e\u043d, \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u0430\u043a\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0444\u043e\u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0435\u043c\u0443 \u043e\u0431\u0440\u0435\u0437\u0430\u0442\u044c.<\/p>\n<p>  \u0411\u043e\u043b\u044c\u0448\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430, \u043d\u043e \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u043d\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435. \u0414\u043b\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445.<\/p>\n<p>  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441 min-device-width, \u0432\u043c\u0435\u0441\u0442\u043e min-width, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u0430 \u043d\u0435 \u0448\u0438\u0440\u0438\u043d\u0443 \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0422\u043e\u0433\u0434\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430:<\/p>\n<pre><code class=\"css\">\/* \u0414\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u043c\u0435\u043d\u044c\u0448\u0435, \u0447\u0435\u043c 400px: *\/ body {     background-image: url('img_smallflower.jpg'); }  \/* \u0414\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 400px \u0438 \u0431\u043e\u043b\u044c\u0448\u0435: *\/ @media only screen and (min-device-width: 400px) {     body {         background-image: url('img_flowers.jpg');     } } <\/code><\/pre>\n<p>  \u0412 HTML5 \u0432\u0432\u0435\u0434\u0435\u043d \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c \u043e\u0434\u043d\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<br \/>  (\u043d\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0432 IE, \u0442\u043e\u043b\u044c\u043a\u043e Edge 13+).<\/p>\n<p>  \u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 img. \u0412\u044b \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438, \u043f\u0435\u0440\u0432\u044b\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043f\u043e\u0442\u043e\u043c \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0438 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"html\">&lt;picture&gt;   &lt;source srcset=&quot;img_smallflower.jpg&quot; media=&quot;(max-width: 400px)&quot;&gt;   &lt;source srcset=&quot;img_flowers.jpg&quot;&gt;   &lt;img src=&quot;img_flowers.jpg&quot; alt=&quot;Flowers&quot;&gt; &lt;\/picture&gt; <\/code><\/pre>\n<p>  \u0410\u0442\u0440\u0438\u0431\u0443\u0442 srcset \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 media \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f. \u0412\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c img-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0445 picture (\u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0437\u0430\u043f\u0430\u0441\u043d\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442).<\/p>\n<h5><b>\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043e<\/b>:<\/h5>\n<p>  \u0415\u0441\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e width \u0440\u0430\u0432\u043d\u043e 100%, \u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f. \u041e\u0434\u043d\u0430\u043a\u043e, \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442 \u0432 \u043f\u043e\u043b\u043d\u043e\u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c. \u041b\u0443\u0447\u0448\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 max-width \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e width.<\/p>\n<pre><code class=\"css\">video {     max-width: 100%;     height: auto; } <\/code><\/pre>\n<h5><b>\u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:<\/h5>\n<p>  <a href=\"http:\/\/www.w3schools.com\/css\/css_rwd_intro.asp\">w3schools \u2014 Responsive Web Design<\/a><br \/>  <a href=\"http:\/\/blog.froont.com\/9-basic-principles-of-responsive-web-design\/\">9 basic principles of responsive web design<\/a><\/p>\n<h4><b>10. CSS3 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b<\/b><\/h4>\n<p>  CSS \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043b\u0430\u0432\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043b\u044e\u0431\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<p>   \u2014 transition-property: \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c (\u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0444\u043e\u043d\u043e\u0432\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e)<br \/>   \u2014 transition-duration: \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0434\u043b\u0438\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434 (0.3 \u0441\u0435\u043a\u0443\u043d\u0434\u044b)<br \/>   \u2014 transition-timing-function: \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u043e \u0432\u0435\u0434\u0435\u0442 \u0441\u0435\u0431\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0441 \u0442\u0435\u0447\u0435\u043d\u0438\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 (ease, \u043e\u0434\u0438\u043d \u0438\u0437 \u0442\u0438\u043f\u043e\u0432)<\/p>\n<p>  transition-timing-function \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044f \u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0434\u0438\u043d \u0438\u0437 \u0448\u0435\u0441\u0442\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445: ease, linear, ease-in, ease-out, ease-in-out, \u0438 cubic-bezier (\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0432\u043e\u044e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u043a\u0440\u0438\u0432\u0443\u044e \u0432\u0440\u0435\u043c\u0435\u043d\u0438).<\/p>\n<p>  \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 :hover \u0438\u043b\u0438 :active. \u0412\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0432\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438.<\/p>\n<pre><code class=\"css\">a.foo {   padding: 5px 10px;   background: #9c3; \/* \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 *\/   -webkit-transition: background .3s ease,     color 0.2s linear;   -moz-transition: background .3s ease,     color 0.2s linear;   -o-transition: background .3s ease, color 0.2s linear;      \/* \u043f\u043b\u0430\u0432\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432 \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043f\u0440\u0438 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0438 \u043a\u0430\u043a\u043e\u0433\u043e \u043b\u0438\u0431\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f *\/   transition: background .3s ease, color 0.2s linear; } a.foo:hover, a.foo:focus {   color: #030;   background: #690; } <\/code><\/pre>\n<p>  \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0447\u0442\u043e \u043d\u0430\u0440\u044f\u0434\u0443 \u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0446\u0432\u0435\u0442\u0430 \u0444\u043e\u043d\u0430, \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0442\u0438\u043c \u0442\u0430\u043a\u0436\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430, \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u0443\u0442\u0435\u043c \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u0432\u043c\u0435\u0441\u0442\u0435, \u0443\u043a\u0430\u0437\u0430\u0432 \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u044f\u0442\u0443\u044e. \u041a\u0430\u0436\u0434\u044b\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u0432\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c. \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432\u0441\u0435\u0445 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438.<\/p>\n<p>  \u0414\u0440\u0443\u0433\u043e\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0444\u043e\u043d\u0430 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0435\u0433\u043e \u0444\u043e\u043a\u0443\u0441\u0430.<\/p>\n<pre><code class=\"css\">input.ourInputBox:focus{  -webkit-transition:background-color 0.5s linear;  background:#CCC; } <\/code><\/pre>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432 CSS. \u041c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0444\u043e\u043a\u0443\u0441.<\/p>\n<h5><b>\u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:<\/h5>\n<p>  <a href=\"http:\/\/alistapart.com\/article\/understanding-css3-transitions\">Understanding CSS3 Transitions<\/a><br \/>  <a href=\"http:\/\/code.tutsplus.com\/tutorials\/css-fundamentals-css3-transitions--pre-10922\">CSS Fundamentals: CSS3 Transitions<\/a><br \/>  <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_animated_properties\">CSS animated properties<\/a><\/p>\n<h4><b>11. CSS3 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/b><\/h4>\n<p>  \u0415\u0441\u043b\u0438 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e CSS \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u0445, \u043c\u044b \u0432\u0441\u0435 \u0437\u043d\u0430\u0435\u043c \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u0445, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f\u0442 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0434\u0440\u0443\u0433\u043e\u0435, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a, CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u043a\u0430\u0434\u0440\u043e\u0432 \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u044d\u0442\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>   \u2014 keyframes: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<br \/>   \u2014 animation properties: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0430\u0431\u043e\u0440\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u043a\u0430\u0434\u0440\u043e\u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0438 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f (\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f) \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442.<\/p>\n<h5><b>\u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043a\u0430\u0434\u0440\u044b <\/b> (keyframes):<\/h5>\n<p>  \u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043a\u0430\u0434\u0440\u044b \u2014 \u044d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041e\u043d\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0442\u043e, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0448\u043a\u0430\u043b\u044b. \u041a\u0430\u0436\u0434\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u043a\u0430\u0434\u0440\u043e\u0432 ( @keyframes) \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437:<\/p>\n<p>   \u2014 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438: \u0438\u043c\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, bounceIn<br \/>   \u2014 \u044d\u0442\u0430\u043f\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438: \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u0442\u0430\u043f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445, \u0433\u0434\u0435 0% \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, 100% \u2014 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<br \/>   \u2014 css \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430: \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0430\u0434\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0448\u043a\u0430\u043b\u044b<\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e  @keyframes, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0430\u0437\u043e\u0432\u0435\u043c \u201cbounceIn\u201d. \u042d\u0442\u043e\u0442  @keyframes \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0442\u0440\u0435\u0445 \u044d\u0442\u0430\u043f\u043e\u0432. \u041d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u044d\u0442\u0430\u043f\u0435 (0%), \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c (opacity), \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u0443\u044e \u0432 \u043d\u043e\u043b\u044c, \u0438 \u043f\u043b\u0430\u0432\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0432 10% \u043e\u0442 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430. \u041d\u0430 \u0432\u0442\u043e\u0440\u043e\u043c \u044d\u0442\u0430\u043f\u0435 (60%), \u043d\u0430\u0448 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f (\u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u0430) \u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043e 120% \u043e\u0442 \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041d\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 (100%), \u043e\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u0441\u0432\u043e\u0435\u043c\u0443 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443.<\/p>\n<p>   @keyframes \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0432\u0430\u0448 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 CSS-\u0444\u0430\u0439\u043b.<\/p>\n<pre><code class=\"css\">@keyframes bounceIn {   0% {     transform: scale(0.1);     opacity: 0;   }   60% {     transform: scale(1.2);     opacity: 1;   }   100% {     transform: scale(1);   } } <\/code><\/pre>\n<h5><b>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 <\/b> (animation properties):<\/h5>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0431\u044b\u043b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d \u043d\u0430\u0431\u043e\u0440 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043a\u0430\u0434\u0440\u043e\u0432, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u043a\u0440\u0435\u043f\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0437\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>  \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u0434\u0432\u0435 \u0432\u0435\u0449\u0438:<br \/>   \u2014 \u043c\u044b \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u043c  @keyframes \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0442\u0438\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c<br \/>   \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c, \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0431\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f<\/p>\n<p>  \u041c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430\u0448\u0435\u043c\u0443 CSS-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0443 (\u0438\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0442\u0438\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0434\u0432\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u0441\u0442\u0443\u043f\u0438\u043b\u0430 \u0432 \u0441\u0438\u043b\u0443:<br \/>   \u2014 animation-name: \u0438\u043c\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u0432  @keyframes<br \/>   \u2014 animation-duration: \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 0.5s) \u0438\u043b\u0438 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 200ms).<\/p>\n<p>  \u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044f \u043d\u0430\u0448 \u0440\u0430\u0437\u0433\u043e\u0432\u043e\u0440 \u043e bounceIn, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c animation-name \u0438 animation-duration, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a \u043d\u0430\u0448\u0438\u043c div-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u0438\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<pre><code class=\"css\">div {   animation-duration: 2s;   animation-name: bounceIn; } <\/code><\/pre>\n<p>  \u0421\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c:<\/p>\n<pre><code class=\"css\">div {   animation: bounceIn 2s; } <\/code><\/pre>\n<p>  \u041e\u043f\u0435\u0440\u0438\u0440\u0443\u044e \u0441  @keyframes (\u043d\u0430\u0431\u043e\u0440 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u043a\u0430\u0434\u0440\u043e\u0432) \u0438 animation properties (\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438), \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e.<\/p>\n<p>  \u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c animation-duration \u0438 animation-name, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<br \/>   \u2014 animation-timing-function: \u0437\u0430\u0434\u0430\u0435\u0442 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043a\u0440\u0438\u0432\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<br \/>   \u2014 animation-delay: \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<br \/>   \u2014 animation-iteration-count: \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e<br \/>   \u2014 animation-direction: \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0434\u043e\u043b\u0436\u043d\u0430 \u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0434\u0442\u0438 \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0434\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0446\u0438\u043a\u043b\u043e\u043c<br \/>   \u2014 animation-fill-mode: \u0437\u0430\u0434\u0430\u0435\u0442 \u0441\u0442\u0438\u043b\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u0435\u0441\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0430\u0441\u044c \u0438\u043b\u0438 \u043a\u043e\u0433\u0434\u0430 \u0438\u043c\u0435\u0435\u0442 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443<br \/>   \u2014 animation-play-state: \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0431\u0443\u0434\u0435\u0442 \u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430<\/p>\n<p>  \u0421\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441:<br \/>  animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u044f\u0442\u044b\u043c\u0438. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"css\">.div {   animation: slideIn 2s, rotate 1.75s; } <\/code><\/pre>\n<h5><b>\u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:<\/h5>\n<p>  <a href=\"https:\/\/www.elegantthemes.com\/blog\/tips-tricks\/an-introduction-to-css-transitions-animations\">An Introduction to CSS Transitions &#038; Animations<\/a><br \/>  <a href=\"https:\/\/robots.thoughtbot.com\/css-animation-for-beginners\">CSS Animation for Beginners<\/a><br \/>  <a href=\"http:\/\/callmenick.com\/post\/simple-css3-transitions-transforms-animations-compilation\">Simple CSS3 Transitions, Transforms, &#038; Animations Compilation<\/a><br \/>  <a href=\"http:\/\/learn.shayhowe.com\/advanced-html-css\/performance-organization\/\">Learn to Code Advanced HTML &#038; CSS<\/a><\/p>\n<h4><b>12. \u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430 (SVG)<\/b><\/h4>\n<p>  SVG \u2014 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430. \u042d\u0442\u043e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 XML, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c. \u0418\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, SVG \u2014 \u044d\u0442\u043e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043e\u043d\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u043e\u0439. \u0410 \u043d\u0435 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439 \u0442\u0430\u043a\u0438\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432, \u043a\u0430\u043a PNG \u0438 JPEG, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430, SVG \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0434\u043e \u043b\u044e\u0431\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430.<\/p>\n<p>  \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c &quot;.svg&quot; \u0444\u0430\u0439\u043b \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u0434\u0435, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0432 \u0435\u0433\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0441 \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 html-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438, \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043c\u044b \u043f\u0438\u0448\u0435\u043c &quot;&lt;img src=&#8217;say_hello.svg&#8217;&gt;&quot;. \u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e. \u041e\u0434\u043d\u0430 \u0438\u0437 \u0432\u0435\u043b\u0438\u0447\u0430\u0439\u0448\u0438\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 SVG \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 XML. \u0422\u0430\u043a \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u043a\u0440\u044b\u0442\u044c, \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043d\u0438\u043c \u2014 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u043f\u043e\u0437\u0438\u0446\u0438\u044f, \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u0438\u043b\u0438 \u0448\u0440\u0438\u0444\u0442\u044b, \u0438 \u0432\u0441\u0435 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript \u0438 CSS. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 SVG \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d. \u0418 \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u043b\u0430\u0441\u0441\u043d\u043e.<\/p>\n<p>  \u0422\u0430\u043a \u0447\u0442\u043e, \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u043c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SVG \u0432\u043c\u0435\u0441\u0442\u043e PNG \u0438\u043b\u0438 JPEG, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0438\u0433\u0443\u0440\u0430\u0445, \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430\u0445 \u0438 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438, \u0432 \u0446\u0435\u043b\u043e\u043c.<\/p>\n<p>  \u0412\u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u043a\u0440\u0443\u0433 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 SVG:  <\/p>\n<pre><code class=\"html\">&lt;svg width=&quot;100&quot; height=&quot;100&quot;&gt;     &lt;circle cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;40&quot; fill=&quot;red&quot; \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<h5><b>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b<\/b>:<\/h5>\n<p>  \u041e\u0431\u044b\u0447\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0442\u043e\u0447\u0435\u043a (\u0445, \u0443 = 0). \u0412 SVG \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u043b\u0435\u0432\u043e\u043c \u0443\u0433\u043b\u0443.<br \/>  \u041a\u0430\u0436\u0434\u043e\u0435 SVG-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432:<br \/>   \u2014 \u0425: \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430 x \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0443\u0433\u043b\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<br \/>   \u2014 Y: \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430 y \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0443\u0433\u043b\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<br \/>   \u2014 fill: \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<br \/>   \u2014 fill-opacity: \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0444\u043e\u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<br \/>   \u2014 stroke: \u0446\u0432\u0435\u0442 \u0440\u0430\u043c\u043a\u0438<br \/>   \u2014 stroke-width: \u0448\u0438\u0440\u0438\u043d\u0430 \u0440\u0430\u043c\u043a\u0438<\/p>\n<h5><b>\u041f\u043b\u044e\u0441\u044b<\/b>:<\/h5>\n<p>   \u2014 \u0417\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f: \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041e\u043d \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438 Retina \u0438 \u0442\u0435\u043c\u0438, \u043a\u0442\u043e \u0438\u043c \u0431\u043b\u0438\u0437\u043e\u043a.<br \/>   \u2014 \u041c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440. \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 SVG, SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043c\u0435\u043d\u044c\u0448\u0435 \u043c\u0435\u0441\u0442\u0430, \u0447\u0435\u043c \u0438\u0445 \u0431\u043b\u0438\u0437\u043d\u0435\u0446\u044b, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435.<br \/>   \u2014 \u0413\u0438\u0431\u043a\u043e\u0441\u0442\u044c. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0431\u044b\u0441\u0442\u0440\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435, \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430, \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0427\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u0432 \u043b\u044e\u0431\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435.<br \/>   \u2014 \u041c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 SVG-\u0444\u0430\u0439\u043b \u0432 \u043b\u044e\u0431\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 (IE, Chrome, Opera, FireFox, Safari).<br \/>   \u2014 \u041d\u0438\u043a\u0430\u043a\u0438\u0445 \u043b\u0438\u0448\u043d\u0438\u0445 http-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u043a\u0440\u043e\u043c\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0435\u0433\u0430 img<br \/>   \u2014 SEO-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439: \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043c\u0435\u0442\u043a\u0438, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e, \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u043c\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u043c\u0438.<br \/>   \u2014 \u041c\u044b \u0438\u043c\u0435\u0435\u043c \u043f\u043e\u043b\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 JavaScript \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<h5><b>\u041c\u0438\u043d\u0443\u0441\u044b<\/b>:<\/h5>\n<p>   \u2014 \u0420\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u0440\u0430\u0441\u0442\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e, \u0435\u0441\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043c\u0435\u043b\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<br \/>   \u2014 \u041d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 (svg-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430), \u044d\u0442\u043e \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0435\u0442 \u0447\u0442\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0438 \u0432\u0440\u0435\u043c\u044f \u0432\u0430\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n<p>  \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430: IE9+<\/p>\n<h5><b>\u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:<\/h5>\n<p>  <a href=\"http:\/\/tonyfreed.com\/blog\/introduction-to-svg\">Introduction to SVG<\/a><br \/>  <a href=\"http:\/\/engageinteractive.co.uk\/blog\/an-introduction-to-svg\">An introduction to SVG<\/a><br \/>  <a href=\"http:\/\/davidwalsh.name\/svg-animation\">The Simple Intro to SVG Animation<\/a><br \/>  <a href=\"http:\/\/www.creativebloq.com\/web-design\/icon-fonts-vs-svg-101413211\">Icon fonts vs SVG \u2014 which is the best option?<\/a><\/p>\n<h5><b>\u0412\u0438\u0434\u0435\u043e<\/b>:<\/h5>\n<p>  <a href=\"https:\/\/www.youtube.com\/watch?v=vvuH6qS2M5Q\">Using SVG \u2014 Intro<\/a><br \/>  <a href=\"https:\/\/www.youtube.com\/watch?v=PQxtlY19kto&amp;list=PLL8woMHwr36F2tCFnWTbVBQAGQ6nTcXOO\">SVG Tutorials \u2014 Playlist<\/a><br \/>  <a href=\"https:\/\/www.youtube.com\/watch?v=uKNX23lvnPo\">Working with SVG, A Primer \u2014 Sara Soueidan<\/a><br \/>  <a href=\"https:\/\/www.youtube.com\/watch?v=SeLOt_BRAqc\">You Don&#8217;t Know SVG \u2014 Dmitry Baranovskiy<\/a><br \/>  <a href=\"https:\/\/www.youtube.com\/watch?v=w83XRCkMtHQ\">SVG is for Everybody \u2014 Chris Coyier<\/a><br \/>  <a href=\"https:\/\/www.youtube.com\/watch?v=lMFfTRiipOQ\">Building Better Interfaces With SVG \u2014 Sara Soueidan<\/a><br \/>  <a href=\"https:\/\/www.youtube.com\/watch?v=NkLDuPf5P0A\">SVG Lessons I Learned The Hard Way \u2014 Sara Soueidan<\/a><\/p>\n<h4><b>13. CSS \u0441\u043f\u0440\u0430\u0439\u0442\u044b<\/b><\/h4>\n<p>  CSS \u0441\u043f\u0440\u0430\u0439\u0442 \u2014 \u044d\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u043a\u0430 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0447\u0435\u0442\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u043c \u0441\u043f\u0440\u0430\u0439\u0442-\u043b\u0438\u0441\u0442 (sprite sheet) \u0438\u043b\u0438 \u043d\u0430\u0431\u043e\u0440 \u043f\u043b\u0438\u0442\u043e\u043a (tile set). \u0421\u043f\u0440\u0430\u0439\u0442\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044e\u0442 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0430 \u0441\u0435\u0442\u044c \u0437\u0430 \u0441\u0447\u0435\u0442 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043e\u043a \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  \u041a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u043e\u0434\u043d\u043e\u043c, \u0432\u0441\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c http-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c. \u0411\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u043c\u043e\u0436\u0435\u0442, \u0442\u0430\u043a \u043a\u0430\u043a http-\u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0438 \u0441\u0432\u044f\u0437\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0432\u0430\u0436\u043d\u044b \u043f\u043e \u0442\u0435\u043c \u0436\u0435 \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0430\u0446\u0438\u044e, \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e, \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e CSS \u0438 JavaScript \u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n<h5><b>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u0432 CSS<\/b>:<\/h5>\n<p>  \u0412\u044b \u0437\u0430\u0434\u0430\u0439\u0442\u0435 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e\u0436\u0435 \u0444\u043e\u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u0432 \u0432\u0438\u0434\u0435 css \u043a\u043b\u0430\u0441\u0441\u0430, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0438\u0437 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432\u044b \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0435 \u0441\u0432\u043e\u044e \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u0442 \u043e\u0434\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u043f\u0440\u0430\u0439\u0442\u0430.<\/p>\n<pre><code class=\"css\">.flags-canada, .flags-mexico, .flags-usa {   background-image: url('..\/images\/flags.png');   background-repeat: no-repeat; }  .flags-canada {   height: 128px;   background-position: -5px -5px; }  .flags-usa {   height: 135px;   background-position: -5px -143px; }  .flags-mexico {   height: 147px;   background-position: -5px -288px; } <\/code><\/pre>\n<h5><b>\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430<\/b>:<\/h5>\n<p>  CSS \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044e\u0442, \u0432 \u0446\u0435\u043b\u043e\u043c, \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430.<\/p>\n<p>   \u2014 \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0431\u044b\u0441\u0442\u0440\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u0440\u0430\u0439\u0442 \u0431\u044b\u043b \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d.<br \/>   \u2014 \u041c\u044b \u0438\u043c\u0435\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u043d\u0443\u044e \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u0438 \u0441\u043d\u0438\u0436\u0430\u0435\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0437\u043e\u043a \u0441\u0435\u0442\u0438.<\/p>\n<h5><b>\u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:<\/h5>\n<p>  <a href=\"https:\/\/css-tricks.com\/css-sprites\/\">CSS Sprites: What They Are, Why They\u2019re Cool, and How To Use Them<\/a><br \/>  <a href=\"https:\/\/www.maxcdn.com\/one\/visual-glossary\/css-sprites\/\">What are CSS Sprites<\/a><br \/>  <a href=\"http:\/\/www.w3schools.com\/css\/css_image_sprites.asp\">w3schools \u2014 Image Sprites<\/a><\/p>\n<h4><b>14. \u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435<\/b><\/h4>\n<p>  \u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u0447\u0438\u043d, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u044e\u0434\u0438 \u0434\u0443\u043c\u0430\u044e\u0442, \u0447\u0442\u043e css \u044d\u0442\u043e \u0447\u0435\u043f\u0443\u0445\u0430. \u0412\u044b \u0443\u0434\u0438\u0432\u043b\u044f\u0435\u0442\u0435\u0441\u044c, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u0441\u043b\u043e\u0436\u043d\u043e \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS? \u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438? \u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0443 \u043c\u0435\u043d\u044f?!<\/p>\n<p>  \u041e\u0442\u0432\u0435\u0447\u0430\u044f \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441 \u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0438 (vertical-align): \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (inline) \u0438 \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u044f\u0447\u0435\u0435\u043a (table-cell), \u043d\u0430\u0434\u0435\u044e\u0441\u044c \u044d\u0442\u043e \u0443\u0431\u044c\u0435\u0442 \u0432\u0430\u0448\u0438 \u0441\u043e\u043c\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u042d\u0442\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043e\u0447\u0435\u043d\u044c \u0436\u0435\u0441\u0442\u043e\u043a\u043e, \u043d\u043e \u0434\u0430\u0436\u0435 \u043f\u0440\u0438\u043d\u044f\u0432 \u044d\u0442\u0443 \u0438\u0441\u0442\u0438\u043d\u0443, \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u0435\u043d\u0438\u044f, \u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u0441\u0430\u043c\u0438 \u0441\u0435\u0431\u0435 \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u0447\u0442\u043e-\u0442\u043e \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438:<br \/>   \u2014 \u0432\u0430\u0448 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043b\u043e\u0447\u043d\u044b\u043c \u0438\u043b\u0438 \u0441\u0442\u0440\u043e\u0447\u043d\u044b\u043c?<br \/>   \u2014 \u0432\u0430\u0448 \u0442\u0435\u043a\u0441\u0442 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0439 \u0438\u043b\u0438 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0439?<br \/>   \u2014 \u0432\u0441\u0435\u0433\u0434\u0430 \u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435 \u0432\u044b\u0441\u043e\u0442\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e?<br \/>   \u2014 \u043c\u043e\u0436\u0435\u0442\u0435 \u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS3?<\/p>\n<h5><b>\u041c\u0435\u0442\u043e\u0434 \u043c\u0435\u0436\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u0430<\/b> (line-height):<\/h5>\n<p>  \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u043f\u044b\u0442\u0430\u0435\u0442\u0435\u0441\u044c \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442, \u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 HTML:<\/p>\n<pre><code class=\"html\">  &lt;div class=&quot;parent&quot;&gt;     &lt;span class=&quot;child&quot;&gt;Hello!&lt;\/span&gt;   &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0412\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 .child \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438:  <\/p>\n<pre><code class=\"css\">  .parent {     height: 150px;   }    .child {     line-height: 150px;   } <\/code><\/pre>\n<p>  \u041d\u043e \u0435\u0441\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 .child \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 .parent:<\/p>\n<pre><code class=\"html\"> &lt;div class=&quot;parent&quot;&gt;     Hello!   &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043c\u0435\u0436\u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:  <\/p>\n<pre><code class=\"css\">  .parent {     height: 150px;     line-height: 150px;   } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u043c\u0435\u0441\u0442\u043e span-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443 \u0432\u0430\u0441 img-\u044d\u043b\u0435\u043c\u0435\u043d\u0442:  <\/p>\n<pre><code class=\"html\">  &lt;div class=&quot;parent&quot;&gt;     &lt;img src=&quot;image.jpg&quot; class=&quot;child-image&quot;\/&gt;   &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0422\u043e\u0433\u0434\u0430 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:  <\/p>\n<pre><code class=\"css\"> .parent {     height: 150px;     line-height: 150px;   }    .child-image {     vertical-align: middle; \/* \u041e \u0447\u0443\u0434\u043e, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e :) *\/   } <\/code><\/pre>\n<h5><b>\u041c\u0435\u0442\u043e\u0434 css \u0442\u0430\u0431\u043b\u0438\u0446<\/b> (css table):<\/h5>\n<p>  \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u043c\u0438\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 HTML-\u043a\u043e\u0434:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;parent&quot;&gt;     &lt;div class=&quot;child&quot;&gt;       Hello, CSS table method!     &lt;\/div&gt;   &lt;\/div&gt; <\/code><\/pre>\n<p>  \u041c\u044b \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c .child \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"css\">  .parent {     display: table;   }    .child {     display: table-cell;     vertical-align: middle; \/* \u0414\u0430, \u043e\u043d\u043e \u0438 \u0442\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442! *\/   } <\/code><\/pre>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043d\u0430\u043c \u043d\u0435\u0432\u0430\u0436\u043d\u043e \u043a\u0430\u043a\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 \u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0440\u043e\u0432\u043d\u0435\u043d \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0441\u0442\u0430\u0440\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 IE.<\/p>\n<h5><b>\u041c\u0435\u0442\u043e\u0434 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/b> (absolute position):<\/h5>\n<p>  \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0438\u043c\u0435\u0435\u0442 \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n<p>  1 \u2014 \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435 \u0432\u044b\u0441\u043e\u0442\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0442\u0438\u0442\u0435 \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438<br \/>  2 \u2014 \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u0442\u0435 \u044d\u0442\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u044b (\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 CSS3)<\/p>\n<p>  \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 HTML:<\/p>\n<pre><code class=\"html\">  &lt;div class=&quot;parent&quot;&gt;     &lt;div class=&quot;child&quot;&gt;       Hello, absolute position method!     &lt;\/div&gt;   &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0412 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c .child \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"css\">  .parent {     position: relative;     height: 300px; \/* \u0412\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u0438\u043c\u0435\u043b \u0432\u044b\u0441\u043e\u0442\u0443 \u043e\u0442\u043b\u0438\u0447\u043d\u0443\u044e \u043e\u0442 &quot;\u0430\u0432\u0442\u043e&quot; *\/   }    .child {     position: absolute;     top: 50%;     height: 50px;     margin-top: -25px; \/* \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0432\u044b\u0441\u043e\u0442\u044b \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 *\/   } <\/code><\/pre>\n<p>  \u0412\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435:<\/p>\n<pre><code class=\"css\">.parent {     position: relative;     height: 300px;  \/* \u0412\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u0438\u043c\u0435\u043b \u0432\u044b\u0441\u043e\u0442\u0443 \u043e\u0442\u043b\u0438\u0447\u043d\u0443\u044e \u043e\u0442 &quot;\u0430\u0432\u0442\u043e&quot; *\/   }    .child {     position: absolute;     top: 50%;     transform: translateY(-50%); \/* \u043d\u0430\u043c \u043d\u0435 \u0432\u0430\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u0442\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430  *\/   } <\/code><\/pre>\n<p>  \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b, \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435, \u043e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e flexbox, padding, stretching \u0438 \u0434\u0440.<\/p>\n<h5><b>\u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:<\/h5>\n<p>  <a href=\"https:\/\/css-tricks.com\/centering-css-complete-guide\/\">Centering in CSS: A Complete Guide<\/a><br \/>  <a href=\"http:\/\/vanseodesign.com\/css\/vertical-centering\/\">6 Methods For Vertical Centering With CSS<\/a><br \/>  <a href=\"http:\/\/zerosixthree.se\/vertical-align-anything-with-just-3-lines-of-css\/\">Vertical align anything with just 3 lines of CSS<\/a><br \/>  <a href=\"http:\/\/howtocenterincss.com\/\">How to center in CSS<\/a><\/p>\n<h4><b>15. \u0418\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/b><\/h4>\n<p>  <\/p>\n<h5><b>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0432 \u0441\u0442\u0440\u043e\u0447\u043d\u043e-\u0431\u043b\u043e\u0447\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445<\/b>:<\/h5>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0434\u0442\u0438 \u0434\u0440\u0443\u0433 \u0437\u0430 \u0434\u0440\u0443\u0433\u043e\u043c \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e, \u0431\u0435\u0437 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u0430 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438.<\/p>\n<p>  \u041a\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u0430\u043a\u043e\u0439, \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u044d\u0442\u043e\u0433\u043e:<\/p>\n<pre><code class=\"html\">&lt;ul&gt;   &lt;li&gt;Item 1&lt;\/li&gt;   &lt;li&gt;Item 2&lt;\/li&gt;   &lt;li&gt;Item 3&lt;\/li&gt; &lt;\/ul&gt; <\/code><\/pre>\n<pre><code class=\"css\">li {   display: inline-block;   background: red; } <\/code><\/pre>\n<p>  \u0417\u0430\u0442\u0435\u043c, \u0432\u044b \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0414\u0430, \u0432\u0430\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0412\u044b, \u043d\u0435 \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044f \u043d\u0438\u043a\u043e\u0433\u043e, \u043e\u0431\u043d\u0443\u043b\u044f\u0435\u0442\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b (margin: 0) \u0432 \u043a\u043e\u0434\u0435, \u043e\u0434\u043d\u0430\u043a\u043e, \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0440\u043e\u0447\u043d\u043e-\u0431\u043b\u043e\u0447\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043f\u0440\u043e\u0431\u0435\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e \u0432 HTML, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443.<\/p>\n<h5><b>\u0411\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432 \u0432 HTML<\/b>:<\/h5>\n<p>  \u0422\u0430\u043a \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0431\u0435\u043b\u044b \u0438 \u0435\u0441\u0442\u044c \u043d\u0430\u0448\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0434\u0430\u043b\u0438\u043c \u0438\u0445.<\/p>\n<pre><code class=\"html\">&lt;ul&gt;     &lt;li&gt;Item 1&lt;\/li&gt;&lt;li&gt;Item 2&lt;\/li&gt;&lt;li&gt;Item 3&lt;\/li&gt;   &lt;\/ul&gt; <\/code><\/pre>\n<h5><b>\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0432 HTML<\/b>:<\/h5>\n<pre><code class=\"css\">&lt;ul&gt;    &lt;li&gt;Item content&lt;\/li&gt;&lt;!-- --&gt;&lt;li&gt;Item content&lt;\/li&gt;&lt;!-- --&gt;&lt;li&gt;Item content&lt;\/li&gt; &lt;\/ul&gt; <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u0447\u043d\u043e, \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0431\u0435\u043b\u044b \u0432\u044b \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438.<\/p>\n<h5><b>\u041d\u0443\u043b\u0435\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435<\/b>:<\/h5>\n<p>  \u0412\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u043e\u0431\u043d\u0443\u043b\u044f\u0435\u0442\u0435 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 (font-size: 0), \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0435, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c, \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432 \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u043d\u0443\u043b\u044e, \u043d\u043e \u0442\u043e\u0433\u0434\u0430 \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445.<\/p>\n<pre><code class=\"css\"> ul {    font-size: 0;  }   li {    display: inline-block;    background: red;    font-size: 14px;  } <\/code><\/pre>\n<h5><b>\u041e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u0443 \u0441\u0442\u0440\u043e\u0447\u043d\u043e-\u0431\u043b\u043e\u0447\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/b>:<\/h5>\n<p>  \u0414\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f (margin) \u0443 \u0441\u0442\u0440\u043e\u0447\u043d\u043e-\u0431\u043b\u043e\u0447\u043d\u044b\u0445 (inline-block) \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u043c\u0435\u0435\u0442 4px, \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u0432 4px \u0438 \u0432\u0441\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/p>\n<pre><code class=\"css\">li {   display: inline-block;   margin: 0 -4px; } <\/code><\/pre>\n<h5><b>\u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:<\/h5>\n<p>  <a href=\"https:\/\/css-tricks.com\/fighting-the-space-between-inline-block-elements\/\">Fighting the Space Between Inline Block Elements<\/a><br \/>  <a href=\"http:\/\/davidwalsh.name\/remove-whitespace-inline-block\">Remove Whitespace Between Inline-Block Elements<\/a><br \/>  <a href=\"https:\/\/tylercipriani.com\/2012\/08\/01\/display-inline-block-extra-margin.html\">CSS display inline-block Extra Margin\/Space<\/a><\/p>\n<h5><b>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b<\/b>:<\/h5>\n<p>  <a href=\"http:\/\/designshack.net\/articles\/css\/5-steps-to-drastically-improve-your-css-knowledge-in-24-hours\/\">5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours<\/a><br \/>  <a href=\"http:\/\/code.tutsplus.com\/series\/css3-mastery--net-18126\">CSS3 Mastery<\/a><br \/>  <a href=\"http:\/\/code.tutsplus.com\/tutorials\/getting-to-work-with-css3-power-tools--net-13894\">Getting to Work with CSS3 Power Tools<\/a><br \/>  <a href=\"https:\/\/github.com\/AllThingsSmitty\/css-protips\">CSS pro tips<\/a>        \t<\/p>\n<div class=\"polling\">\n<form action=\"\/json\/polling\/\" class=\"poll\" method=\"post\">\n<div class=\"poll_title\">\u041f\u043e\u043b\u0435\u0437\u043d\u044b \u043b\u0438 \u0432\u0430\u043c \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u044b \u0442\u0430\u043a\u043e\u0433\u043e \u0440\u043e\u0434\u0430?<\/div>\n<p>  \t\t<input type=\"hidden\" name=\"post_id\" value=\"273471\"\/> \t\t<input type=\"hidden\" name=\"polling_question_id\" value=\"14455\"\/>  \t\t<\/p>\n<table class=\"answer\">\n<tr>\n<td class=\"input\"> \t\t\t\t\t<input type=\"radio\" id=\"vv70775\" \t\t\t\t\t\tclass=\"radio js-field-data\" \t\t\t\t\t\tname=\"variant[]\" \t\t\t\t\t\tvalue=\"70775\" \/> \t\t\t\t<\/td>\n<td class=\"label\"> \t\t\t\t\t<label for=\"vv70775\">\u0434\u0430<\/label> \t\t\t\t<\/td>\n<\/tr>\n<tr>\n<td class=\"input\"> \t\t\t\t\t<input type=\"radio\" id=\"vv70777\" \t\t\t\t\t\tclass=\"radio js-field-data\" \t\t\t\t\t\tname=\"variant[]\" \t\t\t\t\t\tvalue=\"70777\" \/> \t\t\t\t<\/td>\n<td class=\"label\"> \t\t\t\t\t<label for=\"vv70777\">\u043d\u0435\u0442<\/label> \t\t\t\t<\/td>\n<\/tr>\n<\/table>\n<p class=\"total\">\u041d\u0438\u043a\u0442\u043e \u0435\u0449\u0451 \u043d\u0435 \u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043b. \u0412\u043e\u0437\u0434\u0435\u0440\u0436\u0430\u0432\u0448\u0438\u0445\u0441\u044f \u043d\u0435\u0442.<\/p>\n<\/p><\/form>\n<p class=\"for_users_only_msg\">\u0422\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u043f\u0440\u043e\u0441\u0435. <a href=\"https:\/\/habrahabr.ru\/auth\/login\/\">\u0412\u043e\u0439\u0434\u0438\u0442\u0435<\/a>, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430.<\/p>\n<\/p><\/div>\n<div class=\"clear\"><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/273471\/\"> http:\/\/habrahabr.ru\/post\/273471\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>       <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/1ce\/3e2\/c73\/1ce3e2c734424532bd09eed3bfc3febd.jpg\" align=\"left\"\/><\/p>\n<h4><b>CSS Refresher<\/b><\/h4>\n<p>  \u042d\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u0438 \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u043f\u043e \u0432\u0451\u0440\u0441\u0442\u043a\u0435. \u0421\u0432\u043e\u0435\u043e\u0431\u0440\u0430\u0437\u043d\u0430\u044f \u043f\u0430\u043c\u044f\u0442\u043a\u0430 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043a\u0430\u0436\u0434\u043e\u0434\u043d\u0435\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 CSS. \u041e\u0441\u0432\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0441\u0430\u043c\u044b\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u0442\u0435\u043c\u044b, \u043e\u0442 \u0434\u0435\u0442\u0430\u043b\u0435\u0439 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f SVG \u0438 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432. \u041f\u0440\u043e\u0435\u043a\u0442 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e github \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0432 \u043d\u0435\u043c \u0443\u0447\u0430\u0441\u0442\u0438\u0435, \u0442\u0430\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u0438 \u043d\u0435 \u0441\u043b\u044b\u0448\u0430\u043b\u0438.<\/p>\n<h4><b>\u041e\u0442 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430<\/b><\/h4>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e \u0432\u0441\u0435\u0445, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041c\u0430\u043a\u0441\u0438\u043c \u0418\u0432\u0430\u043d\u043e\u0432, \u0438 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b \u0434\u043b\u044f \u0432\u0430\u0441 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0438\u0437 \u0421\u0430\u043d-\u0424\u0440\u0430\u043d\u0446\u0438\u0441\u043a\u043e <a href=\"http:\/\/www.vasanthk.com\/#\/resume\">\u0412\u0430\u0441\u0430\u043d\u0442\u0430 \u041a\u0440\u0438\u0448\u043d\u0430\u043c\u0443\u0440\u0442\u0438<\/a> (Vasanth Krishnamoorthy) \u00ab<a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes\">CSS Refresher<\/a>\u00bb. Web-\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u043e\u0442\u0440\u0430\u0441\u043b\u0435\u0439 \u0432 \u043d\u0430\u0448\u0435 \u0432\u0440\u0435\u043c\u044f. \u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0432\u043e\u0437\u044c\u043c\u0438 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0432\u0438\u0434\u0435\u043e\u043a\u0443\u0440\u0441 \u043d\u0430 tuts+ \u0438 \u043e\u0441\u0432\u043e\u0439 html-\u0432\u0435\u0440\u0441\u0442\u043a\u0443, \u043e\u0434\u043d\u0430\u043a\u043e, \u043a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a Opera Software \u0412\u0430\u0434\u0438\u043c \u041c\u0430\u043a\u0435\u0435\u0432, \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u044f \u043d\u0430 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 CodeFest, \u043e\u043d\u0438 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u044e\u0442 \u043f\u043b\u043e\u0445\u043e. \u041d\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043c\u043e\u0436\u0435\u0442 \u043c\u044b \u0438\u0442\u0430\u043a \u0432\u0441\u0435 \u044d\u0442\u043e \u0437\u043d\u0430\u0435\u043c. <\/p>\n<h4><b>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/b><\/h4>\n<p>  <\/p>\n<ol>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#positioning\">\u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 (position)<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#display\">\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 (display)<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#floats\">\u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b (float)<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#css-selectors\">CSS \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#selector-efficiency\">\u042d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#repaints-and-reflows\">\u041f\u0435\u0440\u0435\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0438 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#css3-properties\">CSS3 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/a> <\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#css3-media-queries\">CSS3 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#responsive-web-design\">\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 web-\u0434\u0438\u0437\u0430\u0439\u043d<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#css3-transitions\">CSS3 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#css-animations\">CSS3 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#scalable-vector-graphics-svg\">\u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430 (SVG)<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#css-sprites\">CSS \u0441\u043f\u0440\u0430\u0439\u0442\u044b<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#vertical-alignment\">\u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vasanthk\/css-refresher-notes#known-issues\">\u0418\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/a><\/li>\n<\/ol>\n<p>  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-272026","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/272026","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=272026"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/272026\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=272026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=272026"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=272026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}