Proficient in CSS and HTML design patterns chapter 8 (Box Model attributes)

Source: Internet
Author: User
Positioning grandfather Element

No parent Element Located

Horizontal stretching of static elements vertical stretching of absolute elements horizontal stretching of absolute Elements

Code

<! Doctype HTML public " -// W3C // dtd xhtml 1.0 transitional // en "   " Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< HTML xmlns = " Http://www.w3.org/1999/xhtml " >
< Head >
< Title > No title page </ Title >
< Style Type = " Text/CSS " >
Div
{
Border: solid 1px;
}
. GP
{
Position: relative;
Width: 500px;
Height: 200px;
Margin - Left: 150px;
Margin - Top: 150px;
}
. Parent
{
Width: 300px;
Height: 150px;
Margin - Left: 20px;
}
# HSS
{
Margin - Left: 30px;
Margin - Right: 30px;
Width: auto;

}
# VSA
{
Position: absolute;
Width: 120px;
Left: auto;
Margin - Left: auto;
Right: 0 ;
Margin - Right: 70px;
Height: auto;
Top: 0 ;
Margin - Top: - 30px;
Bottom: 0 ;
Margin - Bottom: - 30px;
Z - Index: 1000 ;

}
# HSA
{
Position: absolute;
Margin - Left: - 30px;
Margin - Right: - 30px;
Margin - Top: 30px;
Margin - Bottom: - 30px;
Width: auto;
Left: 0 ;
Right: 0 ;

}
</ Style >
</ Head >
< Body >
< Div Class = " GP " >
Positioning grandfather Element
< Div Class = " Parent " >
No parent Element Located
< Div ID = " HSS " >
Static elements for horizontal scaling </ Div >
< Div ID = " VSA " >
Absolute vertical stretch Element </ Div >
< Div ID = " HSA " >
Absolute elements of horizontal stretching </ Div >
</ Div >
</ Div >
</ Body >
</ Html >

 

 I. indent

Static Indentation horizontal stretching of static elements

The width of the parent element is 300px.

{

Width: auto;

Margin-left: 50px;

Margin-Right: 50px;

Width: auto;

}

In this case, the sub-elements are indented to the left and right. The width of the sub-element is PX.

Summary: static elements are configuredWidth: AutoAnd the left and right gaps are the remaining width.

Absolute indent the absolute element of vertical stretch

The absolute positioning of the margin value must know its top, bottom, left, right, because only in this way can it know its outer box, otherwise it is the content of the surrounding element.

Conclusion: for absolute positioning, If You Want To vertically stretch it, you must specify its top, bottom to stretch it. Similarly, you can get left and rigoal to stretch it left and right.

 

 Ii. Static element offset

Static element offset is usually offset by margin-left margin-right margin-top margin-bottom.

However, for IE6 and 7, Maggin-left:-30px is used to remove the parent element. Only IE8 displays the excess part.

3. Floating element offset

For float, unlike absolute positioning (absolute) and fixed positioning (fixed), the former is the same as folat element, and the latter is independent of each other.

Iv. offsets of absolute and fixed elements

Absolute positioning and fixed positioning (relative to the screen position, the scroll bar should not be rolled, and position: fixed is not supported in IE6)

In absolute positioning and fixed positioning, the vertical and vertical offsets after margin are performed based on the position

V. Alignment of static inline ElementsLeft-aligned content

Center (Row Height 48px)

Right

It is up to the user agent (rather than CSS) to determine how the alignment text at both ends is stretched to fill the space between the left and right boundaries of the parent element. For example, some browsers may only add extra space between words, while others may evenly deploy extra space between letters (but CSS rules indicate that, if the letter-spacing attribute is specified as a length value, "the user agent cannot further increase or decrease the space between characters "). Some user proxies may reduce the space of some rows and compress the text more closely. All these operations will affect the appearance of the element, or even change its height, depending on how many lines of text are affected by the alignment of the user agent.

BenchmarkLower than BenchmarkHigher than Benchmark

Line-height: Set the Row Height.

Vertical-align: Baseline (baseline) + V (baseline move up V)-V (baseline move down V)

Text-align: Left (left), right (right), center (center), justify (Achieve text alignment at both ends, with caution, and many problems)

Vi. Alignment and offset of static block elements

1. Margin-left: auto; margin-Right: auto can center block elements.

2. When the width of a block element is not specified, margin-left: Value indent the value distance.

7. Alignment and offset of static tables

1. Block elements cannot be wrapped unless they are set to positioning or floating

2. inline elements cannot be set to dimensions unless they are set to positioning or floating

3. Table can be wrapped, set, and versatile.

Conclusion: After floating or positioning, it has the feature of setting the width and Package content, and table itself has this feature.

8. Alignment and offset of absolute Elements

 

Alignment & offset in the upper left corner

Align & offset in the lower left corner

Center alignment

Align & offset in the upper right corner

Align & offset in the lower right corner

The compatibility of center symmetry is a problem.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.