Customize the layout policy of elements on a web page

In the article "typographical layout rules for HTML elements in Web pages", we briefly describe how browser layout is based on, however, in many cases, the default layout cannot fully meet our needs. Therefore, we also need to customize the layout policy of HTML elements in web pages by ourselves.

We can use these CSS attributes to customize the Display Effect of the page. They are clear, float, clip, and overflow (which can be divided into overflow-X and overflow-y respectively), display, and visibility. However, attributes clip, overflow, and visibility are not the focus of our attention, because although they affect the final display effect of the page, they cannot affectLayoutRules.

Let's take a look at the detailed meanings of clear, float, and display on msdn. These three CSS attributes affect the inline-level and block-level issues of HTML elements described in the 'rule' document. Clear and float are two relative attributes, clear: none is the default value, allowing both sides of the element to have inline-level boxes; clear: left, inline-level boxes on the left of an element are not allowed; clear: Right: inline-level boxes on the right of the element are not allowed; clear: both, inline-level boxes cannot exist in one row. Float: none is the default value, and the elements do not float; float: left, the elements float on the right of the object layout stream, float: Right, and the elements float on the left of the object layout stream.

Attribute display looks troublesome, because it has many values, but in fact we can simply regard the display attribute as a level method used to define the box, whether it is inline or block. For example, if we know that DIV is block-level by default, we can use <Div style = "display: inline">... </div>, it becomes inline-level, and it also follows the layout policy of inline-level. The display attribute focuses on the render method of the description element, so when we use display: none, the element will completely disappear, just like HTMLCodeThis element does not have the same display effect (of course, the element is still in the DHTML tree and can be obtained using scripts ). By the way, the difference between display: none and visibility: hidden is that if an element has an attribute setThe latterThe physical location of the element is retained by browser, and a blank area similar to the bounds is displayed on the page.

After the layout is finished, let's talk about the positioning problem of the element. The positioning is from the attribute position, top (left, right, bottom, and so on) and Z-index. The four attributes of the TLB depend on the position value. The position values are static, absolute, and relative. If postion is static, TLB will not take any position; position is absolute, and TLB will take the upper-left corner of its viewport (which is explained below) as top and left (0, 0) start Point, which is used to locate the element. position is relative, and TLB uses the coordinates of the upper left corner of the element in the original layout stream as the start point of top and left (0, 0), and then locates the element. For example, code:

< Div ID = "Div1" Style = "Border: solid 1px blue; width: 200; Height: 200; position: absolute;
Top: 50; left: 50" >
< Div ID = "Div2" Style = "Border: solid 1px green; width: 100; Height: 100; position: absolute;
Top: 25; left: 25" >
</ Div >
</ Div >

Will be displayed:

What is the viewport mentioned above? In this example, for the container element Div, the blue area circled by div1 is the viewport of div2. Therefore, although div2 position is absolute, its top & left (25, 25) it is not relative to (0, 0 ). Therefore, when locating elements in viewport, you must be careful when position is relative, although the Code:

< Div ID = "Div1" Style = "Border: solid 1px blue; width: 200; Height: 200; position: absolute;
Top: 50; left: 50" >
< Div ID = "Div2" Style = "Border: solid 1px green; width: 100; Height: 100; position: Relative;
Top: 25; left: 25" >
</ Div >
</ Div >

The display effect is the same, but the element positioning principle is different.

Note: All examples are only for ie6.0sp1.