{"id":5060,"date":"2022-02-24T14:27:15","date_gmt":"2022-02-24T06:27:15","guid":{"rendered":"https:\/\/www.baishitou.cn\/?p=5060"},"modified":"2022-02-24T14:27:15","modified_gmt":"2022-02-24T06:27:15","slug":"css3%e8%ae%a1%e7%ae%97%e5%b1%9e%e6%80%a7calc%e7%9a%84%e4%bd%bf%e7%94%a8%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/www.baishitou.cn\/5060.html","title":{"rendered":"CSS3\u8ba1\u7b97\u5c5e\u6027calc()\u7684\u4f7f\u7528\u65b9\u6cd5"},"content":{"rendered":"<h1>CSS3\u8ba1\u7b97\u5c5e\u6027calc()\u7684\u4f7f\u7528\u65b9\u6cd5<\/h1>\n<p>&nbsp;<\/p>\n<h3>calc() \u53ea\u4f5c\u7528\u4e8e\u5c5e\u6027\u503c<\/h3>\n<p><strong>\u8bbe\u7f6e\u5bbd\u5ea6\uff1awidth:calc(100vw - 123px);<\/strong><\/p>\n<p>\u8bf4\u660e\uff1a1\u3001vw\u662fwidth of view(port)\u7684\u7f29\u5199\uff1b<\/p>\n<p>2\u3001100vw\u8868\u793a\u767e\u5206\u4e4b\u767e\u7684\u89c6\u56fe\u5bbd\u5ea6\uff1b<\/p>\n<p>3\u3001123px\u662f\u9700\u8981\u51cf\u53bb\u7684\u5bbd\u5ea6\uff1b<\/p>\n<p>4\u3001\u51cf\u53f7\u7684\u4e24\u8fb9\u5fc5\u987b\u90fd\u6709\u81f3\u5c11\u4e00\u4e2a\u7a7a\u683c\u3002<\/p>\n<p><strong>\u8bbe\u7f6e\u9ad8\u5ea6\uff1aheight:calc(100vh-123px);<\/strong><\/p>\n<p>\u8bf4\u660e\uff1a1\u3001vh\u662fheight of view(port)\u7684\u7f29\u5199\uff1b<\/p>\n<p>2\u3001100vh\u8868\u793a\u767e\u5206\u4e4b\u767e\u7684\u89c6\u56fe\u9ad8\u5ea6\uff1b<\/p>\n<p>3\u3001123px\u662f\u9700\u8981\u51cf\u53bb\u7684\u9ad8\u5ea6\uff1b<\/p>\n<p>4\u3001\u540c\u7406\u51cf\u53f7\u7684\u4e24\u8fb9\u5fc5\u987b\u90fd\u6709\u81f3\u5c11\u4e00\u4e2a\u7a7a\u683c\u3002<\/p>\n<p>\u53ef\u4ee5\u5e94\u7528\u5168\u90e8\u5c5e\u6027\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-none\">.nr {\r\n  font-size: calc(3vw + 2px);\r\n  width:     calc(100% - 10px);\r\n  height:    calc(100vh - 10px);\r\n  padding:   calc(1vw + 5px);\r\n}\r\n<\/code><\/pre>\n<p>\u4e5f\u53ef\u4ee5\u4ec5\u7528\u4e8e\u90e8\u5206\u5c5e\u6027\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-none\">.nr {\r\n  margin: 10px calc(2vw + 5px);\r\n  border-radius: 15px calc(15px \/ 3) 4px 2px;\r\n  transition: transform calc(1s - 120ms);\r\n}\r\n<\/code><\/pre>\n<p>\u5b83\u751a\u81f3\u53ef\u4ee5\u6210\u4e3a\u6784\u6210\u5c5e\u6027\u4e00\u90e8\u5206\u7684\u53e6\u4e00\u4e2a\u529f\u80fd\u7684\u4e00\u90e8\u5206\uff01 \u4f8b\u5982\uff0c\u8fd9\u91cc\u7684calc() \u7528\u4e8e\u6e10\u53d8\u7684\u8272\u6807\u4e2d<\/p>\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-none\">.nr {\r\n  background: #1E88E5 linear-gradient(\r\n    to bottom,\r\n    #1E88E5,\r\n    #1E88E5 calc(50% - 10px),\r\n    #3949AB calc(50% + 10px),\r\n    #3949AB\r\n  );\r\n}\r\n<\/code><\/pre>\n<h3 id=\"1-calc-is-for-lengths\">calc() \u7528\u4e8e\u957f\u5ea6\u548c\u5176\u4ed6\u6570\u503c<\/h3>\n<p>\u4ee5\u4e0a\u6240\u6709\u793a\u4f8b\u672c\u8d28\u4e0a\u90fd\u662f\u57fa\u4e8e\u6570\u5b57\u7684\u3002 \u6211\u4eec\u4f1a\u8bb2\u5230\u4e00\u4e9b\u6570\u7684\u4f7f\u7528\u6ce8\u610f\u4e8b\u9879\uff08\u56e0\u4e3a\u6709\u65f6\u4f60\u4e0d\u9700\u8981\u5355\u4f4d\uff09\uff0c\u4f46\u8fd9\u662f\u9488\u5bf9\u6570\u5b57\u7684\u6570\u5b66\uff0c\u800c\u4e0d\u662f\u5b57\u7b26\u4e32\u4e4b\u7c7b\u7684\u4e1c\u897f\u3002<\/p>\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-none\">.nr {\r\n  \/* Nope! *\/\r\n  counter-reset: calc(\"My \" + \"counter\");\r\n}\r\n.nr::before {\r\n  \/* Nope! *\/\r\n  content: calc(\"Candyman \" * 3);\r\n}\r\n<\/code><\/pre>\n<p>CSS\u6709\u5f88\u591a\u957f\u5ea6\uff0c\u5b83\u4eec\u90fd\u53ef\u4ee5\u4e0ecalc() \u4e00\u8d77\u4f7f\u7528\uff1a<\/p>\n<ul>\n<li>px<\/li>\n<li>%<\/li>\n<li>em<\/li>\n<li>rem<\/li>\n<li>in<\/li>\n<li>mm<\/li>\n<li>cm<\/li>\n<li>pt<\/li>\n<li>pc<\/li>\n<li>ex<\/li>\n<li>ch<\/li>\n<li>vh<\/li>\n<li>vw<\/li>\n<li>vmin<\/li>\n<li>vmax<\/li>\n<\/ul>\n<p>\u65e0\u5355\u4f4d\u7684\u6570\u5b57\u4e5f\u662f\u53ef\u4ee5\u63a5\u53d7\u7684\uff0c\u4f8b\u5982line-height\uff1acalc\uff081.2 * 1.2\uff09; \u4ee5\u53ca\u8bf8\u5982transform\uff1arotate\uff08calc\uff0810deg * 5\uff09\uff09;\u4e4b\u7c7b\u7684\u89d2\u5ea6\u3002 \u60a8\u4e5f\u53ef\u4ee5\u4e0d\u6267\u884c\u4efb\u4f55\u8ba1\u7b97\u5e76\u4e14\u4ecd\u7136\u6709\u6548\uff1a<\/p>\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-none\">.nr {\r\n  \/* Little weird but OK *\/\r\n  width: calc(20px);\r\n}\r\n<\/code><\/pre>\n<p><span style=\"color: #ff0000;\">\u6ce8\u610f\uff1acalc()\u4e0d\u80fd\u5728\u5a92\u4f53\u67e5\u8be2\u4e2d\u4f7f\u7528\u3002<\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS3\u8ba1\u7b97\u5c5e\u6027calc()\u7684\u4f7f\u7528\u65b9\u6cd5 &nbsp; calc() \u53ea\u4f5c\u7528\u4e8e\u5c5e\u6027\u503c \u8bbe\u7f6e\u5bbd\u5ea6\uff1awidth:ca [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[1604,1605],"class_list":["post-5060","post","type-post","status-publish","format-standard","hentry","category-web","tag-calc","tag-css3"],"_links":{"self":[{"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/posts\/5060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/comments?post=5060"}],"version-history":[{"count":0,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/posts\/5060\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/media?parent=5060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/categories?post=5060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/tags?post=5060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}