Introduction to basic layout and format position in CSS-HTML Tutorial-php.cn

Introduction to basic layout and format position in CSS

零下一度

Release： 2017-07-26 09:34:00

Original

1524 people have browsed it

Five basic layout positioning types: * Flexible layout - the overall width and the values of all columns within it are written in em units. This should enable the layout to scale using the browser's specified base font size. This may be more attractive and accessible for users with low vision, as column widths will be wider, allowing for more comfortable and readable line lengths at any size. Since the overall width will scale, your design must allow for this width. * Fixed Layout - The overall width and the values of all columns within it are written in pixels. The layout is centered in the user's browser. * Fluid layout - the overall width and the values of all columns within it are written in percentages. The percentage is calculated from the size of the user's browser window. * Hybrid layout - Hybrid layout combines two other types of layouts - elastic and fluid. The total width of the page is 100%, but the sidebar values are set to em units. * Absolutely positioned layout - All the outer columns of the aforementioned layouts use floating content. And an absolutely positioned layout does exactly what its name says - with an absolutely positioned outer column. It must be remembered that when using these layouts, the sidebar "raises the flow of the document" and thus may have some inappropriate results (for example, the footer may be "invisible" where the sidebar ends and is contained within the main content area page with less content than the sidebar overlaps the footer).

The first position relationship: position:fixed locks the position (relative to the position of the entire browser), which is commonly used in small advertisements in the lower right corner of major websites or other locations.

If you need to adjust the locking position, you need to use the following method:

position:fixed; top:0px; left:0px; right:0px; bottom:0px" >

The second positional relationship: position:absolute absolute position (relative to the parent element - the browser, the superior of absolute positioning)

(1) If there is no absolute on the outermost side, the div will change relative to the browser when adjusting; (2) The outermost With absolute, the div changes relative to the outermost border when adjusted.

If you need to adjust the absolute position, you need to use the following method:

position:absolute; top:0px; left:0px; right:0px; bottom:0px" >

The third positional relationship: position:relative Relative position (relative to the position where it should appear)

If you need to adjust the relative position, you need to use the following method:

position:relative; top:0px; left:0px; right:0px; bottom:0px" >

The above is the detailed content of Introduction to basic layout and format position in CSS. For more information, please follow other related articles on the PHP Chinese website!