35.CSS traditional layout "down"

27th Chapter traditional layout "down"

First, positioning the layout

CSS2 provides the position attribute to achieve absolute and relative positioning of elements

(1)static: default value, no positioning

(2)Absolute: Absolute Positioning, displacement using top,right,bottom,left

(3)relative: relative positioning, displacement using top,right,bottom,left

(4)fixed: use top,right,bottom,left for positioning and displacement using the window reference

absolute positioning, out of the document flow, in the upper left corner of the window document 0,0 as the starting point

header{

Position:absolute;

top:0;

left:0;

}

out of the flow of the document means that the element itself in the document flow is the position, if detached, it does not occupy the location of the document, as if floating in the air, there is a sense of hierarchy.

hierarchical concepts occur because absolute positioning is out of the document flow. So what layer of each element is in the end, will not conflict coverage. The Z-index attribute is then adopted to determine their hierarchical relationship.

Properties Description

Auto default Hierarchy

Digital set the hierarchy, the larger the number, the higher the level

set on the tier

header{

z-index:100;

}

position as a window reference, leaving the document stream, scrolling as the Flow bar scrolls

header{

position:fixed;

top:100px;

left:100px;

}

relative positioning, not out of the document flow, positioning offset

header{

position:relative;

top:100px;

left:100px;

}

These three are used in their respective cases, are more commonly used, but there is a situation, is: 1. To detach from the document flow (so that elements do not conflict with each other);2. with the parent element, such as Body or other parent element

as a reference point (this allows for regional absolute positioning); 3. must also be absolute positioning.

The first step: Set the parent element that needs to set the reference point to relative, and do not set the coordinates.

body{

position:relative;

}

Step Two: If the parent element sets a reference point, the absolute positioning of the child element will be the base

header{

Position:absolute;

top:0px;

left:0px;

}

1. Fixed layout

CSS Section

@charset "Utf-8"

body{

margin:0 Auto;

width:960px;

/*position:relative;*/

}

header{

width:960px;

height:120px;

background-color:olive;

Position:absolute;

top:0;

left:0;

}

aside{

width:200px;

height:500px;

Background-color:purple;

}

section{

width:760px;

height:500px;

Background-color:maroon;

Position:: absolute;

top:120;

right:0;

}

footer{

width:960px;

height:120;

Background-color:gray;

Position:absolute;

top:120;

right:0;

}

in the above, the basic use of positioning for fixed layout, but the careful can be found, in fact, only the right need to implement absolute positioning, the other in accordance with the ordinary placement can be designed to the fluid layout, as long as the length is set to a percentage

Second,box-sizing

The total length of the element box will increase if it is added to the inner margin padding and margin border , and If this element is used for very precise layout, we will calculate the increment and decrement, which is more troublesome, especially when setting dynamic.

CSS3 provides an attribute box-sizingthatdefines how the element box will be parsed, so that you can choose to avoid the layout element box to increase the padding and the length of the border.

Properties Description

Content-box default value,border and padding This only after the total length of the element

Border-box border and padding are not used for the total length of the element

set border-box to let border and padding do not add extra element size

Box-sizing:border-box;

Box-sizing was launched by CSS3, and each vendor set a private prefix when implemented

Opera Firefox Chrome Safari IE

support with prefix required No 2~4~9 3.1~5 8.0+

support without prefix 10.1+ 29+ 6+ 9.0+

full Form

-webkit-box-sizing:border-box;

·

·

Third,resize

CSS3 provides a resize property to change the element size

(1)none default value, does not allow user to adjust element size

(2)both user can adjust the width and height of the element

(3)horizontal user can adjust the width of the element

(4)vertical User can adjust the height of the element

General Common elements, the default value is not allowed, but if it is the TEXTAREA element of the form class , the default is allowed, and the normal element needs to set overflow:Auto , with Resize the dragged image will appear.

example,header{

height:120px;

background-color:alive;

Over-flow:auto;

Resize:both;

}

A drag icon appears at the bottom right of the Header table.

35.CSS traditional layout "down"