This is the 24th day of my participation in the August More Text Challenge.
CSS3
New selector
Class selectors, attribute selectors, and pseudo-class selectors all have weights of 10 (E[att]{ } The weight is 1(E)+10=11; E:first-child{} =1 (E)+10=11); The pseudo-element selector has the same weight as the tag selector with 1(E::before weight is 1(E)+1=2)
Property selector
Syntax: Wrap the attribute name in brackets –>[attribute name], E[att] {} indicates that the element E with the ATT attribute is selected
● Use “attribute = value” to select elements. For example, E[att = value]{} indicates that the element E with the ATT attribute and value is value is selected
E[att^=val]{} indicates that the element E has the ATT attribute and the attribute value starts with val. Div [class=icon]{} indicates that the element E has the class attribute and the attribute value starts with icon.
● Use “attribute = value” to select an element, for example, E[att= value “to select an element, for example, E[att= value” to select an element, for example, E[att= value “to select an element, for example, E[att=val]{} indicates that E has the ATT attribute and the attribute value ends in val
● Use “attribute *= value” to select an element. For example, E[att*=val]{} indicates that the element E with the ATT attribute and the value of the attribute contains val
Structure pseudo-class selector
Elements are selected primarily based on the structure of the document, often used to select children within the parent
Low pay attention! E:nth-child(n) has the same usage as E:nth-of-type(n). The difference is that the NTH child is selected first, and then determines whether it is E. If it is not E, the style does not take effect. The latter is to select the specified element E, and then determine the number of E
● E:nth-child(n) sort all the child elements, and select the NTH one. E:nth-of-type(n) sorts the specified element E and selects the NTH of the specified element E
Low key! E:nth-child(n) Selects the NTH child E of the parent element. The n in parentheses can be a specific number (a specific element) or a keyword or formula
● E:nth-child(even){}, nth-child(even){}
● E:nth-child(formula) {}, if the formula is n (the letter must be n), n will be incremented from 0, and all elements will be selected in sequence (0 and numbers exceeding the number of elements will be skipped automatically); When the formula is 2n, select the elements in even positions. If the formula is 5n, select the element whose position is a multiple of 5. If the formula is N +5, select 5, 6, 7…. The element; If the formula is **-n+5**, the first five (n=0,1,2…) are selected.
E:nth-last-child(n)
Pseudo element selector
● Pseudo-element selectors can use CSS to generate an element without actually setting the HTML tag, simplifying the HTML structure. Before and after create an element that is an inline element (an inline box), and the newly created element is not found in the document tree, so it is called a pseudo-element
● Element ::before{} creates the element before the content in the parent element element
● Element ::after{} Creates the element at the end of the content inside the parent element
Low pay attention! In the pseudo-element selector, you must have a content attribute! element::before{ content: ”; }
Pseudo-element usage scenarios –>Remove the floating. When the parent box is not convenient to give height, and the child elements float off the case, the parent box cannot be stretched by the child elements, height is 0, thus affecting the other layout
● 1. Extra label method (partition method)
● Insert a block-level box after the last float element and set the property clear: both;
● 2. Add overflow: hidden to the parent element;
● 3. Add after pseudo-element to parent
● CSS3 box model
● Specify box model with box-sizing property
Low box – sizing: content – box; (Default) the box size is width+padding+border
Low box – sizing: border – box; The final size of the box is width, the given width
● Padding and border will not open the box (provided that the padding+border value does not exceed width)
● CSS3 Transition (focus)
● Transition animation: a gradual transition from one state to another
● Syntax –> Transition: The transition attribute takes time when the motion curve begins (note: the transition attribute is usually used with the hover pseudo-class selector). To change more than one property at a time, place a comma after “When” above, and proceed to the next property to change. You can also write an “all” and then an “hover” attribute
● Attributes that you want to transition include width, height, background color, inner and outer margins. If you want all attributes to transition, write all
● It takes time, in seconds
● The motion curve, which defaults to Ease, can be omitted
Low linear uniform
Low ease – in acceleration
Low ease – out
● Ease-in-out accelerates first and then slows down
● When to start, the unit is seconds s, you can set the delay trigger time, the default is 0s, can be omitted
CSS3 2D transform transform
Mobile translate
● Syntax –>transform: translate(x,y); You can also write transform: traslateX(x) separately; Or the transform: translateY (y); Where x and y can be specific values (px) or percentages (note! The distance in percentage here is the percentage of the width and height of the box itself); In addition translate does not apply to inline elements
When the transform: translate (x, y); Advantage of moving the box: it does not affect the position of other elements
Rotate the rotate
Syntax –>transform: rotate(degree); The unit of degree is DEg, for example, transform:rotate(45deg). When the degree is positive, it is clockwise and when the degree is negative, it is counterclockwise. The rotation center defaults to the center of the element
Set the transform center transform-origin
Transform-origin: x y; (this setting is similar to the setting for background position –>background-position: x y;) You can change the center of rotation, scaling, and so on by setting the positions of the X and y axes
● The default x and y are both 50%, equivalent to center, where the center of rotation is the center of the element
X and y can be orientation noun top, bottom, left, right, center, can also be a specific numerical px
The zoom scale
● Syntax –>transform: scale(x,y); Notice that x and y don’t have units, they’re multiples
● 2D conversion comprehensive writing method
Rotate (x,y) Rotate (180deg) scale(1.2);
● Note: Translate first. The order of writing will affect the result of the translation. The rotation will change the direction of the coordinate axes.