1. background
  • All properties of background are declared in one statement: background color image background link whether tiled whether fixed position initial position.
  • If you want to indent the first line of an inline element, you can use the left inner margin or margin.

  2.text

  • Setting text-indent to negative values enables “hanging indentation” — the first line of a paragraph is not indent and the rest of the line is indent.
  • The SPAN tag is a post-it note that is used to set a style anywhere.
  • Text-transform allows you to change the shape of text, such as case, uppercase, and so on.
  • Use oblique to tilt text when it does not have an ITALic attribute.
  • All properties of text are declared in one statement: font style Font Thickness Font size Font family.

3.border

  • All attributes of the border are in a single declaration: color, shape, thickness.
  • The border-width property will not work if used alone. Use the border-style property to set the border first, in the order of top, right, bottom, and left.
  • For elements placed inside a block tag like div, the document automatically assigns length and width to them, while for inline tags like a, the document looks at the width of the child element and matches the width of the child element.
  • Border-bottom: thickness style color. If you write it this way, the style will be set separately, if you just write bottom-style, the style will be set, and the other properties will inherit from the other styles.

4.margin

  • The top, bottom, left, and right attributes are all in one statement, in the order of top, left, bottom, and right.

5.padding

  • Only one of them is the padding of all the edges.
  • Two are up and down, left and right.
  • The units available are cm and percentage.

6. List instances (ul, LI)

  • Style of origin before unordered list text: disc, Circle, square, None.
  • Style of origin before ordered list text: digit (Decimal), lower- Roman, upper- Roman, lower-alpha, upper-alpha.
  • You can also set the text before the image.
  • Set whether to place outside or inside a segment.
  • Define all attributes in one description: style, position, icon address.

7. Table styles

  • Layout: automatic — Adjusts the box size automatically based on the text content. Fixed: The document library size is fixed. Does not change with the content of the text.
  • Adjust the spacing between each grid – border-spacing
  • Sets whether Spaces are shown — empty-cells.
  • Caption – Side
  • You can style each line directly by selecting it.
  • Border-collapse: Sets cell collapse.

8. Contour styles

  • Outline-style: Sets the style of the outline
  • Outline-color: Sets the color of the outline.
  • Outline-width: Sets the height of the outline.
  • Set Outline to None to remove the default focus events for input, Textarea, and SELECT.

9. The CSS size

  • Height: When the IMG tag is set, the size is set proportionally.

  • You can set values (scaled to the size of the original image) or percentages (scaled to the size of the parent class, and then scaled to the size of the original image).

  • Use max-height and max-width to set the maximum height and width, min-height and min-width to set the minimum height and height, if the minimum value is less than the height of the text, use the minimum value. The px pixel value can also be set as a percentage of the parent element.

  • Line-height: You can set the line height by percentage, pixel value, and numeric value

The CSS classification

  • Allows you to control how elements are displayed, set where images are displayed within another element, position elements relative to their normal position, position elements using absolute values, and visibility of elements.

  • Display Sets the display mode of the element

  1. None: not displayed.
  2. Block: displays as a block element.
  3. Inline: Displays an inline element.
  • The float property floats the element to a location on the page

  1. Left: displays suspended on the left.

  2. Right: Floats on the right side of the display.

  3. With float, the order in which margin controls top, bottom, left, and right is different.

  4. You can add your own styles to floating elements.

  5. Em units are expressed as multiples of the current font size.

  6. Line-hight can be inherited.

  7. The clear property:

  8. After setting float, set the width so that block-level elements are displayed on the same line.

  9. Sometimes floating elements need to be cleared because floating elements may be overwritten, and the cleared floating element will not overwrite the floating element.

  10. Clear indicates the direction of the element in which floating elements are not allowed.

  11. The position layout

  12. Relative: relative position, movement relative to the normal position of an element.

  13. Absolute: Absolute positioning. Elements can be placed anywhere on the page, out of the document flow.

  14. And observe that the index of an element with potision is raised and overlaid on other elements.

  15. Fixed position: fixed position, does not change with the page scrolling. Has been removed from the document flow.

  16. Sticky: sticky positioning. A combination of fixed and relative.

  17. The Clip property clips images. Position is valid only if the position is absolute.

  • Set the element to be visible or invisible — visibility
  1. -Leonard: I’m visible.
  2. Hidden: It was hidden.
  • Change the cursor shape

I’m waiting for you.

I can help you.

I need to move.

  • Overflow content
  1. Set overflow to sroll to display scroll bars. The content may not be out of range, but a scroll bar will appear.
  2. Set overflow to hidden to hide content beyond the boundary and not show it.
  3. Setting overflow to auto allows the browser to handle overflow automatically.
  • Vertically aligned image
  1. Vertical-align, top align with top, bottom align with bottom
  • z-index
  1. The default value is 0. When set to -1, the priority is lower. In this case, you need to set position to Absolte or some other property that moves elements out of the document flow and specify top, left and other position attributes to achieve the effect of overwriting.
  2. If the value is set to 1, the priority is higher.
  3. Top, left, right, and bottom can be set with pixel and percentage values.

12. The CSS pseudo-classes

  • Hover must be located after link and Vistied to take effect.
  • Active must be located after hover to take effect.
  • The general order is Link, visited, Hover and active.
  • You can also change the font, background color, size, and other properties.
  • The Focus attribute of the input can change the style of the input in the Focus state. Note that in some versions of IE
  • First-child is a positional pseudo-class that has access to the first child node.
  • Q tags can tag a paragraph, or quote marks or other symbols (via the lang attribute).

13**. Pseudo-element **

  • First-letter: initial letter style
  • First-line: first line effects.
  • When both exist, the initial effect still exists and is not overwritten by the first line effect.

14. CSS unit

  • Vh: viewport height.

15**. Two classes are selected side by side to represent elements that have both class names **.

  • If the element contains more than one class and the same attribute is assigned in more than one class, the last assignment of the class selector definition is taken as the final assignment according to the cascade principle.

16. When the browser starts rendering an HTML document, it starts at the top of the window and allocates the space needed for elements throughout the document’s content. Unless the size of the document is limited by CSS rules, the browser extends the document vertically to accommodate the entire content. Each new block-level element is rendered as a new row. Inline elements are rendered horizontally in order until the current line hits a boundary, and then rendered vertically on the next line (from: juejin.cn/post/691640…

17. Use the dispaly attribute to format an element, creating a formatting context. For example, the contents property can make a child of an element a grid item.

Height: calc () or position: absolute (this should be aware that there is a relative parent element).

19. Input is often used with label.

20. Use margin: Fixed value auto to center elements by automatically setting margins left and right.

21.CSS can use backgroundPosition to control the position of the background image to achieve the Sprite image, and use a loop to show different positions of the image in different positions.

22. List-style type can be set for both LI and UL in the CSS, but li takes precedence.

23. Use center in backgorund to center images.

24. The box – shadow Settings:

25. Element page center: first, iv use absolute layout, set margin:auto; Set the values of top, left, right, and bottom to the same value. In the horizontal direction, the leftmost part of the div is 50% away from the leftmost part of the screen, which is the same in the vertical direction. Therefore, the transform is used to shift 50% of its width (height) to the left (top) (move the center point to the upper left corner) to achieve the center effect.

26. Not specifying the width and length of an element, specifying the location and not specifying top, left, etc., are bad behaviors.

27. Using float affects subsequent divs and must be cleared with clear.

28. Relative and absolute positioning is to find the corresponding parent element.

29. Radio Set the same name attribute to achieve multiple selection effect.

30. Flex adjusts the width of the parent element to be less than the total box size of the child element, automatically compressing the child element’s width, while float makes the child element display line wrap.

31. Parent element setting Overflow: Hidden Clears height collapse caused by child element float. .

32. Landing:

33. When the padding is a percentage, the percentage is related to the width of the contained element, and must not be negative.

34.CSS weights and priorities:

  • Starting at 0, an inline style +1000, an ID selector +100, an attribute selector, class or pseudo-class +10, an element selector, or pseudo-element +1, and wildcards +0.

  • Priority is, weight the same, written in the back overwrite the front, use! Important reaches the maximum priority, use all! Important, has a high priority.

  • If! Important is used for a shorthand style attribute, and all subattributes represented by the shorthand style attribute will be applied! Important.

  • When you use the compound notation, it loads not only the background color style, but other styles as well.

  • The priority of inline and outgoing styles depends on the order in which they are loaded. But again, the weight is dominant.

  • ! Important > Inline style > inline style and inline style.

  • When non-target elements are selected, the closer to the target takes precedence.

  • With equal weight, the one near the target takes precedence.

35. The Flex layout

  • Elastic box layout, a new property of CSS3, for easy layout, such as vertical center.

  • The Flex attribute is a short term for flex-grow, Flex-shrink, and Flex-basis.

  • Set the properties on the container:

  • Flex-direction: Property determines the direction of the main axis (that is, the alignment of items).

  • Flex-wrap: By default, projects are arranged on a single line (also called “axis”). The flex-wrap property defines how to wrap a line if an axis does not fit.

  • Flex-flow: The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is row nowrap.

  • Context-content: The context-content attribute defines the alignment of items on the main axis.

  • Flex-start (default) : left-aligned

  • Flex-end: right-aligned

  • Center: a center

  • Space-between: both ends are aligned with equal intervals between items.

  • Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.

  • Align-items: Property defines how items are aligned on the cross axis.

  • Flex-start: Alignment of the starting point of the cross axes.

  • Flex-end: alignment of ends of crossed axes.

  • Center: Alignment of the midpoint of the cross axis.

  • Baseline: The baseline alignment of the first line of text of the project.

  • Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.

  • Align-content: The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis.

  • Flex-start: align with the starting point of the cross axis.

  • Flex-end: aligns with the end of the cross axis.

  • Center: aligns with the midpoint of the intersecting axis.

  • Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes.

  • Space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.

  • Stretch (default) : Axis takes up the entire cross axis.

  • Properties above the project:

  • Order: the order property defines the order of items. The smaller the value is, the more advanced it is. The default value is 0. Can be used to rank first.

  • Flex-grow: The flex-grow property defines the size of the project. The default is 0, or no size if there is free space.

  • Flex-shrink: The flex-shrink attribute defines the scale by which the project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks. If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient.

  • Flex-basis: the flex-basis property defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.

  • Flex: the flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0, 1 auto. The last two attributes are optional. This property has two shortcut values: auto (1 1 auto) and None (0 0 auto). It is recommended to use this attribute in preference to writing three separate attributes, as the browser will infer related values.

  • Align-self: The align-self property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

36.CSS3 multimedia query displays automatically according to the Settings. Media queries can be used to detect many things, such as:

  • Width and height of viwePort

  • Height and width of the device

  • Orientation (smartphone landscape vs. portrait)

  • The resolution of the