CSS Knowledge point carding (II.)

First, the inheritance of

Characteristics:

1, the outer elements of the body of the style will be inherited by the inner layer elements.

2, if the inner elements and the outer elements of the same style, the outer elements of the style will be covered by the inner layer elements.

Q: Is it possible to inherit all the styles?

Answer: Not all styles can be inherited. Only text and font style properties can be inherited. None of the other style properties can be inherited.

Attention:

in actual work, we tend to set the body tag font size and font color. Because the body tag is the outermost element, the inner element inherits the style of the outer element.

Second, priority

Inline style >id selector > class selector > tag Selector

In general, the more accurate the selector points, the higher the priority. usually we will use a to represent the priority of the tag Selector, use 10来 to represent the priority of the class selector, use 100来 to represent the priority of the ID selector, and 1000来 to represent the inline style.

Tag Selector 1

Class Selector 10

ID Selector 100

Inline Style 1000

A larger value indicates a higher priority.

The precedence of either a single selector or multiple selectors before they are combined can be calculated using the formula above. We call this value the weight value. The larger the weight value, the higher the priority.

Third,!important propertiesThe meaning of important in English is "important"It is mainly used to increase the weight of the attribute. The weight value of its properties is infinitely large

Syntax format:

attribute: value!important;

• The correct wording

attribute: value!important;

Attention:

1,!important It is the weight of the promoted property, not the weight of the promotion selector!

2,!important It can not ascend inherit the weight!

Multiple class names can be carried in the 四、一个 tag

Class name: Refers to the attribute value of class

Multiple class names can be carried within a tag, meaning that the attribute value of a class can be multiple and each attribute value is separated by a space.

Example:

< tag name class= "Value 1 Value 2 value 3" ></label name >

Advantages of multiple class names:

1. Reduce the amount of code in CSS
2. Styles of multiple class names are superimposed over the current element

Note: If you say more than one class name within a tag, and they set the same style, there will be a clash of styles!

Five, background style properties

Attention:

Background-color: Used to set the background color of an element but only if the element has content or width or height

Background-image the address used to set the picture of the background picture for the element must be placed in the URL (the address of the image) but only if the element has content, or width and height, the background image is tiled by default.

Background-repeat is used to set whether the background picture is tiled repeat (is tiled), repeat-x (horizontally tiled), repeat-y (vertically tiled), no-repeat (uneven)

Background-position where to set the background picture if you want to set the position of the background picture This property will have two values

Background-position: Horizontal Position Vertical Position These two positions are represented in three English words (top left) fixed value (50px 100px) percentage (50% 20%) These three ways can be mixed using both English words or a fixed value or a percentage

How to express English words

Horizontal position: Left (center), Center (right)

Vertical position: Top (Upper), Center (center), Bottom (under)

How fixed values are represented

How percentages are expressed

Background: Shorthand Property It can set multiple styles at the same time such as background color, background picture, background picture whether tile horizontal position vertical position

Background: Shorthand property has a variable order of values that is separated by a space before each value

Six, floating

Demand:

Enables multiple elements to be in the same row, and sets the width and height of these elements!

To put multiple elements on the same line: attributes of elements within a row

Set the width height for these elements: attributes of block-level elements

There are only two elements in the standard document flow:

elements and inline elements . If you want some elements to have the characteristics of block-level elements also have the characteristics of the elements within the line, you can only leave these elements out of the standard document flow.

Floating allows elements to be separated from the standard document flow, allowing multiple elements to be in the same row and setting the width high!

Floating it is implemented by a floating property

float : This property has two values left (floating left), right (floating right) move

Characteristics of floating elements:

Floating element It's out of standard document flow and it's not taking up space anymore.

We can interpret floating elements as "drift."

The floating element has a higher level of hierarchy than the standard document flow, and it will cover the elements in the standard document flow.

Floating element It floats (moves) to the left or right

Floating element It encounters the border of the parent element and then stops floating

Floating element It also encounters the last floating element and then stops floating

The floating element will no longer wrap the floating element after its parent element floats.

After we float the inline element, it becomes a block-level element in this inline element.

Seven, clear floating

Attention:

As long as there is a float then there must be clear float

Why do you want to clear float?

because the element is floating, it affects the layout of the elements underneath it, and the parent element of the floating element does not wrap the floating element

as long as the float is cleared, the parent element of the floating element that does not affect the layout of the floating element will visually wrap the floating element

There are three ways to clear the float:

Sets a fixed height for the parent element of a floating element but this method is not recommended because the height of an element is generally not manually set it should be propped up by its own content!

Use the clear floating style property clear clear this property is dedicated to clear floating this property has three values clear:left; clear left floating clear:right; Clear right floating clear:both;

This property is typically used underneath the last floating element to create a new blank div underneath the last floating element. Don't put anything in this div. It only does one event to clear the floating

Use the Overflow:hidden property to clear the floating overflow is an attribute

Overflow:hidden It is intended to be used to hide the overflow part but it can also be used to clear floating

Overflow:hidden It is generally used to remove the floating list.

Eight, Box model

What is a box?

Boxes are used to store items

think about it: What parts of a box are made up of!

We can interpret a box as a courier package:

Content + filler + paper box

So how do we understand the boxes in CSS?

Part of a box in CSS: Content + inner padding (padding) + border (border) + margin (margin)

The main attributes in a box: width, height, padding, border, margin

Width: Refers to the meaning of "breadth" but the width of the box is the width of the contents rather than the width of the box.

Height: means "altitude" but the height of the content in the box is the height of the contents rather than the height of the box.

padding: is the meaning of "inner padding", which refers to the distance from the contents of the box to the box border.

Border: Is the border of the box that means "outer box"

Margin: "Margin" means the spacing between boxes

Q: Please answer how to calculate the total width of a box?

The total width of a box = the width of the contents of the Box + the padding on both sides + left and right border lines

The total height of a box = the height of the contents of the Box + the padding on the upper and lower sides + the border lines on both sides

Note: The height of a box is generally not set, because the height of a box should be determined by its content.

Nine, padding

Padding is "padding" means that the contents of the middle of the box are in the distance of the border.

Padding is in 4 directions, so we can describe the padding of these 4 directions separately.

There are two ways to do this: the first is what we call a small attribute, and the second we call the shorthand attribute.

Small attributes:

Padding-top: padding in top

Padding-right: Right Inner padding

Padding-bottom: padding in the bottom

Padding-left: Left inner padding

Shorthand property:

• padding: This property has a direction that can represent four directions at the same time the direction of the property is sequential order is clockwise direction is also: Upper, right, bottom, left this order
• padding:20px indicates that the padding in the four directions on the top right bottom left is 20 pixels
• padding:10px 20px; 10 pixels up or down to 20 pixels
• padding:10px 20px 30px; 10 to 20 for 30
• padding:10px 20px 30px 40px; 10 right 20 down 30 left 40

Ten, margin

Margin it means "margin" means the distance between the box and the box.

Margin it also has 4 directions so we can also describe it in 4 directions.

There are two ways to do this: the first is what we call a small attribute, and the second we call the shorthand attribute.

Small attributes:

Margin-top: Top margin

Margin-right: Right margin

Margin-bottom: Lower margin

Margin-left: Left Margin

Shorthand property:

• Margin: Shorthand property It is a direction where the direction is a clockwise direction is the order of its direction is: top, right, bottom, left
• margin:10px: The margin in the four directions above right and left is 10 pixels.
• margin:10px 20px; the margin in the top and bottom two directions is 10 pixels, and the margin around two directions is 20 pixels.
• margin:10px 20px 30px; indicates that the top margin is 10 pixels, the margin is 20 pixels, and the margin is 30 pixels.
• margin:10px 20px 30px 40p; indicates that the top margin is 10 pixels, the right margin is 20 pixels, the margin is 30 pixels, and the left margin is 40 pixels.

The notice of the margin has a collapse phenomenon

What is margin the collapse phenomenon

1. The margin value in the vertical direction of the standard document stream does not overlap it will take a larger value

2, the horizontal direction is no margin of collapse phenomenon

3, floating element It is no margin of collapse phenomenon

Margin Center

The value of margin can be auto auto means "auto" meaning when the value of the left margin and the right margin are auto then the box will be centered horizontally

Attention:

• Use margin to achieve horizontal centering  Be sure to have a fixed width ( set a width for the box) only block elements can be horizontally centered inline elements are not possible to be centered

• Only boxes in the standard document flow can use margin for horizontal centering

• The margin property is used to center the horizontal of the box rather than the horizontal center of the text
• Text-align This property it is used to implement the alignment of the text if its value is center, the text is centered horizontally but it cannot achieve the horizontal center of the box

12, CSS3 structure Pseudo-class

Selector Selector	Function
E:first-child	Match the first child
E:last-child	Match the Last Child
E:nth-child (N)	Match Nth Child
e:nth-child (2n) or E:nth-child (even)	The number of spouses of children such as: 2, 4, 6 .....
E:nth-child (2n+1) E:nth-child (Odd)	Match odd children such as: 1, 3, 5 .....
E:only-child	Match there and only one child

Pseudo element

Selector Selector	Function
: First-letter	Manipulate the first word in the current element
: First-line	Manipulate the first line of text in the current element
:: Before	Before inserting, in front of the inside of a box
:: After	After inserting, the last face inside a box

Text Shadow

Text-shadow: horizontal Shadow vertical shadow blur distance shadow color

Describe:

Text shadows can have multiple sets of values, separated by commas, to

Horizontal Shadow positive shadow on right side negative on left

Vertical shadow values are below, negative values are above

Fuzzy strength, the larger the value the more blurred

Box Shadow

Box-shadow: Horizontal Shadow Vertical shadow blur distance shadow dimension shadow color inner/outer shadow

Horizontal shadows and Vertical shadows must be written, the rest can be omitted without writing

The shadow of a box can have multiple sets of values, separated by commas to

Horizontal Shadow positive shadow on right side negative on left

Vertical shadow values are below, negative values are above

Blur size, the larger the value the more blurred

CSS Knowledge point carding (II.)