Use DIV + CSS web pages before a standardized layout, in addition to master the box model, but also to master two of the more important concepts of positioning and floating, they can control the way the elements are arranged and displayed on the page. A box fitted with block content, if a plurality of boxes used in combination, then, can be carried out by positioning the entire page layout and setting floating. By a plurality of page layout shown in FIG. 1 cartridge, a dotted line frame represents each box model.
FIG 1 a plurality of boxes defined page layouts
Although CSS style property is very large, but the actual layout of the page properties involved actually very little. The CSS positioning properties is used extensively, the control element can be planar or spatial positions, and the height, width, and visibility. CSS may also be used to change the type of display property generated block, for example, the display attribute is set to none, this block will no longer block and all contents displayed. By the display property to block, allow inline elements behave like block-level elements of the same. Common CSS properties involved in page layout are shown in Table 1.
Table 1 common CSS properties involved in page layout
It provides relative and absolute both targeting methods, in the CSS. The so-called relative positioning means allows the operator to shift the elements in position relative to other elements on, and absolute positioning means so that the operating elements of the original document reference offset. Table 2-2 Examples of attribute code portion is positioned as follows:
