Summary of CSS Knowledge

Give yourself time, don't worry, take it one step at a time, one day at a time,

Please believe that the resilience of life is amazing, with their upward heart to cooperate, do not give up their love.

Show and hide elements

The display shows

After hiding with disply, the original position is no longer retained and is overwritten by the normal document flow thereafter

Display: none Hides the object display: blockCopy the code

The visibility of visibility

Unlike display hiding, with visibility hiding, elements remain in their original positions

Visibility: the visible; &emsp; Object visibility: hidden; &emsp; Hidden objectCopy the code

Overflow spill

This is a magic word, 😄. It is used in many places, and the clearing float mentioned earlier also applies to overflow

Attribute values	describe
visible	Do not cut content or add scroll bars
hidden	Do not display content that exceeds the size of the object
scroll	The scroll bar is always displayed whether the content is exceeded or not
auto	Beyond the automatic display of the scroll bar, not beyond the scroll bar

The integrated use of

Core code Github address

HTML part

It's a very important mental shift to remember

CSS User interface styles

Mouse style CURSOR

Attribute values	describe
default	The small white default
pointer	Little hands
move	mobile
text	The text
not-allowed	ban

Contour line

We usually write the most direct: outline: none, cancel the outline.

 <input  type="text"  style="outline: none;"/>
Copy the code

Prevents text field dragging

Usually use the text field layout, if you do not set any attributes, users protest to modify the size of the text field, will affect the overall layout of the page, then we should pay attention to: in actual development, our text field is the lower right corner can not be dragged ❗

<textarea  style="resize: none;"></textarea>
Copy the code

Vertical-align Indicates the vertical alignment

Vertical-align does not affect content alignment within block-level elements; it applies only to inline elements or inline block elements

Inline block elements, in particular, are often used to control the alignment of images/forms with text.

vertical-align : baseline |top |middle |bottom
Copy the code

Alignment is: baseline, top line, center line, bottom line

Overflow text ellipsis display

Sets or retrieves whether to use an ellipsis flag (…) Marks an overflow of text within an object

The text - overflow: clip; Do not display ellipsis flags (...) Text-overflow: ellipsis; text-overflow: ellipsis; Displays an ellipsis flag when text within an object overflows (...)Copy the code

White-space sets or retrieves how text is displayed within an object. Usually we use it to force a line of content

White - space: normal; Default white-space:nowrap; &emsp; Forces all text to be displayed on the same line until the text ends or encounters a BR tag object.Copy the code

The ellipsis trilogy

  /*1. Force the text */ to be displayed on a line
      white-space: nowrap;
  /*2. Hide the excess part */
      overflow: hidden;
  /*3. Replace the excess */ with ellipses
      text-overflow: ellipsis;
Copy the code

CSS Sprite`It is very important`

Why is Sprites needed

👇 principle drawing of the graph page request, when the user to access a web site, need sends a request to the server, the web page are through a request to each image display to the user, but often used in a web page background as a modification of a lot of small images too much, when a web page server will frequently receive and send the request, will reduce the page loading speed

Features: Effectively reduce the number of server receiving and sending requests, improve page loading speed

Wizard Technology explanation

CSS Sprite is actually the integration of some background images in the web page into a large image, so that when the user visits the page, only need to send a request to the server, the background images in the web page can be all displayed

CSS techniques needed: background-image, background-repeat, background-position attributes for background location.

A core summary of the use of Sprite technology

Accurately measure the size and position of each small background image.
When a box is assigned a small background image, the background positioning is almost always negative.

There are three mechanisms for CSS layout

Normal flow

Block-level elements have an exclusive row and are arranged from top to bottom;

- Common elements: div, HR, P, H1-H6, ul, OL, DL, form, and tableCopy the code

The elements in the line are arranged in order, from left to right, and wrap when the edge of the parent element is touched.

- Common elements: SPAN, A, I, and emCopy the code

floating

The main value of floating is that multiple block-level elements can be displayed in the same row.

Element float is when the element with the float attribute is set

Out of control of standard normal flow
Moves to the specified position.

Selector {float: property value; }

Attribute values	describe
none	Elements do not float (The default value)
left	Elements toOn the leftfloating
right	Elements torightfloating

The core purpose of our float is to have multiple block-level boxes displayed on the same line. This is also one of the most common layouts we use

A complete web page, is the standard flow + float + positioning complete together.

The float only affects the current or subsequent standard flow boxes, not the preceding standard flow boxes, each standard flow in a separate row.

If there are multiple boxes in a box, if one of the boxes floats, the other brothers should float as well to avoid causing other problems.

Here we look at the following 👇 several cases:

The following div constructs do this:

<div>
     <div class="a"></div>
     <div class="b"></div>
</div>
Copy the code

When box A floats and box B floats, boxes A and B are displayed on the same line. When box A doesn’t float and box B floats, box A is the standard document flow, which is very bossy, it occupies a single line, so box B will follow box A’s reference, box B floats.

Remove the floating

Why should we clear the float ❓

In many cases, it is not convenient to give the height of the parent box, but the child box floating does not occupy the position, notice oh, floating box does not occupy the position. Finally, the parent box height is 0, which affects the standard stream box below, which overlays the intended content.

Conclusion:
- Since the floating element no longer occupies the place of the original document flow, it has an impact on subsequent element typography
- Not exactly clearing the float, butClear the impact caused by floating.

Clearing floats is mainly to solve the problem of the parent element having an internal height of 0 due to child floats. Once the float is cleared, the parent automatically detects the height based on the float’s child box. The height of the parent does not affect the standard flow below.

Method to clear the float

As shown in the figure below, if the height of the parent element nav box is not set and all the children are set to float, the child element will float outside the normal document flow. The height of the parent element is: 0, which affects the normal document flow, so we will clear the float at this time.

Use this example as a reference for the four ways to clear floats shown below at 👇

Note that the floating element refers to the last element of the float

The W3C recommends doing this by adding an empty tag at the end of the float element such as < div style= “clear:both” >< /div>.

Can give the parent add: overflow for hidden | auto | scroll can be implemented.

We usually add: overflow: hidden after the parent element style.

Disadvantages: When the content increases, it is easy to cause that the content is not wrapped automatically, so that the content is hidden, and the elements that need to be spilled cannot be displayed.

3. Clear float with after pseudo-element

This approach has more code, but it doesn’t change the structure of the HTML

:after is equivalent to adding a new tag with CSS after the structure.

/* Declare the style of clearing float */. Clearfix :after{content: ""; display: block; height: 0; visibility: hidden; clear: both; } .clearfix{ *zoom:1; /* Ie6, 7 specifically clears float styles */}Copy the code

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}
Copy the code

Location and collapse (Solution to collapse)

As we mentioned earlier, margin merging can also change when setting margin values for children inside a parent element, which is usually called collapse, but absolute positioning and floating do not trigger margin merging 👇 :

What is a collapse

Why does collapse occur? Does only father and son elements collapse? The following will be detailed. It is very important to grasp and understand.

The reason: In standard document flow, the vertical margin will appear superposition (the horizontal direction will not collapse), and the two margins are next to each other without border or padding in the middle. When the two margins contact directly, the merger occurs, that is, the margin merger. It shows that the larger margin will cover the smaller margin, and there is only one larger margin between the two boxes in the vertical direction, which is the phenomenon of margin collapse.

The object of collapse

The box of brotherhood
The box of father-son relationships

The solution to collapse

This is a summary of seven solutions that need to be selected according to the requirements of the project

Positioning,

Syntax: Position = position mode + edge offset

Boundary migration

In CSS, the top, bottom, left, and right attributes define the edge offset of an element

Edge offset property	The sample	describe
`top`	`top: 80px`	At the topAn offset that defines an element relative to its parentThe distance from the top edge.
`bottom`	`bottom: 80px`	At the bottom of theAn offset that defines an element relative to its parentThe distance to the bottom edge.
`left`	`left: 80px`	On the left side of theAn offset that defines an element relative to its parentThe distance to the left.
`right`	`right: 80px`	On the right sideAn offset that defines an element relative to its parentThe distance to the right

A positioned box is only valuable if it has an edge offset. In general, any location must have an edge offset.

Positioning mode

In the CSS, the positioning mode of elements is defined by the attribute of position, which is the classification of positioning, which is very important to master

The selector {position: Attribute value; }Copy the code

There are different classification of positioning modes, and we use different positioning modes in different situations.

value	The semantic
`static`	staticPositioning (default)
`relative`	The relativepositioning
`absolute`	absolutepositioning
`fixed`	fixedpositioning

Relative position`It is very important`

Relative positioning is the movement of an element relative to its original position in the standard flow.

Characteristics of relative positioning:

Relative to his original position in the standard flow.
The positioned box continues to occupy the area in the standard flow, and the boxes behind it continue to treat it in the same way as the standard flow.

Absolute positioning`It is very important`

Absolute positioning is the property of an element that moves with its parent element:

It doesn’t take up any space at all
Position based on the most recently positioned (absolute, fixed, or relative) parent element.
If the parent element is not positioned, it is positioned as a browser standard

As shown in the figure 👇, the parent element has a relative positioning mode, and an absolute positioning is set for the child element. In this case, the child box is positioned at the top left corner of the parent as the standard point.

As shown in the figure below, when the parent element is not positioned, set an absolute position for the child element, and the child box will be positioned according to the document, i.e. browser. Note that the parent element not only refers to the parent element of the child element, the element will be searched upward. If the parent element has a location, the grandfather element will be used to locate.

To summarize: Position an element according to its most recently positioned (absolute, fixed, or relative) parent element.

Fixed position`It is very important`

Fixed positioning is a special form of absolute positioning

Fixed positioning features:

No position at all
View only the browser’s visual window, has nothing to do with the parent element, and does not scroll with the scroll bar

Absolutely position the box centered and aligned

Absolutely positioned boxes cannot be horizontally centered by margin:0 auto.

Here is a simple formula for absolutely positioned boxes horizontal center, we let box left 50%, then we will find that much move ah, how is the length of the box, the general, that we need to minus the half the length of the box, you can set the margin – left negative, negative value is equal to half the width of box.

Absolutely positioned the box vertically and horizontally centered`Hin important`

👆 mainly has a detailed explanation of absolute positioning horizontal center, then through a picture of absolute positioning vertical horizontal center, as well as other locations of the center for detailed explanation:

The entire black border is a big box 800px long and 400px high. The example box is 200px wide and 100px high. The top and bottom boxes are horizontally centered, while the left and right boxes are vertically centered.

After setting the absolute position of the box, set: left: 50%, top: 50%, then you will find that the box is shifted to the right by more than half of the width, and the box is shifted to the lower by more than half of the height, so it also needs to be subtracted, and give the box a margin: – 50 px – 100 px; Specific code examples are as follows 👇 :