{"id":6098,"date":"2022-03-14T15:57:51","date_gmt":"2022-03-14T07:57:51","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=6098"},"modified":"2022-03-22T17:19:57","modified_gmt":"2022-03-22T09:19:57","slug":"css-box-sizing","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2022\/03\/14\/css-box-sizing\/","title":{"rendered":"CSS  box-sizing \u5167\u5bb9\u76d2\u5b50"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>box-sizing \u5c6c\u6027\u53ef\u7528\u65bc\u4efb\u4f55\u5143\u7d20\uff0c\u521d\u59cb\u503c\u70ba content-box\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b *\/\n\/* Keyword values *\/\nbox-sizing: content-box;\nbox-sizing: border-box;\n\n\/* Global values *\/\nbox-sizing: inherit;\nbox-sizing: initial;\nbox-sizing: unset;\n\n\/* support Firefox, Chrome, Safari, Opera, IE8+ and old Android *\/\n\n.example {\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u8a2d\u5b9a\u503c<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>content-box<\/td><td>\u9810\u8a2d\u503c\uff0c\u5143\u7d20\u5c3a\u5bf8\uff1a\u5bec\u9ad8+\u5167\u8ddd+\u908a\u6846<\/td><\/tr><tr><td>border-box<\/td><td>\u5143\u7d20\u5c3a\u5bf8\uff1a\u5bec\u9ad8\u5305\u542b\u5167\u8ddd+\u908a\u6846<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">\u261e \u7bc4\u4f8b<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* CSS\u7bc4\u4f8b- 300px\u5305\u542b 1px *\/\n.div1 {\n  width: 300px;\n  height: 100px;\n  border: 1px solid blue;\n  box-sizing: border-box;\n}\n\n\/* CSS\u7bc4\u4f8b- 300px\u5305\u542b 50px+1px *\/\n.div2 {\n  width: 300px;\n  height: 100px;  \n  padding: 50px;\n  border: 1px solid red;\n  box-sizing: border-box;\n}<\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>box-sizing \u5c6c\u6027\u53ef\u7528\u65bc\u4efb\u4f55\u5143\u7d20\uff0c\u521d\u59cb\u503c\u70ba content-box\u3002 \u8a2d\u5b9a\u503c content-box &#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,12,4],"tags":[],"class_list":["post-6098","post","type-post","status-publish","format-standard","hentry","category-css","category-front-end","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6098","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=6098"}],"version-history":[{"count":19,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6098\/revisions"}],"predecessor-version":[{"id":7072,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6098\/revisions\/7072"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=6098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=6098"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=6098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}