CSS + DIV layout application, css div Layout

CSS + DIV layout application, css div Layout
Div + css layout Application 1. html element classification 2.1, Top-level element)

Definition

Html pageTopTag

Features

1. The width and height cannot be set;

2. It must be at the highest level in the document stream;

3. All block-level elements and inline elements cannot be contained;

Common elements

Html

Body

Frameset

2.2 Block-level elements)

Definition

It is a block-level display element, which is often used for layout. By default, each block-level element willLine feedDisplay.

Features

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

2. The height, row height, and outer and inner margins can be controlled;

3. The default width is 100% of its container unless a width is set;

4. It can accommodate inline elements and other block elements;

Common elements

Address-address

Blockquote-block reference

Center-align block in the example (html5 removes this tag)

Div-Easy to use block-level, which is also the main tag of css layout

Dl-definition list

Fieldset-form Control Group

Form-interactive form

H1-title

H2-subtitle

H3-Level 3 title

Level h4-4 title

H5-Level 5 Title

H6-6 level title

Hr-horizontal Separator

Isindex-input prompt

Menu-menu list

Optional content of noframes-frames (content in this block is displayed in browsers that do not support frame)

Noscript-optional script content (this content is displayed in browsers that do not support scripts)

Ol-sort form

P-paragraph

Pre-format text

Table-table

Ul-non-sorted list (unordered list)

Address-address

2.3 Inline element)

Definition

Embedded element and line element. By default, one or more inline elements willOne rowDisplay.

Features

1. inline elements are displayed in the same line;

2. The width setting is invalid. The width depends on the text or image width in the element;

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

4. Set the margin to be valid only for the left and right margin, and for the upper and lower margins;

5. Set the outer margin padding to only valid for the left and right padding and not for the upper and lower sides;

6. Only text or other inline elements can be accommodated;

Common elements

A-anchor

Abbr-abbreviation

Acronym-First word

B-bold (not recommended)

Bdo-bidi override

Big-font size

Br-line feed

Cite-Reference

Code-computer code (required when source code is referenced)

Dfn-define Fields

Em-emphasis

Font-font setting (not recommended) (html5 removes this tag)

I-italic

Img-Image

Input-input box

Kbd-define keyboard text

Label-Table label

Q-short reference

S-hyphen (not recommended)

Samp-definition example computer code

Select-Project Selection

Small-small font text

Span-commonly used inline containers that define text blocks

Strike-dashes

Strong-highlighted in bold

Sub-subscript

Sup-superscript

Textarea-multi-line text input box

Tt-telex text

U-underline

Var-define variables

II. Introduction of css attributes in key layout 2.1, position 2.1.1, default value-static

Default Value, no location, that isNormal location, The element appears in the normal HTML stream. When a div is unpositioned, the top, bottom, left, right, or z-index statements are invalid. (Relative positioning: demo1)

2.1.2. relative positioning-relative

Definition

Generate relative positioning elements,Compared with its normal locationTRBLProperty (TOP, RIGHT, BOTTOM, LEFT).

Features

1. relative maintains the position of the object in the Document Stream, that is, it hasAndStaticSame Rendering MethodIt also occupies a fixed position in the Document Stream, followed by objectsNot encroached or overwritten;

2. Positioning refers to the original point of the parent level as the original point. If there is no parent level, the original point of the BODY is the original point. When the parent level has CSS attributes such as padding, the original vertex of the current level is located by referring to the original vertex of the parent level content area;

2.1.3. absolute positioning-absolute

Definition

Absolute positioning, removing elements from the Document Stream location,IntegrationTRBLProperty (TOP, RIGHT, BOTTOM, LEFT).

Features

1. absolute does not keep the position of the object in the document stream. It does not occupy a fixed position in the Document Stream.It encroaches on or overwrites;

2. If the parent level (unlimited)Not SetPositionAttribute, Then the current absolute is combined with the TRBL attributeBrowser upper left cornerLocate the original vertex. If the parent level (unlimited)SetPositionAttribute, Then the current absolute is combined with the TRBL attributeUpper left corner of parent (recent)Locate the original vertex;

2.1.4 fixed positioning-fixed

Definition

Fixed positioning, removing elements from the Document Stream location,IntegrationTRBLProperty (TOP, RIGHT, BOTTOM, LEFT) According to the browser location.

Features

When a layer defines fixed, this layer is alwaysBased on the browser windowUse the TRBL attribute to locate the element.Automatic AdjustmentThe location of the layer.

2.1.5. div layer-z-index

Definition

The z-index attribute sets the stacking sequence of elements. Elements with a higher stacking order are always in front of elements with a lower stacking order.

Features

1. z-index can only be valid for elements whose position attribute value is relative, absolute, or fixed;

2. The element with the same level and the position attribute value is relative cannot compare z-index;

3. the z-index value only determines the stacking sequence of child elements of the same level in the same parent element. The z-index value of the parent element (if any) defines the stacking sequence for sub-elements (css stack "fight dad ");

4. If the parent element containing the z-index value is not found, it can be regarded as a free z-index element, it can compare the value of z-index with the sibling positioning element of the parent element or other free positioning elements to determine the stack sequence;

5. If the z-index values of the same-level elements are the same, the stacking order is determined by the order of the elements in the document, which will appear later;

2.2 float 2.2.1 Definition

The float attribute 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 elements.

If there is only a small amount of space on top of a row for floating elements, the element will jump to the next row, and the process will continue until a row hasSufficient spaceSo far.

2.2.2. Features

When frame 1 is moved to the right, it is moved out of the Document Stream and to the right until its right edge hits the right edge of the contained box.

Left

Float elements are not allowed on the left.

Right

Float elements are not allowed on the right.

Both

Float elements are not allowed on both sides.

None

Default value. Float elements can appear on both sides.

Inherit

Specifies that the value of the clear attribute should be inherited from the parent element.

Features

Suppose you want an image to float to the left of the text block and want the image and text to be included in another element with the background color and border. You may 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, a problem occurs. Because the floating element is out of the Document Stream, the div surrounding the image and text does not occupy space.

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

. 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>

In this way, we can achieve the desired effect, but we need to add additional code. There are often elements that can apply clear, but sometimes you have to add meaningless labels for layout.

Therefore, the following solution is recommended to solve this problem, that 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, and margin-margin

Definition

Boundary. An extra blank area is generated around the element. "Blank area" usually refers to areas where other elements cannot appear and the parent element background is visible. -- CSS authoritative guide

Value

Description

None

Defines borderless borders.

Hidden

Same as "none. Except for tables, hidden is used to resolve border conflicts.

Dotted

Defines a dotted border. It is displayed as a solid line in most browsers.

Dashed

Define the dotted line. It is displayed as a solid line in most browsers.

Solid

Define a solid line.

Double

Defines a double line. The width of the double line is equal to the value of border-width.

Groove

Defines the 3D groove border. The effect depends on the value of border-color.

Ridge

Defines a 3D ridge border. The effect depends on the value of border-color.

Inset

Defines the 3D inset border. The effect depends on the value of border-color.

Outset

Defines the 3D outset border. The effect depends on the value of border-color.

Inherit

It is required that the border style should be inherited from the parent element.

Border-style can be omitted as follows:

Example 1

border-style: dotted solid double dashed; 

· The upper border is dotted

· The right border is a solid line

· The Bottom Frame is a double line

· The left border is a dotted line.

Example 2

border-style: dotted solid double;

· The upper border is dotted

· The right border and the left border are solid lines

· The Bottom Frame is a double line

Example 3

border-style: dotted solid;

· The upper and lower borders are dotted.

· The right border and the left border are solid lines

Example 4

border-style: dotted;

· All four borders are dotted

In addition to the omitted syntax, you can also define a single side if necessary, such:

Border-top-style :......

Border-right-style :......

Border-bottom-style :......

Border-left-style :......

2.4.3. width-border-width

The abbreviation of border-width attribute is to set the width of all borders of an element, or to set the width of each border separately.Only when the border style is notNoneIt takes effect. If the border style is none, the Border width is actually reset to 0. The negative length value cannot be specified.

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

Value	Description
Thin	Define the border.
Medium	Default value. Define a moderate border.
Thick	Define a thick border.
Length	You can customize the Border width.

Similar to border-style, border-width also supports the omitted Syntax:

Example 1

border-width: thin medium thick 10px;

· The upper border is a fine border.

· The right border is a medium border.

· The bottom border is a thick border.

· The left border is a 10 PX border

Example 2

border-width: thin medium thick;

· The top frame is 10px.

· The right and left borders are middle borders.

· The bottom border is a thick border.

Example 3

border-width: thin medium;

· The upper and lower borders are fine borders.

· The right and left borders are middle borders.

Example 4

border-width: thin;

· All four borders are fine borders

Similarly, in addition to the omitted style, you can also set the width of each side of the border using the following attributes:

Border-top-width :......

Border-right-width :......

Border-bottom-width :......

Border-left-width :......

2.4.4. color-border-color

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

The border-color attribute is a short attribute. You can set the colors of visible parts of all borders of an element, or set different colors for the four sides.

The border-color attribute of CSS supports the following colors:

Value	Description
Color_name	Specifies the border color (such as red) of the color name ).
Hex_number	Specifies the border color of the hexadecimal value (for example, # ff0000 ).
Rgb_number	Specifies the border color of the rgb code (such as rgb (, 0, 0 )).
Transparent	Default value. The border color is transparent.

Omitted writing

Example 1

border-color:red green blue pink;

· The upper 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 upper border is red.

· The right and left borders are green

· The bottom border is blue

Example 3

border-color: red green;

· The upper and lower borders are red.

· The right and left borders are green

Example 4

border-color: red;

· All four borders are red

There are also some color attributes of a single border. They work in the same way as the single-side style and width attributes:

Border-top-color :......

Border-right-color :......

Border-bottom-color :......

Border-left-color :......