Text line height and vertical center principle

The upper and lower space of the line height squeezes the text into the middle. If the line height is less than the height of the box, the text will skew upward; If the line is taller than the box, the text is lower.

Merges adjacent border borders

When border is used, the overlap deepens. Border-collapse: Collapse can merge adjacent borders.

Padding usage

Padding affects the actual size of the box; If the box itself does not specify wdith/height, the padding will not expand the box.

Margin usage

1. To center a block-level box horizontally, two conditions must be met:

  • The box must have a specified width
  • Margin: 0 auto for both the left and right margins of the box.

2. For inline elements and inline block-level elements, horizontally center the parent element with text-algin: center.

3. Margin merging:

  • Collapse of vertical margins of nested block-level elements

4. Clear the inside and outside margins

Traditional web layout in three ways

The nature of Web layout —– Use CSS to place boxes. Put the boxes in place.

  • Normal flow (standard flow)

Standard flow: labels are arranged in a specified default way.

  1. Block-level elements have an exclusive row, arranged from top to bottom. For example, div, HR, P, H1-H6, UL, OL, DL, form, and table.
  2. The elements in the line are arranged in order, from left to right, and wrap when the parent element’s edge is touched. For example, span, A, I, and EM.
  • floating
  • positioning

floating

Why float?

  1. Summary: There are a lot of layout effects that standard flow can’t do, so you can use floats to complete the layout. Float can change the default arrangement of element tags.
  2. Typical application scenario: Multiple block-level elements can be displayed in a row.
  3. The first rule of web layout: multiple block-level elements are aligned vertically to find standard flow, and multiple block-level elements are aligned horizontally to find floating elements.

What is floating?

  1. The float property is used to create a floating box that is moved to the side until the left or right edge touches the edge that contains the block or another floating element.
  2. Floating features:
  • To move from the control (float) of a standard normal flow to a specified position (move).
  • Floating boxes no longer remain in their original positions.
  • If multiple boxes are set to float, they are displayed in line with the property values and aligned at the top.
  • Note: the floating elements are placed next to each other (no gaps). If the parent width does not fit the floating boxes, the extra boxes will be aligned on another line.
  • Floating elements can have inline block element properties. Any element can float. Floating elements have similar properties to inline block elements, regardless of their original schema.
  1. If the block-level box has no width set, the default width is the same as the parent, but after adding a float, its size depends on the content.
  2. There is no gap between the floating boxes, they are close together.
  3. Same thing for inline elements.
Note the floating layout

Why clear the float?

1. In many cases, it is not convenient to give the height of the parent box, but the child box floats and does not occupy the position. When the height of the parent box is 0, it will affect the standard box below. In other words, the height of the parent element is not set. When the child element is set to float, height collapse will occur. The height of the parent element is 0.

Clear float nature

1. The essence of clearing a float is to remove the impact of floating elements.

2. If the parent box itself has a height, it does not need to clear the float.

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

Remove the floating

The floating clearing policy is: Close the floating.
Clear float method:

1. Extra label method: also known as the partition method, is a W3C recommendation. Adds an empty label to the end of the float element.

  • Advantages: easy to understand, easy to write.
  • Cons: Add lots of meaningless tags, poor structure.
  • Note: newly added empty tags must be block-level elements!!

2. Parent add overflow property.

  • The value is set to hidden, auto, or scroll.
  • Note that it is added to the parent element.
  • Disadvantages: Overflow hiding.

3. The parent adds the after pseudo-element.

  • Advantages: No labels, simple structure.
  • Cons: Takes care of older browsers.

4. Add double pseudo-elements to the parent. Add on parent element!

  • Advantages: Simpler code.
  • Cons: Takes care of older browsers.
  • Representative websites: Xiaomi, Tencent, etc.

5. To summarize

positioning

Why positioning?

Elements are fixed to a location on the page, etc

Composition of location

  1. Positioning mode

2. The edge deviation

3. Static positioning (Understanding)

  1. Relative position (important)

Therefore, there is no de-scaling of relative positioning. Its most typical application is to give absolute locationWhen dadThe!!!!!

  1. Absolute position absolute

6. The position is fixed.

  1. Sticky positioning (Understand)

  1. Locate the stack order Z-index

Position summary

Expansion of positioning

  1. The absolutely positioned box is centered

2. Position particularity

  1. Off-label boxes do not trigger margin collapse

Float elements, absolutely positioned (fixed positioned) elements, do not trigger margin merging problems.

  1. Absolute positioning (fixed positioning) will completely press the box
  • The float element is different, it only presses the standard flow box below it, but it does not press the text inside the standard flow box below it.

  • But absolute positioning (fixed positioning) will overwhelm everything in the standard stream below!

  • The float does not overwhelm the text because the float was originally created for the text surround effect. The text will surround the floating element.

Advanced CSS Techniques

Sprite (Sprite)

  1. Why do you need Sprite?

Objective: To effectively reduce the number of requests received and sent by the server and improve the speed of page loading. 2. The use of Sprite pictures

Use of font ICONS

Download, register, and use the font icon

CSS triangle

Give a box no width and height, only the border, depending on the border size

Draw the left triangle:

Mouse style CURSOR

Application of the vertical-align attribute

Align images, forms, and text

Fixed the default gap at the bottom of the image

Overflow text ellipsis display

  1. Single-line text overflow displays ellipsis

2. Multiple lines of text overflow display ellipsis

Common Layout Tips

  1. The use of margin negative values

2. Text around floating elements3. Clever use of line blocks

  • The parent of the inline block element, with text-align: center to center horizontally.
  • Each inner block element has a gap before it, so you don’t need to set margins.
  • Width and height can be set.
  1. CSS triangle Enhancement
  • Set the right triangle (adjust the size of each border and set the transparent color)

  • Principle and Code

CSS initialization