1. CSS basics
Cascading Style Sheet CSS (Cascading Style Sheet) Invented by Sir Lee’s friend, Mr Lai.
Why Cascading style sheets
Cascading styles, cascading selectors, cascading files. This nature of CSS makes it very flexible.
The version of CSS
- CSS 2.1 is the most widely used version
- CSS 3 is the most modern version
You can find out which browsers support which features at caniuse.com.
The CSS syntax
- Style syntax
Selector {property name: value; /* comments */}Copy the code
@
grammar
@charset "UTF-8"; /* declare the document character encoding to utF-8 */ @import url(x.css); / * import x.c ss document * / @ media (min - width: 100 px) {} / * media query * /Copy the code
CSS debugging
- W3C CSS Validateor, a W3C validator, provides accurate results.
- Webstorm looks at colors. But the software requires computer configuration.
- Vscode looks at the color, but it only gets a rough idea.
Border debugging method
If you suspect a problem with an attribute of the element, add a border around it. If border appears and is set as expected, a bug in the code appears below the property, possibly a selector or syntax error.
The CSS document flow
In CSS, documents flow by default from left to right (inline elements) and from top to bottom (block-level elements). The height of an inline element is indirectly determined by the line height. Block-level elements are the sum of the heights of their internal document flow elements and can be set.
CSS box model
When laying out a document, the browser represents all elements as a rectangular box, each box consisting of border, margin, padding, and content. Box models can be divided into border-box and content-box. The width of the former includes the padding, content and border of the box, while the width of the latter is only the width of the content. The border-box is generally used because its width is the set value and you do not need to add or subtract the width.
2. CSS layout
1, float layout
Add float: left to the child element; And width attributes, the parent element adds the following attributes to complete the float layout.
.clearfix::after {
content: "";
display: block;
clear: both;
}
Copy the code
Use negative margins to deal with average layout.
Flex layout
flexboxfroggy.com/#zh-cn
3. Grid layout
Two dimensional layout, first draw a grid on the page, then take the grid area as required. cssgridgarden.com/#zh-cn
3. CSS positioning
Vertical to the order on the page (top to bottom) : inline elements, floating elements, block-level elements, border, background.
The position of the value
- Static: the default value
- Relative is used as a displacement or attribute
position: absolute;
Element’s parent element - Absolute, which is positioned relative to the nearest location element in the ancestor element
- Fixed, fixed
All of the above are positional elements except the default static.
Cascading context
From top to bottom: positioned element (z-index=0/1/2), inline child element, floating element, block-level child element, border, background, positioned element (z-index<0).
- Each cascading context is a small world
Consult the MDN documentation to see which attributes create a cascading context.
4. CSS animation
How browsers render
- Building an HTML tree (DOM) from HTML
- Building a CSS Tree from CSS (CSSOM)
- Combine two trees into a render tree
- Layout (document flow, box model calculates size and location)
- Paint (border text, color, shadow, etc.)
- Composite, according to the hierarchical relationship display screen
Two ways to animate CSS
The transition process
You add the transition attribute to an element, and then you add another attribute to an element, and then you transition from the current attribute to the new attribute. The syntax is as follows: Each parameter is the attribute name, duration, conversion mode, and delay time.
/* property name | duration | timing function | delay */
eg: transition: margin-right 4s ease-in-out 1s;
Copy the code
Animation method,
Add keyframes
- The two methods
@keyframes x { from {transform: transitionX(100px); } to {transform: transitionX(10px); } } or @keyframes x { 0% {transform: transitionX(100px); } 100% {transform: transitionX(10px); }}Copy the code
JS Bin (flachang.github. IO)
The syntax for adding an animation property to an element is
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;
Copy the code
JS Bin (flachang.github. IO)