Css3 common knowledge points and FAQ

  1. Composition of CSS in a page

    • First, style sheets
      • The stylesheet contains rules
        • The rule contains a selector + declaration block
          • The declaration block contains the declaration
            • The declaration contains key-value pairs of CSS properties plus CSS property values.

  2. The browser reads and compiles CSS selectors from right to left, because you have the opportunity to select styles at once, or narrow them down if not all at once.

  3. The CSS priority is not the selector priority, but the CSS declared priority.

  4. The first thing you need to remember when learning a CSS property is its default value and whether it can be inherited.

  5. Attribute names do not need quotation marks; attribute values do.

  6. Code analysis #wrap li: nth-Child (1): Find all children under the wrap id and select the first child, which must be

  7. .

  8. Overflow shows ellipsis

    • White - space: nowrap;
    • Overflow: hidden;
    • The text - overflow: ellipsis;(The implicit condition is that the element must not be separated by the content)

  9. Cascading Style Sheets

  10. Resize is the CSS property that allows you to control how large or small an element can be. Overflow :auto default value: overflow:auto

    • noneNon-inheritable, elements cannot be scaled by the user.
    • bothAllows the user to resize elements horizontally and vertically.
    • horizontalAllows the user to resize elements horizontally.
    • verticalAllows the user to resize elements vertically.

  11. When top and left are used as references, the coordinate system is positive as it moves to the right and downward, which is equivalent to saying that positive values move in and negative values move out; When you look at bottom and right as a reference, the coordinate system is going to be left and up positive, which is equivalent to positive expanding out and negative drawing in.

  12. A. Float up half a level. Only in float case, you need to consider the element split into two levels. The positioning element is raised one level (relative positioning will remain in the document stream). A z-index of -1 is always lower than a.

CSS box model

  1. The reflection-webkit-box-reflectNot cSS3 is Google, you can set the direction of the image and the distance from the original image.
  2. Set upbox-sizing: border-box;The element is then setpaddingLater,paddingInstead of increasing the size of the element, it squeezes in the content area.
  3. Box model shadow
    • box-shadow, a comma-separated list describing one or more shadow effects, can be used on almost any element. The default valuenoneNon-inheritable, value:insetThe default shadow is outside the border. useinsetAfter, the shadow is inside the border.Offset - x, offset - yThese are the first twolengthValue to set the shadow offset. Set the horizontal offset and the vertical offset respectively, which can be set to negative values. If both are 0, the shadow comes after the element.
    • blur-radiusThe larger the value, the larger the blur area, the larger and lighter the shadow. Cannot be negative, defaults to 0. The shadow edge is sharp. When the value of spread-radius is positive, the shadow expands; When the value is negative, the shadow shrinks. The default value is 0. Color: Shadow color. If not specified, it is determined by the browser.
  4. If the elements are both setborder-radiusShadows can also have rounded corners, multiple shadows and multiple shadowstext shadowsThe rules are the same. (The first shadow is at the top).
  5. border-radiusUsed to set border rounded corners. Default is 0 and not inheritable.
    • Fixed px values to define the radius of the circle or the semi-major axis of the ellipse, semi-minor axis, can’t use negative values,
    • Use percentages to define the semi-major and semi-minor axes of a circle radius or ellipse. The width of the horizontal half axis relative to the box model; The height of the vertical half axis relative to the box model cannot be negative.
    • This is a shorthand property. When you set one value, the four angles are the same. When you set two values, the first value represents upper left and lower right, and the second value represents upper right and lower left. When you set three values, the first value represents upper left, the second value represents upper right and lower left, and the third value represents lower right.
  6. border-image-sourceProperty definition uses a picture instead of a border style if onlynone, is still usedborder-styleThe style defined. Default value:noneNot inheritable.
  7. border-image-sliceAttributes will be passed through the specificationborder-image-sourceThe image is clearly divided into nine regions, four corners, four sides and a central region. An offset can be specified.
  8. border-image-repeatDefines how the image fills the border. Or for a single value, set all borders; Or set a horizontal and vertical border for two values. Default value:stretchNot inheritable. Value:Stretch, repeat, round
  9. border-image-width: Defines the image border width. Default value: 1 Not inheritable.
  10. border-image-outsetThe: property defines the size of the border image that can exceed the border box. Default value: 0 Not inheritable. Positive value only: can exceed the size of the border box.

The CSS background

  1. background-imageAttribute sets one or more background images for an element. Images are drawn in a z-axis stack, with the first specified image being drawn on top of the later specified image. Note:background-image-colorWill be inimageThe border and content will be drawn belowimageDraw on top of. Default value:none. Not inheritable.
  2. background-position: Specifies the initial position of the background position. Default value: 0% 0% Cannot be inherited. Value: percentage: Reference size is the size of the location area of the background image minus the size of the background image.
  3. background-attachmentDetermines whether the background is fixed in the viewport or scrolls along the block containing it. The default valuescrollNot inheritable. Value:fixedThis keyword indicates that the background is fixed with respect to the viewport. Even if an element has a scrolling mechanism, the background does not scroll with the content of the element.scrollThis keyword indicates that the background is fixed relative to the element itself, rather than scrolling with its content.
  4. By default the background image is frompadding boxStart drawing fromborder boxStart cutting.
  5. background-originSets the starting position of the background rendering. Value:content-box.Padding - box, border - box
  6. background-clipSets the background clipping position. Value:Content-box, padding-box, border-box
  7. - its background - clip: text;You can just set the background for the text.
  8. background-sizeSet the background image size. The default valueauto autoNot inheritable. Value:
    • Percentage: Specifies the percentage of the background image relative to the background area. Background area bybackground-originSet to and model content area and inner margin by default.
    • auto: Scales the background image to the scale of the background image. Note: for single values, this value specifies the width of the image, and the height of the image is implicitlyauto. Two values: the first value specifies the equal width of the picture, and the second value specifies the height of the picture.

CSS basic selector

  1. Selector type
    1. Wildcard selector(*)
    2. The id selector(#)
    3. Class selectors(.).
    4. Element selector(Element name)
    5. Descendant selector(space)
    6. Selector grouping(, (combinator))
    7. Adjacent sibling selectors(+), will only match the immediately following sibling element.
    8. Universal sibling selector(~)When using ~ to join two elements, it matches the second one, provided that it must follow (not necessarily follow) the first one and that they both have a common element.
    9. Child element selectors (direct descendant selectors) differ from descendant selectors in that such selectors can only match direct descendants, not deep descendant elements. (Note if the attribute is inheritable when using it)
    10. Property selectors (presence and value property selectors)
      • [attr]: This selector selects includeattrProperty for all elements, regardless ofattrWhat is the value of
      • [attr=val]: This selector selects onlyattrAll elements whose attribute is assigned to val.
      • [attr~=val]: indicates withattrElement of the named property, and the property is a whitespace separated list of values, of which at least one value isval.
    11. Substring value property selector
      • [attr|=val]: chooseattrThe value of the property isval(including val) or elements beginning with val-.
      • [attr^=val]: chooseattrProperty to the value ofvalElements at the beginning (including val).
      • [attr$=val]: chooseattrProperty to the value ofvalElement at the end (including val).
      • [attr*=val] : chooseattrProperty contains a string in its valuevalThe element.

Some pseudo classes in the CSS

  1. Pseudo classes and pseudo elements do not exist in the DOM tree, they exist to get some state of the element.
  2. Anchor points need to be defined with carelinkandvisitedShould be placedhoverandactiveBecauselinkandvisitedHave the<a>All states of the tag are covered, in order not to invalidate some Settings of the state, solinkandvisitedShould be placedhoverandactiveIn front of.linkandvisitedOnly in the<a>Tags work on the body. They’re called anchor pseudoclasses or link pseudoclasses.
  3. Link pseudo class
    • Pay attention to:link.:visited.:targetIs applied to the link element!
    • :linkRepresents all anchors that act as hyperlinks and point to an unvisited address
    • :visitedRepresents all anchors that act as hyperlinks and point to a visited address
    • :targetRepresents a particular element, itsidisURIThe fragment identifier of
    • use:targetTabs can be implemented by:
      1. will<a>Tag with the href value set to TAB<div>theid.
      2. Set up the<div>Of the labelDisplay: none; In the:targetSet in theDisplay: block,;
  4. Dynamic pseudo class
    • Pay attention to:hover.:activeBasically works on all elements!
    • :hoverMeans to hover over an element
    • :activeMatches elements activated by the user (when pressed and held)
    • Due to the<a>Of the label:linkand:visitedCan cover all of them<a>The status of the tag, so when:link.:visited.:hover.:activeAppear at the same time<a>On the label :linkand:visitedNot last!!
    • Dynamic pseudo and linked pseudo can select the state of a DOM node outside the DOM tree.
  5. Privacy and: Visited Selectors
    • Only the following attributes can be applied to a visited link:
      • color
      • background-color
      • border-color
  6. Form-related pseudo classes
    • :enabledMatch editable forms
    • :disableMatches the disabled form
    • :checkedMatches the selected form
    • :focusMatches the focal form
  7. Structural pseudoclass

    • Index counts from 1 ！！！！

    • Index can be variable n(can only be n)

    • Index can be even odd

    • #wrap ele:nth-child(index) matches the index child of #wrap. This child must be ele

    • #wrap ele:nth-of-type(index) matches the index ele child of #wrap

    • There is one important difference between nth-child and :nth-of-type :nth-of-type is element-centric!! For example, if there are different types of child tags in a parent tag, but the class value of each child tag is the same value, then the nTH-of-type (1) that calls this value gives the first element of each child tag, not the first child tag of the parent tag. So nth-child is best used whenever the child type of the parent element is different.

    • : the NTH – child (index) series

      • :first-child
      • :last-child
      • :nth-last-child(index)
      • :only-child(relative to the:first-child:last-childor:nth-child(1):nth-last-child(1))

    • : NTH – of – type (index) series

      • :first-of-type
      • :last-of-type
      • :nth-last-type(index)
      • :only-of-type(relative to the:first-of-type:last-of-typeor:nth-of-type(1):nth-last-of-type(1))
      • Note:indexIt could be a variablen(can only be n, 0 to infinity)odd: an odd number,even: an even number;
      • :emptyContent must be empty, no Spaces, yesattrIt doesn’t matter)

    • Set a right border for each element, leaving the last element alone. You can use the :not pseudo-class combined with the :last-of-type pseudo-class to operate.

  8. Pseudo elements
    • Pseudo-elements are elements outside the DOM tree. There can only be one pseudo-element of different types generated by CSS style in an element on the page. If multiple pseudo-elements of the same type are set, they will be overwritten.
    • Type:
      • ::afterIs not selected after an element
      • ::beforeBefore an element, unselected
      • ::firstLetterSelect the first one
      • ::firstLineSelect the first row
      • ::selectionChanges the style of the selected element when selected

Customize radio buttons

  • Steps:
    1. Use a few<input>The label,Type = "radio".nameThe same value.
    2. For each<input>The tag contains a<label>Label, to<input>Tag a sibling element<span>Element (Click on the page<span>When the element<input>Tags will also be selected)
    3. to<label>Set the style, first of all<label>Set up floatingFloat: left;Because the<label>The tag is an inline element and cannot specify the height and width. After setting the float, it becomes a block-level element and can specify the height and width.
    4. to<label>Label setting relative positioningPosition: relative;To give<label>Sublabel of the tag<input>Label setting absolute positioningposition:absolute;At this time<input>The contain block of the tag is<label>The label. will<input>Of the labelleftandtopSet to negative value, and<label>Label setOverflow: hidden;(This will make<input>The radio button of the TAB is removed from the visible area.
    5. will<label>Sublabel of the tag<span>Setting absolute PositioningPosition: absolute; Left, top, right, bottomAll set to 0; At this time<span>The labels and<label>Labels are the same size.
    6. use<input>The pseudo class:checkedThen select the sibling element<span>(input:checked +span), set the corresponding style in the style.

Priority declared in the CSS

  • The specificity of the selector
    • The particularity of the selector is determined by the component of the selector itself, and the particularity value is expressed as four parts, such as 0,0,0,0
    • The specific particularity of a selector is determined as follows:
      1. For the ID attribute value given in the selector, add 0,1,0,0
      2. For each class attribute, attribute selection, or pseudo-class given in the selector, add 0,0,1,0
      3. For each element and pseudoelement given in the selector, add 0,0,0,1
      4. The specificity of wildcard selectors is 0,0,0,0
      5. The combinator contributes nothing to the selector particularity
      6. Inline declarations have particularity of 1,0,0,0
      7. Inheritance has no particularity
    • Particularity 1,0,0,0 is greater than all particularity starting with 0 (not carried)
    • The specificity of a selector is ultimately granted to its corresponding declaration
    • If multiple rules match the same element, and some of the declarations conflict, the greater the particularity, the greater the advantage
    • Note: ID and attribute selectors div[id="test"]And,0,1,1 (0) #test(0,1,0,0)
    • Important statement

      • Sometimes a declaration is so important that it outweighs all others that css2.1 calls it important and allows the insertion of a semicolon before the closing of these declarations! Important to mark must be placed accurately! Important Otherwise the declaration is invalid.

      • ! Important is always placed at the end of the declaration, before the semicolon

      • Mark is! The important declaration has no special value, but should be considered separately from non-important declarations.

      • Virtually all important declarations are grouped by the browser, and conflicts of important declarations are resolved internally

      • Non-critical statements are also grouped into groups, and conflicts of non-critical statements are resolved internally

      • If an important statement conflicts with a non-important statement, the important statement always wins

    • inheritance
      • Inheritance has no particularity, not even zero particularity
      • Zero particularity is better than no particularity
    • source
      • CSS styles come from three general sources
        • creators
        • The reader
        • The user agent
    • Weight:
      • Important statement from readers
      • An important statement from the creative staff
      • Normal statement from the creator
      • Reader’s normal statement
      • User agent declaration
    • cascading
      1. Find all relevant rules that contain a selector
      2. Calculates the priority of the declaration
        • Sort by source first
        • It’s sorting by the specificity of the selectors
        • Finally in order

CSS fonts, background knowledge

  1. Custom fonts@font-faceBy allowing web developers to specify online fonts for their pages,@font-faceEliminates the dependency on fonts on the user’s computer.
  2. font-familyThe font name specified will be usedfontorfont-familyProperties,src: Font resources. Note: cannot be defined in a CSS selector@font-faceTo be defined in style.
  3. Customize font icon steps:
    • First, prepare a vector diagram
    • Bind vector graphics to different characters one by one
    • Something that binds a vector image to a character through a tool or website to generate a set of custom fonts
    • Finally put this set of fonts on the page to reference.
  4. When using a font icon, simply name the element you want to use with the defined name, as long as the CSS style sheet is introduced into the page you want to operate on. If you want to change the style of the font icon, it is best to change the style of the font iconclassCreate a new name, and then write the style of the name, rather than directly modify the style of the defined name.
  5. opacityIs not an inherited property, but also affects the transparency of child elements.
  6. Background Transparent Text is opaque. The background can be set torgbaThe format.
  7. Text shadowtext-shadowUsed to add shadows to text, and can add multiple layers of shadow values separated by commas. (When there are multiple shadows, the first shadow is at the top)Color '(Select the color of the shadow).offset-x.Offset -y (horizontal, vertical offset),blur-radius (shadow blur)
  8. Embossed text:
    • The text color is white,
    • Text-shadow: black 1px 1px 1px;
  9. Text blur effect:
    • The text color is black,
    • The transition: 1 s;
    • Add one to the text:hoverPseudo classes,
    • Color: rgba (0,0,0);
    • Text-shadow: black 00 100px;
  10. Blurred background:
    1. The parent div contains a child div that gives the parent its height and width.
    2. Make the child and parent elements the same height and width, the parent element’s position: relative; Position of the child element: absolute; Left, top, bottom, right are all 0; Let the child element’s hierarchy z-index: -1;
    3. Background-size: 100%; background-size: 100%; 4. Filter: blur (xx px);
  11. Text stroke-webkit-text-stroke: color, edge size.
  12. Text typesetting:direction: Control the direction of the text, be sure to cooperateunicode-bidi:bidi-override;

Gradient knowledge

  1. Linear gradient (image type) : To create a linear gradient, set a starting point and a direction (specified as an Angle). Also define the termination color. Stop colors are the ones you want the browser to smooth over, and you must specify at least two colors, although you can specify more colors to create more complex gradients. The default gradient is top to bottom
    • Grammar:Linear-gradient (color, color,...)
    • Change the gradient direction (top\ ButTom \ Left \ Right) :Linear-gradient (to end direction, color, color)
    • Change the gradient Angle:Linear-gradient (Angle, color, color)
    • Distribution of color nodes (the first one is not written as 0%, the last one is not written as 100%) :Linear-gradient (color length or percentage, color length or percentage);
    • Vertical gradient:repeating-linear-gradient
  2. Radial - gradient ()The function creates a<image>To show the color gradient radiating from the origin (gradient center).
    • Default uniform distributionRadial -gradient.
    • Uneven distributionRadial -gradient (Color percentage, color percentage...).
    • Change the shape of the gradientRadial -gradient (shape, color, color)Ellipse by default, circle is optional.
    • Change the size of the gradient shapeClosest -sideRecently,farthest-sideThe farthest edge,closest-comerRecently,farthest-comerThe far corner.

    Change the center of the circleRadial -gradient (size and shape to be changed at PX px, color, color)Default value furthest Angle.

CSS animations

  1. css transitionProvides a change incssProperty to control the animation speed. This allows property changes to occur over a period of time rather than immediately.
  2. transition-propertyThe default value isall, which means that all properties that can be animated show a transition animation. Multiple can be specifiedproperty.
    • Attribute values:
      • noneNo overanimation.
      • allAll properties that can be animated show transition animations.
      • IDENTAttribute name (more than one can be specified)
  3. transition-durationProperty specifies how long the transition animation takes, in seconds or milliseconds. The default value is 0s, indicating that no transition animation is displayed. Multiple times can be specified, and each time period is applied to bytransition-prorertyOn the corresponding property specified. If the specified number of durations is smaller than the number of attributes, the duration list is repeated. If the duration list is longer, the list is trimmed. In both cases, the attribute list remains the same. Property value, in milliseconds or seconds. Do not accept negative values, must add units!
  4. CSS properties are subject totransitionThe influence of CSS will produce constantly changing intermediate valuestransition-timing-functionProperty describes how this intermediate value is computed, and essentially, by this function you build an acceleration curve, so over the whole, righttransitionIn the process of change, the rate of change can constantly change. Default value:ease
    • You can specify more than onetiming function, by usingtransition-propertyProperty, which can be applied to each CSS property based on the list of the main listtiming function
      • iftiming functionIs less than the number in the main column, and the missing values are set to the initial values.
      • iftiming functionMore than pivot columns,timing functionThe list of functions is truncated to the appropriate size, and declared CSS properties are valid in both cases.
    • Attribute values:
      • Ease default, (Speed up then slow down)
      • Linear (constant speed)
      • Ease-in
      • Ease-out
      • Ease-in-out (speed up and slow down)
      • Cubic – Bezier: Bezier curve.
      • Step-start: equivalent to steps (1, start)
      • Step-end: equivalent to steps (1, end).
      • Steps (Number of steps, default is end at which the value of each step changes)
  5. transition-delayProperty specifies the amount of time to wait before the transition effect takes effect. Default value: 0s.
    • Multiple delay times can be specified, and each delay will apply to the specified matching CSS properties
      • If the specified number of durations is less than the number of attributes, the duration list repeats,
      • If the length list is longer, the list is trimmed.
      • In both cases, the property list remains the same.
    • Property value Indicates when the animation transition effect will start, in seconds or milliseconds. A positive value will delay the response to the transition effect, and a negative value will cause the transition to start immediately.
  6. When the list of attribute values is inconsistent in length
    • In the case of excess, it will be completely reduced
    • And when it’s not enough,
      • There will be repeated lists of times,
      • transition-timing-functionIs used with the default value ease.
  7. Checks to see if the transition is complete, and when it is, fires an event that, in standards-compliant browsers, istransitionendIn thewebkitNext iswebkitTransitionEnd. Every attribute that has a transition fires once when it completes the transitiontransitionendIn the event)transitionSetup before completionDisplay: noneThe event will also not be raised.
  8. transitionIt will not trigger until the element has finished its first rendering.
  9. transitionShorthand properties, CSS transitions from shorthand propertiestransitionDefinition is the best way to avoid inconsistent property value lists and save debugging time. Note: intransitionThe order in which values are written is important:
    • The first value that can be resolved to time is assigned totransition-duration.
    • The second value that can be resolved to time is assigned totransition-delay.
  10. transformProperty allows you to modify the coordinate space of the CSS visual format model.transformAttributes only toblockThe level element is in effect.
    • Optional value:
      • Rotate (Angle of rotation)
      • Translate (translation)
        • Translation in x direction:Transform: translateX;
        • Translation in y direction:Transformatey: translateY;
      • Two-dimensional translationalTransform: Distance.If the distance is not specified, it defaults to 0. Single or double values can be set. The positive number represents the forward displacement of xy axis, and the negative number represents the reverse displacement. Let the single value represent the displacement of x axis only, and the y axis coordinates remain unchanged.
  11. The transform: skew, andtranslateAbout the same.
    • If it’s positive, pull the two forward slashes.
    • Negative: Pull two corners in the backslash direction.
  12. Transform: scale ()
    • To reduce values between 0.01 and 0.99,
    • To magnify, set the value beyond 1.
    • Positive: Degree of scaling.
    • Negative value: Not recommended (with rotation effect)
  13. Transformation of base pointstransform-originCSS properties can change the base of an element’s deformation. It has no effect on translation.
  14. Matrix:
    • rotatingMatrix (cosθ, sinθ, -sinθ, cosθ, 0,0);
    • translationMatrix (1,0,0,1, x,y);
    • tiltMatrix (1,tanα,tanβ,1,0,0);
  15. The result will be different if the order of transformation combination is different, because the underlying principle is to transform through matrix, and the operation of matrix is irreversible and does not meet the commutative law. The direction of calculation is from right to left when you switch combinations.
  16. In most cases, the transition will not be triggered if the number of positions of the transform function is not the same.
  17. Transitions relate only to the initial and final state of an element, and there is no way to get the state of the element for each frame in the transition.
  18. Depth of field refers to the range of images that are relatively sharp before and after the camera’s focus.
    • Simple understanding is the distance between our naked eyes and the display, the greater the depth of field, the farther away the elements from us, the effect is not good
    • In the range,perspectiveTo activate a 3D space, the property value is the depth of field. (the defaultnoneNo depth of field)
    • Elements that apply depth of field are called “stage elements” and all descendants of stage elements are affected. If it is added to the descendant elementperspectiveEffects are now stacked instead of overridden.
    • Transform: Perspective (depth) depthThe default value fornone, can be set to a length value that is the distance from the origin along the z-base.
    • 1000px is considered a normal value if usedThe perspective ()Function, then it must be placed intransformProperty, if placed after other functions, is ignored.
  19. Generally speaking, elements written in 3D style should have a wrapped element called “stage”, and the depth of field should be added to the stage.
  20. The rotate3d (x, y, z, Angle)X,y, and z each take a value that is used to calculate the direction of a vector. A vector direction is a line in three-dimensional space from the origin of the coordinate system to the point specified by x,y, and z, around which the elements are rotated, the value specified by Angle.
  21. 3 d translationTransform: translateZ (Length)Is 3 dTransformSpecifically, it cannot make the percentage value; It doesn’t make sense to move like that.The transform: translate3d (translateX, translateY, translateZ);
  22. The 3 d scaleThe transform: scaleZ ().Transform: Scale3D (scaleX,scaleY, scaleZ); If you just setScaleZ ()The elements are not enlarged or compressed,ScaleZ ()The needs andTranslateZ ()Used in conjunction with,numberMultiplied by thelengthThe resulting value causes the element to move along the Z-axis so that the sensation is enlarged or compressed.
  23. Depth of field: Gives the 3D scene the effect of being close, large, and small (the distance to the screen by the naked eye). This property is non-inheritable, but it can be applied to descendant elements (not itself).
  24. The principle of depth of field: The greater the depth of field, the farther the extinction point, the smaller the deformation of elements; The smaller the depth of field, the closer the extinction point and the larger the deformation of the elements.
  25. Depth of field base: Used to control the position of base points.perspective-originThe default value is 50%, which is referenced to the box model.
  26. transform-styleCreate a hierarchical 3D stage. Is an uninheritable property that applies to child elements.
  27. Depth of field overlay, avoid depth of field overlay as much as possible.
  28. backface-visibilityProperty to set whether the back of an element is displayed. The default is displayed. There are two valueshiddenandvisible, the default value isvisible.

Properties within the animation

  1. animation-nameProperty specifies a series of animations to apply, with each name representing an animation sequence. Value:none(Special keyword: no key frame.)keyframenameA string that identifies the animation.
  2. animation-durationSpecifies the length of an animation cycle. The default value is 0s, indicating that there is no animation.
  3. animation-timing-functionThe default effect of the animation, from slow to fast to slow again.
  4. animation-directionDefines the direction of animation execution. (A total of four directions) values:In reverseThe key frame sum is also reversedanimation-timing-function

Properties outside the animation

  1. animation-delayDefines the time, in seconds or milliseconds, to wait before the animation begins.

Only works on properties within the animation

  1. animation-iteration-countWhat defines the number of times an animation is executed (a category within the animation) is the repetition of a keyframe

The state of the element outside the animation

  1. animation-fill-modeAnd the valuebackwardsThe: from state is the same as the form state.forwards, the status is the same as that of to.Both: backwards + recently
  2. animation-timing-function: applies to a keyframe cycle instead of the entire animation cycle
  3. animation-play-stateDefines runs and pauses for animation execution.
  4. Keyframe syntax:@keyframes animiationName{ keyframes-selector{ css-style } } animiationNameMandatory entry that defines the name of the animation.keyframes-selector: Mandatory item, percentage of animation duration.From: 0% to: 100%Css-style: CSS declaration
  5. Keyframes control the period of the animation,animation-timing-functionIt controls each period of the keyframe.
  6. Just because an element has two sides doesn’t mean it has thickness. In a state, an element presents only one side of itself

Elastic box in CSS3

  1. The elastic boxes in CSS3 come in old versions (Box) and new versions (Flex),

  2. Flex is not the same as floating, and there is a difference between older and newer versions of Flex

  3. Distinguish between Flex containers and projects, which are always positioned positive of the main axis

  4. Container layout direction

    • Old version (Box)-webkit-box-orientProperty essentially determines which principal axis is, and values:Horizontal (x axis), vertical (y axis)
    • New version (Flex)flex-directionThe property essentially determines which is the main axis and which is the side axisRow (x axis) column (y axis)

  5. The orientation of the container

    • Old version (Box)-webkit-box-directionControl spindle direction, valueNormal (positive direction, default), reverse (reverse)
    • New version (Flex)flex-directionAnd the valueRow-reverse, column-reverse, column-reverse

  6. Rich Space Management (Main axis)

    • Old version (Box)
      • Start (rich space on the right (X-axis), below (Y-axis)) End (rich space on the left (X-axis), top (Y-axis)) Center (Rich space on both sides) Justify (rich space between projects)The four values
      • -webkit-box-packNo space is assigned to the project area, just the location of the rich space.
    • New version (Flex)
      • justify-content:flex-start(Rich space is on the right side of the main axis),flex-end (rich space is on the opposite side of the main axis), Center (rich space is on both sides of the main axis),space-between (rich space is between projects),space-around(box does not have, rich space is on both sides of the project)

  7. Rich Space Management (Side axis)

    • Old version (Box)
      • start(The rich space is at the top)end(The rich space is below)center-webkit-box-align does not allocate space to the project area, it just locates the rich space
    • New version (Flex)
      • align-itemsAnd the valuestretch(Box does not have, contour layout, cannot have height),flex-start(The rich space is in the positive direction of the side axis),flex-end(Rich space is in the opposite direction of the side axis),center(The rich space is on both sides of the side axis),baseline(Box does not have, align according to baseline),

  8. Management of elastic space: allocate the rich space on the main axis proportionally to the width/height of each project. -webkit-box-flex:1; Default value: 0 Not inheritable.

  9. Controls the orientation of the side axis: The Flex-wrap property controls whether the container is single row/column or multi-row/column and defines the orientation of the side axis along which new rows/columns will be stacked. Values: nowrap(no line wrap), wrap-reverse (line wrap)

  10. When you control multiple rows and columns, the management of rich space treats all rows and columns as one entity. The align-content property defines how to arrange each row/column if there is extra space on the side axis of an elastic container. It has no effect if the elastic container has only one row/column. The default value “stretch” is not inherited.

  11. 14. flex-basis: the base value to which the scaling rule evaluates (default: width or height)

  12. The ORDER attribute specifies the order in which scalable items in an elastic container are laid out, and the elements are laid out in increased order from the value of the ORDER attribute. Elements with the same order attribute value are laid out in the order in which they appear in the source code.

  13. Align-self applies the flex element in its current Flex line and overwrites the align-items value. If the margin value of any Flex element is set to auto, align-self is ignored. The default value is auto, which is not inherited.

  14. Old version -webkit-box-flex: Elastic factor (default: 0)

  15. The new flex-Grow attribute defines the stretch factor for the Flex item.

  16. Available space = (container size – sum of all adjacent projects flex-basis)

  17. Expendable space = (available space/sum of all adjacent projects flex-Grow)

  18. Size per item = (scaling reference value + (scalable space *flex-grow value))

  19. Flex-shrink works if flex-wrap: nowrap; The default value for flex-shrink is 1.

  20. Flex-shrink: The size of each flex shrink = the base stretch value -(shrink ratio/sum of shrink ratio * amount of space spilled) -> Not

    • 1. Calculate the sum multiplied by the contraction factor and the base valueVar a= sum of each flex-shrink*flex-basis item
    • 2. Calculate shrinkage factor, shrinkage factor = (shrinkage factor of the project * project reference value)/the sum calculated in the first stepvar b =(flex-shrink*flex-basis)/a
    • 3. Calculation of out space Out space = project shrinkage factor * negative overflow spaceVar c = b* overflow space

  21. Management of side axis rich space

    • A single line
      • The align - items, align - self(High priority)
    • Multi-line column
      • align-content

  22. The Flex shorthand property is a syntax sugar, flex: 1; Flex-grow: 1; The flex – the shrink: 1; The flex – basis: 0%;

Responsive layout core

  1. CSS3 media query selector, syntax: @media media type and(keyword) conditional media attributes and conditional media attributes {// rules}

  2. The media type

    • allAll media (default)
    • screenColor screen
    • printPrint preview
    • projectionThe handheld device
    • tvTV
    • brailleBraille tactile device
    • embossedBraille printer
    • speech“Auditory” similar media devices
    • tty Devices that do not apply to pixels

  3. The media attribute

    • width: Specifies the size of the browser window
    • device-width: Equipment size
    • device-pixel-ratio(must be prefixed with -webkit-) : pixel ratio

  4. The above three media attributes can be prefixed with min and Max

    • min: Specifies the minimum value
    • max: Who is the maximum value

  5. Switching between horizontal and vertical screens

    • orientation:landscape(landscape)
    • orientation:portrait(portrait)

  6. The keyword

    • only: Handles browser compatibility issues, preventing older browsers from applying queries with media attributes to a given style. (Disable older browsers)
    • @media only screen and (min-width:800px){rule; Rules}
    • @media screen and (min-width:800px){rule; Rules}
    • In older browsers
      • @media only–> Because no only device rule is ignored
      • @media screen–> Because of devices like Screen and older browsers ignore queries with media attributes

  7. It is recommended that only be used every time you write media Query

    • and: Connects a query rule with media properties and media types
      • Rules can be applied only if all connection options match successfully
    • .: Connects multiple query rules, andandsimilar
      • Rules can be applied to all connection options as long as one match is successful
    • not: take the

Multi-column layout (column layout)

  1. Column width:column-widthSpecify the width of each column (this is the first division of a multi-column layout)
  2. Column number:column-countSpecifies how many columns you want (this is the second division of a multi-column layout)
  3. Column Distance:column-gap
  4. Column dividing line:column-rule