Hanshunping the latest CSS3 video tutorial source code Courseware

Source: Internet
Author: User
"Hanshunping 2016 latest CSS3 video tutorial" is the new CSS technology, CSS3 technical explanation, on the basis of CSS2 technology upgrade, the effect is better. CSS3 is an upgraded version of CSS technology, and CSS3 language development is evolving towards modularity. Break it down into smaller modules. These modules include: Box model, List module, hyperlink mode, language module, background and border, text effect, multi-column layout, etc.

Course Play Address: http://www.php.cn/course/441.html

The teacher's lecture style:

The teacher lively image, witty witty, witty, touching. A vivid image of the metaphor, like the finishing touch, to the students to open the door of wisdom, a proper sense of humor, attracting students to smile, such as drinking a cup of glycol wine, to the aftertaste and nostalgia, the philosopher's motto, culture of the proverbs from time and again interspersed in the middle, give people to think and alert.

The difficulty in this video is that CSS3 inserted into the inline box:

CSS3 introduced the layout pattern Flexbox layout, the main idea is to let the container have the ability to make its sub-project can change its width, height, in the best way to fill the available space. Flex containers use Flex projects to automatically zoom in and out to fill available free space.
More importantly, the Flexbox layout direction is unpredictable, unlike regular layouts (block-level top-to-bottom, inline left-to-right), and those that are normal for page layouts, but lack flexibility for supporting large or complex applications.
If the general layout is based on the block and inline text flow direction, then the Flex layout is based on the "Flex-flow" direction. Let's take a look at some of the special terms for the telescopic box model.

Spindle: The main axis of the Flex container is used to configure flex projects. He is not necessarily horizontal, which depends largely on the fle-direction attribute.
Spindle start point: The Flex Project's configuration starts at the beginning of the main spindle of the container and ends at the end of the spindle.
Spindle length: The width or height of the Flex project in the spindle direction is the spindle length of the project, and the Flex project's spindle length property is the width or Height property, which determines the direction of the spindle.
Side axis: The axis perpendicular to the spindle is called the side axis and is an extension of the side axis direction.
Start of side axis, end of side axis: The configuration of the telescopic line starts at the beginning edge of the side axis of the container and ends at the end of the side axis.
Side shaft Length: the width or height of the Flex project in the side axis is the side axis length of the project, and the Flex project's side axis length property is the WIDHT or Height property, which is determined by which one is in the direction of the spindle.

The syntax specification for flex layouts has changed a lot over the years, and has brought some limitations to the use of flexbox, because there are numerous versions of the syntax specification, inconsistent browser support, and the Flexbox layout is not used much. The Flexbox layout syntax specification is divided into three main types.

Here also recommend the source of resources to download: http://www.php.cn/xiazai/learn/2127

Resources for everyone to share the video courseware and source code

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.