Css+div Layout Application

DIV+CSS layout application One, HTML element category 2.1, top-level elements (top-level element)

Defined

Make HTML page top-level labels

Characteristics

1, not set wide height;

2, must be in the document flow in the highest position;

3, contains all block-level elements and inline elements, not be included;

Common Elements

Html

Body

Frameset

2.2, Block-level elements (block-level Element)

Defined

Elements that are displayed in blocks are often used for typography, and by default each block-level element is displayed with a newline .

Characteristics

1. Each block-level element is always started on a new line;

2, height, row height and the margin and the inner margin can be controlled;

3, the width of the default is its container of 100%, unless a width is set;

4, it can accommodate inline elements and other block elements;

Common Elements

Address-Addresses

BLOCKQUOTE-Block Reference

Center-Lift to aligning (HTML5 cancels the label)

Div-Common block-level easy, is also the main tag of CSS layout

DL-Definition List

Fieldset-form control Group

Form-Interactive Form

H1-Big title

H2-Subtitle

H3-3 level headings

H4-4 level headings

H5-5 level headings

H6-6 level headings

HR-Horizontal Divider Line

Isindex-input prompt

menu-List of menus

Noframes-frames Optional content (this chunk content is displayed for browsers that do not support frame)

NoScript-Optional script content (this content is displayed for browsers that do not support script)

OL-Sort the form

P-Paragraph

Pre-formatted text

Table-Tables

UL-Non-sorted list (unordered table)

Address-Addresses

2.3, inline elements (inline element)

Defined

Inline elements, inline elements, by default one or more inline elements are displayed on a single line .

Characteristics

1, inline elements will be displayed on the same line;

2, Width width is invalid, depending on the width of the text or picture in the element;

3, setting height is invalid, height can only be set through line-height;

4, set the margin margin only left and right margin valid, upper and lower invalid;

5, set the margin padding only left and right padding effective, upper and lower invalid;

6, can only accommodate text or other inline elements;

Common Elements

A-anchor point

ABBR-Abbreviation

Acronym-the first word

B-Bold (not recommended)

Bdo-bidi Override

Big-Large font

BR-line break

Cite-citation

Code-Computer codes (required when referencing source)

DFN-Defining fields

EM-emphasize

Fonts-font settings (not recommended) (HTML5 cancel the label)

I-Italic

IMG-Images

Input-Enter box

KBD-Define keyboard text

Label-Table Label

Q-Short Reference

S-Medium dash (not recommended)

Samp-Define sample computer code

Select-Project Selection

Small-Small font text

Span-a common inline container that defines chunks within a text

Strike-Medium Dash

Strong-Bold Emphasis

Sub-subscript

SUP-Superscript

TEXTAREA-Multi-line text input box

TT-Telex text

U-Underline

var-Defining variables

Ii. Key Layout CSS Properties Introduction 2.1, positioning (position) 2.1.1, default value-static

The default value, no positioning, that is, the normal position , the element appears in the normal HTML stream. When a DIV is not positioned, the top, bottom, left, right, or z-index declarations fail. (relative positioning Demo1)

2.1.2, relative positioning-relative

Defined

Generates relatively positioned elements relative to their normal position, combined with the TRBL Property (TOP,right, BOTTOM,left) to locate.

Characteristics

1. Relative holds the position of the object in the document flow, that is, it has the same rendering as static , it also occupies a fixed position in the document flow, and the subsequent object Not to encroach or cover ;

2, the original point of the positioning reference parent is the original point, no parent is the original point of the body as the original point, when the parent has padding and other CSS attributes, the original point of the current level is based on the original point of the parent content area to locate;

2.1.3, absolute positioning-absolute

Defined

Absolute positioning, leaving elements out of the document flow position, combined with the trbl Property (TOP,right, BOTTOM,left) To locate.

Characteristics

1. Absolute does not hold the position of the object in the document flow, it does not occupy the fixed position in the document flow, the latter object will be occupied or overwritten ;

2, if the parent (infinity) does not set the position Property , then the current absolute is combined with the TRBL property to locate the original point in the upper left corner of the browser. If the parent (infinity) sets the position Property , the current absolute is combined with the TRBL attribute to locate the original point in the upper- left corner of the parent (nearest) ;

2.1.4, fixed positioning-fixed

Defined

Fixed positioning, leaving elements out of the document flow position, combined with TRBL properties (TOP,right, BOTTOM, left ) is positioned according to the browser location .

Characteristics

When a layer defines a fixed, the layer is always positioned according to the browser's window combined with the Trbl property to automatically adjust the position of the layer relative to the browser.

2.1.5, div layer-z-index

Defined

The Z-index property sets the stacking order of elements. Elements that have a higher stacking order are always in front of elements that are lower in stacking order.

Characteristics

1. Z-index can only be valid on elements with position attribute value of relative or absolute or fixed;

2, the same class and position attribute values are relative elements can not compare z-index;

3. The Z-index value only determines the stacking order of sibling child elements in the same parent element, and the Z-index value of the parent element (if any) defines the stacking order for the child elements (CSS stack "spelling daddy");

4, the upward trace can not find the parent element containing the Z-index value of the case, it may be considered as a free z-index element, it can be the parent element sibling positioning elements or other free positioning elements to compare z-index values, determine its stacking order;

5. If the Z-index value of the sibling element is the same, then the stacking order is determined by the element's position in the document, and then appears on top of it;

2.2. Float (float) 2.2.1, definition

The Float property defines the direction in which the element floats. In CSS, any element can float. A floating element generates a block-level box, regardless of its own element.

If there is only a small amount of space above a row for floating elements, then this element jumps to the next line, which continues until a row has enough space .

2.2.2, features

See, when you float box 1 to the right, it moves out of the document stream and shifts to the right until its right edge touches the right edge of the containing box.

Again, when Box 1 floats to the left, it is out of the document stream and moves to the left until its left edge touches the left edge of the containing box. Because it is no longer in the document flow, it does not occupy space, actually covers box 2, so that box 2 disappears from view.

If you move all three boxes to the left, the box 1 floats to the left until it touches the containing box, and the other two boxes float to the left until you hit the previous float box.

As shown, if the inclusion box is too narrow to accommodate three floating elements arranged horizontally, the other floating blocks move down until there is enough space. If the height of the floating elements is different, they may be "stuck" by other floating elements when they move down.

2.2.3, Floating clear-clear

Defined

The Clear property specifies which side of the element does not allow other floating elements.

Property value

Left	Floating elements are not allowed on the left side.
Right	Floating elements are not allowed on the right.
Both	Floating elements are not allowed on the left or right sides.
None	The default value. Allows floating elements to appear on both sides.
Inherit	Specifies that the value of the clear property should be inherited from the parent element.

Characteristics

Suppose you want to float a picture to the left of a block of text, and you want the picture and text to be contained in another element with a background color and border. You might write the following code:

. News {

Background-color:gray;

Border:solid 1px black;

}

. News img {

Float:left;

}

. News P {

Float:right;

}

<div class= "News" >

<p>some text</p>

</div>

In this case, there is a problem. Because the floating element is out of the document flow, the div that surrounds the picture and text does not occupy space.

How can surround elements visually surround floating elements? You need to apply clear somewhere in this element.

In this way, you can only add an empty element and clean it up because there are no existing elements to apply cleanup to. The code is as follows

. News {

Background-color:gray;

Border:solid 1px black;

}

. News img {

Float:left;

}

. News P {

Float:right;

}

.clear {

  clear: both;

  }

<div class= "News" >

<p>some text</p>

<div class="clear"></div>

</div>

This will achieve the effect we want, but we need to add extra code. There are often elements that can be applied to clear, but sometimes you have to add meaningless tokens for layout purposes.

Therefore, for this issue, the following solution is recommended, which is to float the container div.

. News {

Background-color:gray;

Border:solid 1px black;

float: left;

}

. News img {

Float:left;

}

. News P {

Float:right;

}

<div class= "News" >

<p>some text</p>

</div>

2.3, margin, margin (margin & padding) 2.3.1, margin-margin

Defined

boundary, generating additional white space around the element. "White space" is usually the area where other elements cannot appear and the background of the parent element is visible. --CSS Authoritative Guide

Characteristics

1, margin is always transparent.

2. Margin can be set on the top, right, bottom, and left margins by using a separate attribute. namely: Margin-top, Margin-right, Margin-bottom, Margin-left.

3. The value type of the margin-width of the margin is: auto | Length | Percentage, you can also use the shorthand margin property to change all margins at the same time: margin:top right bottom left; (eg:margin:10px 20px 30px 40px) The memory mode is clockwise "up and down" around the element. Memory.

Property value

The numerical notation of margin ellipsis is basically as follows:

1. If margin has only one value, the margin of the upper right and bottom left is the same value.

For example: margin:10px; is equal to margin:10px 10px 10px 10px;

2. If margin has only two values, the first value represents the upper and lower margin value, and the second value is the value of left and right margin.

For example: margin:10px 20px; is equal to margin:10px 20px 10px 20px;

3, if the margin has three values, the first value represents the margin value, the second value represents the value of the left and right margin, and the third value represents the value of the lower margin.

For example: margin:10px 20px 30px; is equal to margin:10px 20px 30px 20px;

4. If margin has four values, then these four values correspond to the four margin values on the lower right and bottom left respectively.

Example: margin:10px 20px 30px 40px;

Vertical margin Merge

Margin merging means that when two vertical margins meet, they form an outer margin. The height of the merged margin is equal to the greater of the two of the height in which the merged margins occur. Margin merging is only possible with the vertical margin of the block box in the normal document flow. Margins between inline boxes, floating boxes, or absolute positioning are not merged.

When an element appears above another element, the bottom margin of the first element merges with the top margin of the second element. Please see:

When an element is contained within another element (assuming that no padding or borders are separated from the margin), their upper and/or lower margins also merge. Please see:

Suppose there is an empty element that has an outer margin, but no border or padding. In this case, the top margin and the bottom margin are met together, and they merge:

If the margin encounters the margin of another element, it also merges:

2.3.2, Inner margin-padding

Defined

The padding shorthand property sets all padding properties in a declaration. This property does not allow negative values .

Characteristics

1, padding is not transparent, its background is based on the elements of the background to decide.

2. Padding you can set the padding on the top, right, bottom, and left by using a separate attribute. namely: Padding-top, Padding-right, Padding-bottom, Padding-left.

3. The value type of the padding-width of the inner margin is: auto | Length | Percentage prohibit use of auto, padding abbreviation with auto performance exception (CSS bug) You can also use the shorthand Padding property to change all the padding at the same time: padding:top right bottom left; (eg:padding:10px 20px 30px 40px) The memory mode is the clockwise "up-and-down" memory around the element.

Property value

Padding omitted numerical notation, basically the following:

1. If padding has only one value, the padding of the upper right and bottom left is the same value.

For example: padding:10px; is equal to padding:10px 10px 10px 10px;

2. If padding has only two values, the first value represents the upper and lower padding value, and the second value is the value of left and right padding.

For example: padding:10px 20px; is equal to padding:10px 20px 10px 20px;

3, if the padding has three values, the first value represents the padding value, the second value represents the value of the left and right padding, and the third value represents the value under padding.

For example: padding:10px 20px 30px; is equal to padding:10px 20px 30px 20px;

4. If the padding has four values, the four values correspond to the four padding values on the lower right and bottom left respectively.

Example: padding:10px 20px 30px 40px;

2.3.3, Box models-box model

There are two types of box models, namely the IE box model and the standard box model, such as

The scope of the standard box model can be seen, including margin, border, padding, content, and the Content section does not contain other parts.

The scope of the IE box model can be seen also includes margin, border, padding, content, and the standard box model is different: the content portion of the IE box model contains border and pading.

Standard box Model Declaration

To the actual development, we should choose "standard box Model". What is the choice of "standard box model"? It's easy to add a DOCTYPE statement at the top of the page. If you do not add DOCTYPE statement, then each browser will be based on their own behavior to understand the Web page, ie browser will use the IE box model to explain your box, and FF will use the standard box model to explain your box, so the Web page in different browsers will show the difference. Conversely, if you add the DOCTYPE statement, then all browsers will use the standard box model to explain your box, the Web page can be displayed in each browser consistent.

2.4. Border (border) 2.4.1, definition

The outer margin of the element is the bounding rectangle of the element (border). The border of an element is one or more lines around the element's content and the inner edge.

The border has 3 properties: width, style, and color.

For example: border:1px solid #333333; (this defines a border style with a width of 1 pixels, a solid line and a gray color)

2.4.2, Style-border-style

The Border-style property of CSS defines 10 different non-inherit styles, including none.

Value	Describe
None	Defines no border.
Hidden	Same as "none". Except when applied to tables, hidden is used to resolve border conflicts for tables.
Dotted	Defines a point border. Renders as solid lines in most browsers.
Dashed	Defines a dashed line. Renders as solid lines in most browsers.
Solid	Defines a solid line.
Double	Define two lines. The width of the double line equals the value of border-width.
Groove	Defines a 3D groove border. The effect depends on the value of the Border-color.
Ridge	Defines a 3D ridge-shaped border. The effect depends on the value of the Border-color.
Inset	Defines a 3D inset border. The effect depends on the value of the Border-color.
Outset	Defines a 3D outset border. The effect depends on the value of the Border-color.
Inherit	Specifies that the border style should be inherited from the parent element.

Border-style supports ellipsis notation, as follows:

Example 1

· The top border is dot-like

· The right border is a solid line

· The bottom border is a double line

· The left border is a dashed line

Example 2

Border-style:dotted solid double;

· The top border is dot-like

· The right and left borders are solid lines

· The bottom border is a double line

Example 3

Border-style:dotted solid;

· The top and bottom boxes are dots.

· The right and left borders are solid lines

Example 4

border-style:dotted;

· All 4 borders are point-like

In addition to the ellipsis, a unilateral definition can be made if necessary, such as:

Border-top-style: ...

Border-right-style: ...

Border-bottom-style: ...

Border-left-style: ...

2.4.3, Width-border-width

The Border-width shorthand property sets the width for all borders of an element, or individually for each edge border. only if the border style is not None only works . If the border style is none, the border width is actually reset to 0. You are not allowed to specify a negative length value.

The Border-width property of CSS defines several styles, as shown in the following table.

Value	Describe
Thin	Defines a thin border.
Medium	Default. Defines a medium border.
Thick	Defines a thick border.
Length	Allows you to customize the width of the border.

In the same vein as Border-style, Border-width also supports ellipsis notation:

Example 1

Border-width:thin medium thick 10px;

· The top border is a thin bounding box

· The right border is a medium frame

· The bottom border is a thick frame

· The left border is a 10px wide frame.

Example 2

Border-width:thin medium thick;

· Top frame is 10px

· The right and left borders are medium borders

· The bottom border is a thick frame

Example 3

Border-width:thin Medium;

· Top and bottom boxes are thin borders

· The right and left borders are medium borders

Example 4

Border-width:thin;

· All 4 borders are thin borders

Similarly, in addition to the ellipsis, you can also set the width of each edge of the border by the following properties:

Border-top-width: ...

Border-right-width: ...

Border-bottom-width: ...

Border-left-width: ...

2.4.4, Color-border-color

The Border-color property sets the color of the four border. This property can be set to 1 to 4 colors.

The Border-color property is a shorthand property that sets the color of the visible part of all the borders of an element, or sets a different color for 4 edges.

The Border-color property of CSS supports several color notation in the following table:

Value	Describe
Color_name	Specifies the color value for the border color of the color name (such as red).
Hex_number	A border color (such as #ff0000) that specifies a hexadecimal value for the color value.
Rgb_number	Specifies the color value for the border color of the RGB code (such as RGB (255,0,0)).
Transparent	The default value. The border color is transparent.

Ellipsis notation

Example 1

Border-color:red Green Blue Pink;

· The top border is red.

· The right border is green.

· The bottom border is blue

· The left border is pink.

Example 2

Border-color:red Green Blue;

· The top border is red.

· The right and left borders are green

· The bottom border is blue

Example 3

Border-color:red Green;

· The top and bottom boxes are red

· The right and left borders are green

Example 4

border-color:red;

· All 4 borders are red

There are also some unilateral border color properties. They have the same principle as the single-sided style and width properties:

Border-top-color: ...

Border-right-color: ...

Border-bottom-color: ...

Border-left-color: ...

Css+div Layout Application