{"id":84844,"date":"2023-09-27T05:20:47","date_gmt":"2023-09-27T05:20:47","guid":{"rendered":"https:\/\/abbyhsia.com\/?p=84844"},"modified":"2025-04-15T11:13:45","modified_gmt":"2025-04-15T11:13:45","slug":"normal-flow-and-out-of-flow-css","status":"publish","type":"post","link":"https:\/\/abbyhsia.com\/index.php\/2023\/09\/27\/normal-flow-and-out-of-flow-css\/","title":{"rendered":"[Note] Normal Flow and Out of Flow-CSS"},"content":{"rendered":"\n

cover credit to Charles Patterson<\/a><\/p>\n\n\n\n

\u6b63\u5e38\u6d41(Normal Flow)<\/strong><\/h2>\n\n\n\n

\u5148\u5927\u81f4\u8b1b\u89e3\u5340\u584a\u5143\u7d20\uff08Block elements)\u8207\u884c\u5167\u5143\u7d20(Inline elements)\u5728HTML\u7684\u9ed8\u8a8d\u4f48\u5c40<\/p>\n\n\n\n

\u5340\u584a\u5143\u7d20<\/strong><\/h3>\n\n\n\n

\u5340\u584a\u5143\u7d20\u5728HTML\u4e2d\u9810\u8a2d\u70badisplay:block;\u6703\u8ddf\u96a8\u7236\u5143\u7d20\u5bec\u5ea6\uff0c\u540c\u6642\u5efa\u7acb\u591a\u500b\u5340\u584a\u5143\u7d20\u6392\u5217\u65b9\u5f0f\u5f9eHTML\u7a0b\u5f0f\u78bc\u5f9e\u4e0a\u5f80\u4e0b\u6e32\u67d3\u3002<\/p>\n\n\n\n

\u4ee5\u4e0b\u65b9\u70ba\u4f8b\uff1a\u5728\uff22\u5340\u584a\u5143\u7d20\u524d\u5f8c\u53e6\u8d77\u4e00\u884c\u5340\u584a\u5143\u7d20\uff0cA, C\u6703\u8207\uff22\u5340\u5143\u7d20\u4e0a\u4e0b\u5206\u958b\uff0c\u5404\u81ea\u7368\u7acb\u4f54\u6eff\u7236\u5143\u7d20\u3002<\/p>\n\n\n\n

\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
HTML<\/span><\/span><\/path><\/path><\/svg><\/span>
<!--<\/span>Html<\/span>--><\/span><\/span>\n<<\/span>div<\/span> <\/span>class<\/span>=<\/span>"box"<\/span>><\/span><\/span>\n  <\/span><<\/span>h2<\/span>><\/span>A<\/span><\/<\/span>h2<\/span>><\/span><\/span>\n<\/<\/span>div<\/span>><\/span><\/span>\n<<\/span>div<\/span> <\/span>class<\/span>=<\/span>"box"<\/span>><\/span><\/span>\n  <\/span><<\/span>h2<\/span>><\/span>B<\/span><\/<\/span>h2<\/span>><\/span><\/span>\n<\/<\/span>div<\/span>><\/span><\/span>\n<<\/span>div<\/span> <\/span>class<\/span>=<\/span>"box"<\/span>><\/span><\/span>\n  <\/span><<\/span>h2<\/span>><\/span>C<\/span><\/<\/span>h2<\/span>><\/span><\/span>\n<\/<\/span>div<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
CSS<\/span><\/span><\/path><\/path><\/svg><\/span>
\/* CSS *\/<\/span><\/span>\n.<\/span>box<\/span>{<\/span><\/span>\n  <\/span>background<\/span>:#<\/span>E5E8EE<\/span>;<\/span><\/span>\n  <\/span>margin-bottom<\/span>:<\/span>10px<\/span>;<\/span><\/span>\n  <\/span>text-align<\/span>:<\/span>center<\/span>;<\/span><\/span>\n  <\/span>color<\/span>:#<\/span>B7B7B7<\/span>;<\/span><\/span>\n  <\/span>border-radius<\/span>:<\/span>12px<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
\u884c\u5167\u5143\u7d20<\/strong><\/h3>\n\n\n\n
\u884c\u5167\u5143\u7d20\u9810\u8a2d\u70badisplay:inline;\u7121\u6cd5\u8a2d\u5b9awidth<\/strong>\u3001height<\/strong>\u5176\u5bec\u9ad8\u6703\u96a8\u8005\u5167\u5bb9\u4f54\u6eff\uff0c\u884c\u5167\u5143\u7d20\u6392\u5217\u65b9\u5f0f\u6703\u7531\u5de6\u81f3\u53f3\u4e26\u5217\u3002<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
HTML<\/span><\/span><\/path><\/path><\/svg><\/span>
<!--<\/span>Html<\/span>--><\/span><\/span>\n<<\/span>a<\/span> <\/span>href<\/span>=<\/span>"#"<\/span>><\/span>btn<\/span><\/<\/span>a<\/span>><\/span><\/span>\n<<\/span>a<\/span> <\/span>href<\/span>=<\/span>"#"<\/span>><\/span>btn1<\/span><\/<\/span>a<\/span>><\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
CSS<\/span><\/span><\/path><\/path><\/svg><\/span>
\/* CSS *\/<\/span><\/span>\n.<\/span>box<\/span>{<\/span><\/span>\n  <\/span>background<\/span>:#<\/span>E5E8EE<\/span>;<\/span><\/span>\n  <\/span>margin-bottom<\/span>:<\/span>10px<\/span>;<\/span><\/span>\n  <\/span>text-align<\/span>:<\/span>center<\/span>;<\/span><\/span>\n  <\/span>color<\/span>:#<\/span>B7B7B7<\/span>;<\/span><\/span>\n  <\/span>border-radius<\/span>:<\/span>12px<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\u4e0a\u8ff0\u63d0\u53ca\u700f\u89bd\u5668\u9ed8\u8a8d\u6392\u5217\u7d44\u5408\uff0c\u5340\u584a\u5143\u7d20\u6392\u5217\u7531\u4e0a\u81f3\u4e0b\uff0c\u884c\u5167\u5143\u7d20\u7531\u5de6\u81f3\u53f3\uff0c\u6309\u7167\u4ee3\u78bc\u6392\u5217\u6e32\u67d3\u81f3\u9801\u9762\u4e2d\uff0c\u8a72\u4f48\u5c40\u7a31\u70ba\u6b63\u5e38\u6d41\u3002<\/p>\n\n\n\n
<\/p>\n\n\n\n
\u812b\u96e2\u5e38\u898f\u6d41 (Out of Flow)<\/h2>\n\n\n\n
\u53ef\u900f\u904e\u8b8a\u66f4\u5c6c\u6027\u4f86\u6539\u5beb\u9810\u8a2d\u4f48\u5c40\uff0c\u5982\uff1a\u5b9a\u4f4d(position)\u3001\u6d6e\u52d5\u5143\u7d20(float)\u3002<\/p>\n\n\n\n
\u5176\u4e2d\u5b9a\u4f4d(position)\u6709\u4e94\u7a2e\uff1a<\/p>\n\n\n\n
\n
\u975c\u614b\u5b9a\u4f4d position: static<\/code><\/strong><\/h3>\n<\/div>\n\n\n\n
\u5448\u73fe\u5982\u9810\u8a2d\u503c\uff0c\u82e5\u6709\u5fc5\u8981\u9084\u539f\u9810\u8a2d\u503c\u53ef\u4f7f\u7528\u6b64\u8a9e\u6cd5\u3002<\/p>\n\n\n\n
\u76f8\u5c0d\u5b9a\u4f4d position: relative<\/code><\/strong><\/h3>\n\n\n\n
\u5728\u7236\u5143\u7d20\u5167\u79fb\u52d5\u5143\u7d20\u4f4d\u7f6e\uff0c\u5b50\u5143\u7d20\u53ef\u52a0\u4e0aposition:relative; \u8a2d\u7f6etop, right, bottom, left\u5f9e\u7236\u5143\u7d20\u5167\u63a8\u52d5\u5b50\u5143\u7d20\u3002<\/p>\n\n\n\n
\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
HTML<\/span><\/span><\/path><\/path><\/svg><\/span>
<!--<\/span>Html<\/span>--><\/span><\/span>\n<<\/span>p<\/span>><\/span>Hi I'm<\/span><<\/span>span<\/span>><\/span>here.<\/span><\/<\/span>span<\/span>><\/span>ya<\/span><\/<\/span>p<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
CSS<\/span><\/span><\/path><\/path><\/svg><\/span>
\/*CSS*\/<\/span><\/span>\nspan<\/span>{<\/span><\/span>\n    <\/span>position<\/span>:<\/span> relative<\/span>;<\/span><\/span>\n    <\/span>top<\/span>:<\/span>20px<\/span>;<\/span><\/span>\n    <\/span>font-weight<\/span>:<\/span> bold<\/span>;<\/span><\/span>\n    <\/span>background-color<\/span>:#<\/span>0037FF<\/span>;<\/span><\/span>\n    <\/span>color<\/span>:#<\/span>fff<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
\u7d55\u5c0d\u5b9a\u4f4d position: absolute<\/code><\/strong><\/h3>\n\n\n\n
\u82e5\u5728\u7236\u5c64\u7bc4\u570d\u5167\u5c07\u5b50\u5143\u7d20\u63a8\u79fb<\/p>\n\n\n\n
\u7236\u5143\u7d20position:relative;\u5b50\u5143\u7d20position:absolute;<\/p>\n\n\n\n
\u5728\u5b50\u5143\u7d20\u8a2d\u5b9atop<\/code>,right<\/code>,bottom<\/code>,left<\/code>\u6b63\u6216\u8ca0\u6578\u503c\uff0c\u8b93\u5b50\u5143\u7d20\u4f9d\u64da\u7236\u5143\u7d20\u5b9a\u4f4d\u505a\u63a8\u79fb\u3002<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
HTML<\/span><\/span><\/path><\/path><\/svg><\/span>
<!--<\/span>Html<\/span>--><\/span><\/span>\n<<\/span>div<\/span> <\/span>class<\/span>=<\/span>"papa"<\/span>><\/span><\/span>\n<<\/span>div<\/span> <\/span>class<\/span>=<\/span>"child"<\/span>><<\/span>h2<\/span>><\/span>Child<\/span><\/<\/span>h2<\/span>><\/<\/span>div<\/span>><\/span><\/span>\n<\/<\/span>div<\/span>><\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
CSS<\/span><\/span><\/path><\/path><\/svg><\/span>
\/*CSS*\/<\/span><\/span>\n.<\/span>papa<\/span>{<\/span><\/span>\n    <\/span>position<\/span>:<\/span> relative<\/span>;<\/span><\/span>\n    <\/span>background-color<\/span>:#<\/span>EFF1F5<\/span>;<\/span><\/span>\n    <\/span>text-align<\/span>:<\/span> center<\/span>;<\/span><\/span>\n    <\/span>height<\/span>:<\/span> <\/span>200px<\/span>;<\/span><\/span>\n    <\/span>border-radius<\/span>:<\/span> <\/span>10px<\/span>;<\/span> <\/span><\/span>\n}<\/span><\/span>\n<\/span>\n.<\/span>child<\/span>{<\/span><\/span>\n    <\/span>position<\/span>:<\/span> absolute<\/span>;<\/span><\/span>\n    <\/span>top<\/span>:<\/span>10px<\/span>;<\/span><\/span>\n    <\/span>left<\/span>:<\/span> <\/span>10px<\/span>;<\/span><\/span>\n    <\/span>background-color<\/span>:#<\/span>002bc7<\/span>;<\/span><\/span>\n    <\/span>color<\/span>:<\/span> <\/span>#<\/span>fff<\/span>;<\/span>  <\/span><\/span>\n    <\/span>padding<\/span>:<\/span> <\/span>50px<\/span>;<\/span><\/span>\n    <\/span>border-radius<\/span>:<\/span> <\/span>10px<\/span>;<\/span>   <\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
\u7d55\u5c0d\u5b9a\u4f4d position: fixed<\/code><\/strong><\/h3>\n\n\n\n
\u8a72\u5143\u7d20\u8207viewport\u76f8\u5c0d\u5b9a\u4f4d\uff0c\u8a2d\u5b9a\u5c6c\u6027top,right,bottom,left \u6703\u4f9d\u64daviewport\u5bec\u9ad8\u8a2d\u5b9a\u6578\u503c\u63a8\u52d5\u6b64\u5143\u7d20\u4f4d\u7f6e\u3002<\/p>\n\n\n\n