CSS knowledge point supplement, css knowledge point

CSS knowledge point supplement, css knowledge point

I. css box model Overview

The inmost part of the element box is the actual content, and the content is directly surrounded by the padding. The padding shows the background of the element. The edge of the padding is the border. The outer border is the outer margin, and the outer margin is transparent by default, so it does not block any subsequent elements.

1. css padding attribute (padding)

Defines the blank area between the element border and the element content

　　

2. css margin attribute (margin)

Margin can be set to auto. There are four parameters after margin. Example: margin: 1px 1px 1px 1px. Indicates the top, right, bottom, and left. If only two parameters are written, for example: margin: 1px 2px, the upper and lower parameters are 1px, and the left and right parameters are 2px. The standard method of center is: margin: 0 auto;

　　

3. border)

Each border has three aspects: width (border-width), style (border-style), and color (border-color ). You can separately define the width, style, or attribute of one side of the border.

Possible values of a style (border-style:

　　

4. Merge outer margins

The outer margin merge means that when two vertical outer margins meet, they form an outer margin. The height of the merged margin is equal to the larger of the two merged margins.

** Only the vertical margin of the block box in the normal document stream can be merged. The margin between the inside box, floating box, or absolute positioning is not merged.

Eg:

Ii. css position)

CSS has three basic Positioning Mechanisms: normal stream, floating, and absolute positioning.

1. Locate attributes

　　

2. position value:

(1) static:

The element box is generated normally. Block-level elements generate a rectangular box. As part of the Document Stream, one or more row boxes are created for the element in the row and placed in the parent element.

(2) relative: relative positioning

The element box offsets a certain distance. The element remains in the shape before its position, and its original space remains. Relative positioning will follow the element Original locationMove the element.

(3) absolute: absolute positioning

The element box is completely deleted from the document stream and located relative to its contained block. The inclusion block may be another element in the document or an initial inclusion block. The space occupied by the element in the normal Document Stream will be closed, as if the element did not exist. After the element is located, a block-level box is generated, regardless of the type of box it generated in the normal stream. With absolute positioning, elements can be placed anywhere on the page

(4) fixed: FixedPositioning

The element box is similar to setting position to absolute, but its contained block is the window itself.

　　

1 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 
　　
3. float)
(1) floating
　　
* If you move all three boxes to the left, box 1 will float to the left until it is hit with the contained box, and the other two boxes will float to the left until it is hit with the previous floating box.
　　
* If the contained box is too narrow to accommodate three floating elements in a horizontal arrangement, the other floating blocks move down until there is enough space. If the height of floating elements is different, they may be "stuck" by other floating elements when moving down ":
　　
(2) row box: the row box next to the floating box is shortened to leave space for the floating box. The row box is centered around the floating box. Therefore, creating a floating box allows the text to be centered around the image:
　　
(3) clear floating (clear)
To prevent rows from being moved around the floating box, you must apply the clear attribute to the box. The value of the clear attribute can be left, right, both, or none, which indicates which sides of the box should not be placed in the floating box.
To achieve this effectTop marginAdd enough space to bring the top edge of the element vertically down to the floating box:
　　
(4) instance:
A. Images with titles floating on the right
1 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 
Effect:
　　
 
B. Place the first letter of a paragraph on the left.
1 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 
* <Span> tags are used to combine the line elements in a document.
Effect:
　　
C. Create a horizontal menu bar
1 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 
Effect: When you move the cursor up or click it, the background color of the link turns red:
　　
* Code analysis:
* Padding: 0.3em 0.6em; <! -- Set the distance between the word and the border -->
* Float: left; <! -- Merge all the borders of the list items into one -->
* Border-right: # FFF solid 1px; <! -- Set the split line for each list item -->
 

Iii. css advanced
1. css size attributes
The CSS size attribute allows you to control the height and width of an element. You can also increase the line spacing. You can use numbers, percentages, and pixel values.
　　
2. css Classification attributes
The CSS classification attribute allows you to control how to display elements, set where the image is displayed in another element, locate the element relative to its normal position, and use the absolute value to locate the element and the element visibility.
　　
3. css pseudo-class attributes
　　
4. css pseudo elements