Han Shunping's latest CSS3 video tutorial source code courseware

"Han Shunping's 2016 Latest CSS3 Video Tutorial" is a technical explanation of the new css technology, css3, which is upgraded based on css2 technology to achieve better results. CSS3 is an upgraded version of CSS technology, and CSS3 language development is developing towards modularity. Break it down into smaller modules. These modules include: box model, list module, hyperlink method, language module, background and border, text effects, multi-column layout, etc.

Course playback address: //m.sbmmt.com/course/441.html

The teacher’s teaching style:

The teacher’s lectures are vivid, witty, witty, and touching. A vivid metaphor is like the finishing touch, opening the door to wisdom for students; a well-placed humor brings a knowing smile to students, like drinking a glass of mellow wine, giving people aftertaste and nostalgia; a philosopher's aphorisms, cultural references Proverbs are interspersed from time to time in the narration, giving people thinking and warning.

The more difficult point in this video is to insert inline boxes using CSS3:

The main idea of ​​the layout mode Flexbox layout introduced by CSS3 is to give the container the ability to enable its sub-projects. Change its width, height to best fill the available space. Flex containers use Flex items to automatically expand and contract to fill available free space.
More importantly, Flexbox layout direction is unpredictable, unlike conventional layouts (block-level from top to bottom, inline from left to right), which are suitable for page layout, but are not suitable for supporting large or complex The application lacks flexibility.
If regular layout is based on block and inline text flow directions, then Flex layout is based on "Flex-flow" direction. Let’s first understand some special terminology of the telescopic box model.

Spindle: The main axis of the Flex container is mainly used to configure Flex projects. It is not necessarily horizontal, it mainly depends on the fle-direction attribute.
Spindle starting point, main axis end point: The configuration of the Flex project starts from the main axis starting point of the container and ends at the main axis end point.
Main axis length: The width or height of the Flex project in the main axis direction is the main axis length of the project. The main axis length attribute of the Flex project is the width or height attribute, which one faces the main axis direction is determined.
Side axis: The axis perpendicular to the main axis is called the side axis, which is an extension of the side axis direction.
Cross-axis starting point, cross-axis end point: The configuration of the telescopic row starts from the cross-axis starting point of the container and ends at the cross-axis end point.
Cross-axis length: The width or height of the Flex project in the cross-axis direction is the cross-axis length of the project. The cross-axis length attribute of the Flex project is the widht or height attribute, whichever is facing the main axis direction is determined.

The syntax specification of Flex layout has undergone great changes over the past few years, which has also brought certain limitations to the use of Flexbox. Because there are many versions of the syntax specification and inconsistent browser support, Flexbox layout is not used much. . Flexbox layout syntax specifications are mainly divided into three types.

Here we also recommend downloading the source code resources: //m.sbmmt.com/xiazai/learn/2127

The resources are shared with you. Video courseware and source code

The above is the detailed content of Han Shunping's latest CSS3 video tutorial source code courseware. For more information, please follow other related articles on the PHP Chinese website!