CSS7. 定位 - inherit
描述
当一个元素的定位属性设置为"inherit"时，表示从父元素继承定位属性。现在虽然类名为"inner"的里盒子设置了"left: 10px"属性，但是这是无效的，因为该盒子的定位属性值为"static"。现在给里盒子添加"position: inherit"属性，表示从类名为"outer"的父级外盒子继承定位属性，现在发现里盒子的"left: 10px"属性依然没有生效，因为外盒子的定位值依然是"static"。最后再给外盒子添加"position: relative"属性，此时会发现里盒子向右移动了10px，定位属性"left"生效了。HTML/CSS/JavaScript 解法, 执行用时: 1745ms, 内存消耗: 77772KB, 提交时间: 2021-12-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 .outer {\n width: 100px;\n height: 100px;\n background-color: black;\n position:relative;\n }\n .inner {\n left:10px;\n width: 80px;\n height: 80px;\n background-color: red;\n position:inherit;\n }\n </style>\n </head>\n <body>\n \t<section class=\"outer\">\n <section class=\"inner\">\n \n </section>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1750ms, 内存消耗: 77772KB, 提交时间: 2022-02-19
{"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 .outer {\n width: 100px;\n height: 100px;\n background-color: black;\n position: relative;\n }\n .inner {\n width: 80px;\n height: 80px;\n background-color: red;\n left: 10px;\n position:inherit;\n }\n </style>\n </head>\n <body>\n \t<section class=\"outer\">\n <section class=\"inner\">\n \n </section>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1750ms, 内存消耗: 77812KB, 提交时间: 2022-01-04
{"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 .outer {\n width: 100px;\n height: 100px;\n background-color: black;\n position:relative;\n \n }\n .inner {\n width: 80px;\n height: 80px;\n background-color: red;\n position:inherit;\n left:10px;\n }\n </style>\n </head>\n <body>\n \t<section class=\"outer\">\n <section class=\"inner\">\n \n </section>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1752ms, 内存消耗: 77856KB, 提交时间: 2022-01-29
{"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 .outer {\n width: 100px;\n height: 100px;\n background-color: black;\n }\n .inner {\n width: 80px;\n height: 80px;\n background-color: red;\n }\n * {\n margin: 0;\n padding: 0;\n }\n .outer {\n width: 100px;\n height: 100px;\n background-color: black;\n position:relative;\n }\n .inner {\n width: 80px;\n height: 80px;\n background-color: red;\n left:10px;\n position:inherit;\n }\n </style>\n </head>\n <body>\n \t<section class=\"outer\">\n <section class=\"inner\">\n \n </section>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1753ms, 内存消耗: 77780KB, 提交时间: 2022-02-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 .outer {\n width: 100px;\n height: 100px;\n background-color: black;\n position:relative;\n }\n .inner {\n width: 80px;\n height: 80px;\n background-color: red;\n position: inherit;\n left:10px;\n }\n </style>\n </head>\n <body>\n \t<section class=\"outer\">\n <section class=\"inner\">\n \n </section>\n </section>\n </body>\n</html>","libs":[]}