Basic CSS knowledge (color, pseudo class, Box Model), css

Basic CSS knowledge (color, pseudo class, Box Model), css

6, Set the color unit

L normal English word {color: attribute value red ;}

This method is simple and convenient. However, different colors may be displayed in different browsers.

* Primary colors-red, green, and blue

L octal color

Format: rgb (number,Number,Number), The number range is 0 ~ 255 r Red g green B blue

L hexadecimal color

Format: # Red, green, and blue; range: 00 ~ FF eg: # ff0000 or # f00

7, Pseudo class

Purpose: Add a style for the <a> element

: Link-Set the unaccessed style of The Link element.: Visited-Set the style after the link element is accessed.

: Hover-Set the style of the mouse hover link element.: Active-Set the style of the link element selected with the mouse

* Text-decoration: none; remove the underline that comes with the link element.

<A> Implementation button effect format: <a href = "#"> button </a>

Eg: {

Text-decoration: none; order: 1px solid lightslategrey;

Padding: 5px 10px; background-color: lightgray;

}

Pseudo element

: BeforeAdd the first child element (not a real child element) to the specified element, and set the specified style for the first child element to be added.

: AfterAdd the last child element to the specified Element

8Box Model

Purpose: Implement HTML page layout (all HTML elements can be viewed as boxes)

It includes: content padding (padding) border (border) margin (margin)

I border (border ):

Border-bottom (bottom border) border-left (left border) border-right (right border) border-top (top border)

* Only set the Border width, without the border color and style-no effect

* Set the Border Width and color. No border style is set-no effect

* Set the border color and style-the Border width has a default value

[Set borders. The Border width, color, and style must be set at the same time (not related to order )]

Format: 1: Separate write;

Eg: border-width: Number px; border-color: color; border-style: style;

Type 2: Merge write (abbreviated attribute );

Eg: border: width color style;

Influence of the border of the Box Model on the page layout

 

Actual display width = width+Border-left-width+Border-right-width

Actual height displayed = height+Border-top-width+Border-bottom-width

2. Border width (px)

(1) There are four situations:

Set a value: Set the width of the four borders at the same time;

Set two values: upper and lower borders and left border;

Set three values: upper border, left border, and lower border;

Set four values: upper border, right border, lower border, left border (clockwise );

(2) in four directions

Border-top-width; border-right-width; border-bottom-width; border-left-width;

2. Border Style

None No border; solid line; double solid line; dashed dotted line; dotted box

2. border color border-color

* Padding)

Definition: the distance between the element border and the element content [abbreviated attribute]

* Margin (margin)

Definition: the distance between the border and the edge of the page (does not affect the visible size of the element, but affects the element position) [abbreviated attribute]

 

By default, elements are displayed on the top left of the HTML page. By default, the position of the current element is affected when the left and top margins are modified.

* Location of the affected element: margin-top margin-left

* Location of adjacent elements: margin-right margin-bottom

2. Overlapping outer margins

The bottom margin is set for the last element, and the top margin is set for the next element. (Adjacent sibling relationship)

Result: The adjacent outer margins in the vertical direction overlap, and the outer margins take the [maximum value] of the two ];

The overlap only occurs in the vertical direction, while the horizontal direction is not.

Solution: only set the outer margin of one of them.

2. Negative outer margin

The top margin of the next element last week is a negative value. Result: The next element overwrites the last element.

When the left margin of the element is set to a negative value, the result is moved to the opposite direction: the current element is removed from the page.

2. Margin Transfer

Child element settings (top margin). This operation is passed to the parent element. Solution: Set it to the parent element (top margin)

* The child element is centered in the parent element.

(1) The parent element uses padding. This method adds the padding in the original size and changes the size.

(2) The sub-element uses margin. This method is only left-right center.

Center: child element height + parent element padding-top = parent element height

Left-right center: half of width of the child element margin-left = (parent element-child element)

• Ø Box Model of In-row Elements

The width and height settings of the row element are invalid. The displayed width and height depend on the text content.

When setting properties: The border is valid; the inner margin is valid; the left and right margins are valid; the upper and lower margins are invalid ];

• Ø box model classification

Box-sizing attributes:

* Content-box --- the actual width of the default box model = width + border + padding

* Border-box --- the actual width of the weird box model = width

Note: If the original width and height are set to the default box model, the border and padding are added to the base of the original width and height to increase the width. The weird box model is expanded to the inside, make the original width