27th Chapter CSS Traditional layout [next]

Learning Essentials:

1. Positioning the layout

2.box-sizing

3.resize

Keynote Teacher: Li Tinghui

This chapter focuses on the traditional layout used in the early days of CSS in HTML5, and in many cases, these layouts are very useful.

A Positioning layouts

Before using the positioning layout, let's look at the use of positional properties. CSS2 provides the position property to achieve absolute positioning and relative positioning of elements.

Property	Description
Static	Default value, no positioning.
Absolute	Absolute positioning, using top, right, bottom and left for displacement.
Relative	Relative positioning, use top, right, bottom and left for displacement.
Fixed	Position with the window reference and use top, right, bottom and left to shift.

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

{    position: absolute;     top: 100px;     Left: 100px;}

The so-called out-of-document flow means that the element itself is a placeholder in the document flow. If detached, it does not occupy the location of the document, as if floating in the air generally, with a sense of hierarchy.

Hierarchical concepts occur because absolute positioning is out of the document flow. Then each element in the end of that layer, will not conflict coverage. The hierarchical relationship is determined by the Z-index property.

Property	Description
Auto	Default hierarchy
Digital	Set the hierarchy, the larger the number, the higher the level

Set on Level 100

{    z-index: +;}

Position as a window reference, leaving the document stream, scrolling as the scroll bar scrolls

{    position: fixed;     top: 100px;     Left: 100px;}

Relative positioning, non-detached from document flow, placeholder offset

{    position: relative;     top: 100px;     Left: 100px;}

Each of the three species is used in their own case, and are more commonly used. But there is also the case that: 1. To detach from the document flow (so that the elements do not conflict with each other); 2. The parent element, such as body or other parent element, is the reference point (this allows for a culture absolute positioning), and 3. Must also be absolutely positioned.

The first step is to set the parent element that needs to set the reference point to relative and not set the coordinates

{    position: relative;}

In the second step, if the parent element sets a reference point, the absolute positioning of the child element will be the baseline

{    position: absolute;     top: 0px;     Left: 0px;}

1. Fixed Layout

CSS section

Body{width:960px;margin:0 Auto;position:relative;}Header{width:960px;Height:120px;position:Absolute;Top:0; Left:0;}aside{width:200px;Height:500px;position:Absolute;Top:120px; Left:0;} Section{width:760px;Height:500px;position:Absolute;Top:120px;/*left:200px;*/ Right:0;}Footer{width:960px;Height:120px;position:Absolute;Top:620px;}

Above, the basic use of positioning for fixed layout. But careful can be found, in fact, only the right need to implement the absolute positioning, the other in accordance with the ordinary placement can be. For the design of a fluid layout, simply set the length to a percentage.

two. box-sizing

In the Box model section, we learned that the total length of the element box would increase if the padding padding and border border were added. So if this element is used for very precise layout, we need to calculate the increment or decrease. This is actually a more annoying operation, especially when the page layout is dynamically set.

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

Property	Description
Content-box	The default values, border and padding, are set after the total Length.
Border-box	Border and padding are not used for the total length of the element after they are set.

Set Border-box to let border and padding not add extra element size

{    width: 200px;     height: 500px;     background-color: purple;     padding: 10px;     Border: 5px solid red;     box-sizing: border-box;     float: left;}

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 ~ 28	4 ~ 9	3.1 ~ 5	8.0+
Support without prefixes	10.1+	29+	+	6+	9.0+

Full form

-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;

three. Resize

CSS3 provides a Resize property to change the element size.

Property	Description
None	The default value, which does not allow the user to resize the element.
Both	The user can adjust the width and height of the element.
Horizontal	The user can adjust the width of the element.
Vertical	The user can adjust the height of the element.

Generally normal elements, the default value is not allowed. However, if it is a TEXTAREA element of the form class, it is allowed by default. While the common elements need to set Overflow:auto, with the resize will appear to drag graphics.

Allow modification

{    resize: both;     overflow: auto;}

27th Chapter CSS Traditional layout [next]