CSS2. 盒模型 - border-box
描述
默认盒模型的width和height只会作用于盒子的内容区，而通过"box-sizing"属性可以改变计算盒子大小的方式。"box-sizing"的默认值为"content-box"，即上一题看到的那样，把值只作用于内容区。现在给类名为"border-box"的盒子设置"box-sizing"属性为"border-box"，此时width和height的值不仅会作用于内容区，并且还会包括内边距和边框。HTML/CSS/JavaScript 解法, 执行用时: 1679ms, 内存消耗: 77820KB, 提交时间: 2022-02-09
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n .border-box{\n padding: 5px;\n height: 100px;\n width: 100px;\n border: 5px solid black;\n box-sizing: border-box;\n }\n </style>\n </head>\n <body>\n \t<div class=\"border-box\"></div>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1688ms, 内存消耗: 77812KB, 提交时间: 2022-02-08
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n .border-box{\n width: 100px;\n height: 100px;\n padding: 5px;\n border: 5px solid black;\n box-sizing: border-box;\n }\n </style>\n </head>\n <body>\n \t<div class=\"border-box\"></div>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1688ms, 内存消耗: 77816KB, 提交时间: 2022-02-08
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n .border-box{\n height:100px;\n width:100px;\n padding:5px;\n border:5px solid black;\n box-sizing:border-box;\n }\n </style>\n </head>\n <body>\n \t<div class=\"border-box\"></div>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1740ms, 内存消耗: 77764KB, 提交时间: 2021-12-21
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n .border-box{\n width:100px;\n height:100px;\n padding:5px;\n border:5px solid black;\n box-sizing:border-box\n }\n </style>\n </head>\n <body>\n \t<div class=\"border-box\"></div>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1741ms, 内存消耗: 77900KB, 提交时间: 2022-01-21
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n .border-box{\n width:100px;\n height:100px;\n border:5px solid black;\n padding:5px;\n box-sizing:border-box;\n }\n </style>\n </head>\n <body>\n \t<div class=\"border-box\"></div>\n </body>\n</html>","libs":[]}