flow-abs-rel-desc.html
来自「CSS lets learn this step by step...」· HTML 代码 · 共 61 行
HTML
61 行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"> <title>Long description for example illustrating positioningwith respect to a positioned ancestor</title> </head> <body> <h1>Long description for example illustrating positioningwith respect to a positioned ancestor</H1><P>This diagram illustrates the effects of absolutely positioning abox ("inner") with respect to a containing block established by arelatively positioned ancestor ("outer").<P>A document window is shown, with 8 lines (numbered 1 to 8), each24px high. All body and "outer" text has been flowed into lines intolines 1, 2, and 3. The "inner" box has been positioned relative to thetop and left edges of the "outer" element's first inline box.<P>In the following PRE element, each 24 pixel line is simulated bytwo lines, the second beginning with the appropriate number. Thereference edges for positioning the "inner" box are indicated in thediagram by thick dashed lines. The upper left coordinates of the"inner" box are labeled by (+200, -100). In the PRE element below,the reference edges for "inner" are indicated by vertical bars and equal signs. The offset of the "inner" box is given in square brackets.The lines of text, as they appear in theimage, contain approximately:</p><PRE> ==== |1 Beginning of body contents.|Start2 of outer contents. End of outer3 contents. End of body contents.4 [(+200, -100)]5 Inner6 contents.7 8 </PRE><P>The default text color is black."Start of outer contents" is red."Inner contents" is blue."End of outer contents" is red.<P><a href="../../visuren.html#img-flow-abs-rel">Return to image.</a> </body></html>⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?