CSS3. 盒模型- 外边距折叠
描述
常规块盒子有一种机制叫外边距折叠，即垂直方向上的两个外边距相遇时，会折叠成一个外边距，且折叠之后的外边距高度为两者之中较大的那一个。现在给类名为"top"、"bottom"两个盒子都设置宽度、高度且都为"100px"、都设置外边距且都为"10px"，可以添加任意颜色便于区分两个盒子。此时通过调试工具可以发现两个盒子之间的距离为"10px"，并不是"20px"，说明已经发生了外边距折叠。HTML/CSS/JavaScript 解法, 执行用时: 1688ms, 内存消耗: 77772KB, 提交时间: 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 .top{\n width:100px;\n height:100px;\n margin:10px;\n background-color:yellow;\n }\n .bottom{\n width:100px;\n height:100px;\n margin:10px;\n background-color:pink;\n position:absolute;\n }\n </style>\n </head>\n <body>\n <section class=\"top\"></section>\n <section class=\"bottom\"></section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1738ms, 内存消耗: 77864KB, 提交时间: 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 .top,.bottom{\n width:100px;\n height:100px;\n margin:10px;\n background:red;\n }\n .bottom{\n background:green;\n position: absolute;\n }\n </style>\n </head>\n <body>\n <section class=\"top\"></section>\n <section class=\"bottom\"></section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1738ms, 内存消耗: 77944KB, 提交时间: 2022-01-24
{"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 * {\n margin: 0;\n padding: 0;\n }\n .top,\n .bottom{\n width:100px;\n height:100px;\n margin:10px;\n }\n .top{\n background:pink;\n }\n .bottom{\n background:black;\n position:absolute;\n }\n\n </style>\n </head>\n <body>\n <section class=\"top\"></section>\n <section class=\"bottom\"></section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1746ms, 内存消耗: 77880KB, 提交时间: 2021-12-23
{"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 .top {\n width: 100px;\n height: 100px;\n margin: 10px;\n background-color: black;\n }\n .bottom {\n width: 100px;\n height: 100px;\n margin: 10px;\n background-color: pink;\n position: absolute;\n }\n </style>\n </head>\n <body>\n <section class=\"top\"></section>\n <section class=\"bottom\"></section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1747ms, 内存消耗: 77820KB, 提交时间: 2022-01-26
{"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 .top,\n .bottom{\n width:100px;\n height:100px;\n margin:10px;\n border:5px solid black;\n box-sizing:border-box;\n }\n .bottom{\n position:absolute\n }\n </style>\n </head>\n <body>\n <section class=\"top\"></section>\n <section class=\"bottom\"></section>\n </body>\n</html>","libs":[]}