Float Flex Grid select ideas

  • Personal project, not so much compatibility, grid
  • Company project, moderate consideration for compatibility, Flex
  • Government projects, very compatibility considerations, float

! important

  • If the same element is selected by two different descriptions of the selector, and bothcolor:red! important, then you need to compare the selector weights

There are only two ways to write CSS syntax

  • selector{}
  • @xxx{} @font-face(…) ; @media(…) ; @import(…) ; Note that semicolons are mandatory

How to learn to write CSS layouts

  • The first time to listen to a copy of the first time roughly remember the idea
  • The second time, forget everything, only remember the train of thought, write again
  • The third time, compare the differences, and write a perfect one again to deepen understanding

The backgorund of the body spreads throughout the page

  • Even if the body isn’t full screen wide, the backgorund of the body will spread throughout the page

initial,inherit,unset,

initial inherit

  • Use initial to eliminate any style inheritance entirely
  • Inherit ensures that the element inherits styles from the nearest parent element in its entire parent element chain.
  • Because the current element is likely to be overwritten by CSS written differently
  • Similar to the following, the former applies broadly to tr, while the latter applies to a tr in more detail
body tr{... }tr:nth-child(1) {... }Copy the code

Initial Inherit Example Initial Inherit Ultimate Understanding

  • Not all CSS properties are inheritable
  • The initial keyword is used to set the CSS property to its default value, as defined by the browser default
  • Assume a parent ->wrapper- child structure
  • If inheritable properties are set on the parent, such properties normally apply to warapper and child elements as well
  • But if you set initial on the parent’s (inheritable) property in the Wrapper, both the wrapper and the child elements are unaffected by the parent property

unset

  • Unset indicates that if the property is inheritable, the value is inherit. Otherwise, the value is initial. In fact, setting unset is equivalent to not setting it. It’s no use

The unset example

Pits in the selector

:last-of-type

  • Type refers to element Type. For example, p h2 div is tagName
  • Find the element first by selector
  • Find the nearest parent element based on element
  • Look for the last element in the parent element
  • Look directly at the example, there is no pit above

An examination question:



You can test it with this

flex

Three sentences make the only object in the div vertical and horizontally centered

Center vertically and horizontally

Three sentences center a single element horizontally

Center individual elements horizontally

The average layout

The best way to write an average layout (without wrapper)

The best way to write the average layout

The best way to write the average layout

  • Structure: Parent element > Wrapper > child element
  • Set the flex wrapper
  • The Wrapper sets a Flex newline, otherwise all items are squeezed on one line
  • The spacing between items on a line needs to be calculated
  • The negative margin-right of this layer of the tunde is the spacing between items

Simplified version (used when the number of items on a line is less than or equal to 2)

Simplified version (used when the number of items on a line is less than or equal to 2)

  • Structure: Parent element > child element
  • Can use the space between

Margin merge

We’ve summarized this before

Width :100% precautions

  • In practice, it may not be as good as you’d like

Width100% on an element is 100% of what value of the parent element.

  • The conclusion is as follows
    • When you write wide 100% to the child element, you must take the value from the parent element’s cW
    • If the child box model is CB then the cW of the parent element acts 100% on the cW of the child element
    • If the child box model is BB then the cW of the parent element acts 100% on the cW+pW+bW of the child element

In-depth analysis of online examples

What is the difference between Width Auto and 100% before

What is the difference between Width Auto and 100% before

Line-height is usually written as 1.2 instead of 120% percent

  • The inheritance effects on child elements are different
  • If line-height:1.2 is only written on the parent element and the child element has its own font size:20px
    • The former makes the child’s line-height 1.2*20=24px
    • Instead of dynamically adjusting the child element’s height to the parent element’s (font-size*120%), the child element’s height will be the same as the parent element’s height
  • Line-height is usually written as 1.2 instead of 120% percent

CSS div border draws a triangular trapezoid

CSS div border draws a triangular trapezoid

Gradient padding Draws the circle of the gradient border

Gradient padding Draws the circle of the gradient border

Margin: 0 auto

First-child nth-child thoroughly understood

To understand firstSelector 1 :first-child 与 Selector 1 :nth-child(n)

  • The first and NTH of all descendants of selector 1

Selector 1>:first-child = :nth-child(n)

  • The first NTH descendant of the lineal descendant of selector 1

To understand theSelector 1 Selector 2:first-child 与 Selector 1 selector 2:nth-child(n)

  • The first NTH position in all descendants of selector 1 must also satisfy selector 2

Selector 1> selector 2:first-child = nth-child(n)

  • The first NTH position in the lineal descendant of selector 1 must also satisfy selector 2

To understand theSelector 1: first - the child 与 Selector 1: the NTH child (n) -

  • The parent element is not specified, indicating that the first and NTH element of any structure must satisfy selector 1

.box :nth-of-type(2){

  • Look for the box class
  • Space indicates full structure scan
  • Nth-of-type Indicates that label names need to be classified
  • Look for the second item in each category when you’re done sorting

How to make an icon with a circle outside

  • Outer layer element display: block
  • text-align:center;
  • line-height
  • border-radius

How to make an icon with a circle outside

Left fixed width, right auto, middle take all the rest of the common column layout

flex

How to make such a flex using margin-right:auto

/ / fatherdisplay: flex;
justify-content: space-between;
align-content: center;
Copy the code
/ Son, yesflexLayout items can still be setmarginthemargin-right: auto; // Use this analogyflex-grow:1Much better Max - width:40vw; // The following lines are used to set the length of the text to be too long to display ellipsestext-overflow: ellipsis; 
white-space: nowrap;
overflow: hidden;
Copy the code

grid

Fixed width on the left, auto on the right, all the remaining space in the middle is 1FR

List style optimization

  • list-style-position:insideStick the round points in
  • margin-left: 1em;Move a word to the right(Recommended)

List style optimization

You don’t have to float a list to go from vertical to horizontal, you candisplay:inline-block