123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
- <HTML>
- <HEAD>
- <TITLE>Example of inline flow on several lines</TITLE>
- <STYLE type="text/css">
- * {
- padding: 0;
- margin: 0;
- }
- #inlineblock {
- background-color: red;
- display: inline-block;
- margin: 30px;
- }
- #block {
- background-color: blue;
- display: block;
- margin: 30px;
- }
- div {
- background-color: yellow;
- width: 50px;
- height: 50px;
- }
- </STYLE>
- </HEAD>
- <BODY>
- <p id="p1">This value causes an element to generate an
- <span id="block">inline-level block container</span>.
- The inside
- of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level
- box.This value causes an element
- <span id="inlineblock">(e.g., LI in HTML)
- <div>你好惨</div>
- </span>
- to generate a principal
- block box and a marker box. For information about lists and examples of list formatting, please consult the section
- on lists.The 'position' and 'float' properties determine which of the CSS 2.1 positioning algorithms is used to
- calculate the position of a box.
- </p>
- </BODY>
- </HTML>
|