HTML

1. Understand HTML from a normative perspective and use tags from a categorical and semantic perspective

State your understanding of the semantics of HTML5

2. Default styles, built-in attributes, differences between different browsers, and ways to deal with browser compatibility problems of common page tags

	Page label default style
Default style sheet for Internet Explorer	Default style sheet for Chrome	The default style sheet for Firefox

It is used to solve the problem that browsers of IE9 or later do not recognize new HTML5 tags, and CSS does not work.

// html5shiv.js <! -- [if lt IE 9] > < script SRC = "https://lib.baomitu.com/html5shiv/3.7/html5shiv.js" > < / script > <! [endif]-->Copy the code

Used to provide min-width and max-width features of Media Query for Internet Explorer 6-8 and other browsers that do not support CSS3 Media Query to achieve responsive web design.

/ / respond. Js https://lib.baomitu.com/respond.js/1.4.2/respond.jsCopy the code

Used to solve the problem that IE 9, 10, 11 and other browsers do not support the tag.

/ / picturefill. Js https://lib.baomitu.com/picturefill/3.0.3/picturefill.jsCopy the code

3. Purpose and configuration method of meta information tags (head, title, meta)

HEAD HEAD

4.HTML5 offline cache principle

Exploration and practice of offline/long cache scheme

The stupid-muddled Manifest has been abolished as the standard for offline caching

Service Worker is the replacement from entry to exit

5. High performance animation can be drawn using Canvas API, SVG, etc

CSS

1. Box model, differences in different browsers

Box-sizing :content-box; IE box-sizing:border-box.

In the CSS world, what HTML element can be parsed into a box? You can use CSS properties (physical properties) to determine the size of the box. The box size is determined by four attributes:

• Content: Text, image, or other media Content in the element
• Padding: The space between the borders of the box’s contents
• Border: Border of the box
• Margin: The distance between the box and other boxes

If we use a graph to describe it, it could look something like this:

The attributes mentioned above are all the browser needs to render the element box. CSSer, for his part, likes to use a box model like the one below to illustrate elements:

And “Computed” in the browser debugger shows how it interprets the box model of an element:

In general, the width of the box is the sum of the content of the element, the inner margin and the border, which is often referred to as the width of the inner box. You can calculate the width of the outer box if you add the width of the outer margin to the width of the inner box.

The height calculation of a box is similar to the width calculation.

But in layout, the width of the box can directly affect the layout, even directly break the layout of the page. For example, a div element:

div { width: 100%; padding: 1rem; } Duplicate codeCopy the code

Causes the div to go out of the container, as shown below:

The box-sizing property of CSS helps control the size of the box:

Use an example to make it easier to understand:

Did you notice that the padding, border, and margin mentioned above all use physical properties to describe a box? When developers discuss box models, they usually use the following figure to illustrate it:

But with the emergence of the logical properties of CSS, in addition to the physical properties we are familiar with, CSS also added a lot of logical properties:

Logical attributes will also change the CSS box model:

If you use logical attributes instead of physical attributes in your layout, this can be very useful for international sites such as Arabic-language sites. When changing writing mode, no additional layout related attributes need to be adjusted:

Hurry up! W3CPlus webmaster Da Mo teacher in-depth analysis of the principle of CSS, teach you how to learn CSS

2. All CSS selectors and their priorities, usage scenarios, which can be inherited, and how to apply AT rules

Common selectors are listed below. For more information on the use of Selectors, see MDN CSS Selectors.

The selector

Base selector

• Label selector:h1
• Class selector:.checked
• ID selector:#picker
• Wildcard selector:*

Property selector

• [attr]: The element with the specified attribute;
• [attr=val]: An element whose attribute is equal to the specified value;
• [attr*=val]: Property contains the element with the specified value;
• [attr^=val]: An element whose attribute begins with the specified value;
• [attr$=val]: An element whose attribute ends with a specified value;
• [attr~=val]: An element whose attribute contains the specified value (full word) (not recommended);
• [attr|=val]: Elements whose attributes start with the specified value (full word) (not recommended);

Combinatorial selector

• Adjacent sibling selectors:A + B
• Normal brother selector:A ~ B
• Child selector:A > B
• Descendant selector:A B

Example:30 CSS selectors you must memorize

priority

The priority is a weight assigned to the specified CSS declaration, determined by the value of each selector type in the matched selector. For memorization, weights can be divided into the following grades, with larger values leading to higher weights:

• 10000:! Important;
• 01000: inline style;
• 00100: ID selector;
• 00010: Class selector, pseudo-class selector, attribute selector;
• 00001: element selector, pseudo-element selector;
• 00000: wildcard selector, descendant selector, sibling selector;

You can see that inline styles (defined by the style attribute in the element) take precedence over any selector; Instead of assigning the property value to! Use it with caution. The following are some precautions for using it:

• Always prioritize using style rule priorities to solve problems rather than! Important;
• Use only on specific pages where you need to override site-wide or external CSS! Important;
• Never use it in your plugin! Important;
• Never use it in site-wide CSS code! Important;

Extension: Understanding Cascading in CSS (Cascading Style Sheets)

Example:

Online query priority:

A Priority Calculator

Usage scenarios

Selector name	Usage scenarios
Wildcard selector*	Applies to all tags, whether you write them or not, whether they appear in the document or not.
Label selector:h1	Resets the default style of a certain type of tag.
Group selector:A,B,C	Optimize code to reduce document size.
Class selector:.checked	For a variety of scenarios, it is one of the most commonly used selectors.
Descendant selector:A B	Styles apply to the last selector, and the previous ones are just filters to help us locate.

Extensions: A deep dive into CSS property selectors

inheritance

One of the most important features of CSS is that child elements inherit the evaluated value of the parent element’s attribute. For example, the HTML text color of the page root element is black by default, and all other elements on the page will inherit this color. When the following style is declared, the H1 text will turn orange.

 body {
     color: orange;
 }
 h1 {
     color: inherit;
 }
Copy the code

Imagine if there were no inheritance in CSS, we would have to set color for different text labels, and the result would be an infinitely larger CSS file size.

There are many CSS attributes, but not all attributes can be inherited from the parent element by default. Which attributes can be inherited by default? Attributes that do not affect the layout of the page can be categorized as follows:

• Font related:font-family,font-style,font-size,font-weightAnd so on;
• Text related:text-align,text-indent,text-decoration,text-shadow,letter-spacing,word-spacing,white-space,line-height,colorAnd so on;
• List related:list-style,list-style-image,list-style-type,list-style-positionAnd so on;
• Other attributes:visibility,cursorAnd so on;

For other attributes that are not inherited by default, inheritance behavior can also be controlled by the following attribute values:

• inherit: inherits the calculated value of the corresponding attribute of the parent element;
• initial: Applies the default value of the property, such as color# 000;
• unset: if the property is inheritable by defaultinheritOtherwise the sameinitial;
• revert: Effect is equivalent tounset, poor compatibility.

After writing CSS for years, you can’t separate Initial from inherit and unset from Revert.

Rules of the AT

The top-level style sheet of CSS consists of a rule list consisting of two types of rules, one is called at-rule, or AT rule, and the other is qualified rule, or common rule.

Ok, now that we know the syntax structure of CSS, we need to do the manual work of finding all possible AT-rules from all CSS standards (you are welcome, I have already found them for you, if the page is not located, you can open the page and search for keywords).

• @ charset: www.w3.org/TR/css-synt…
• @ import: www.w3.org/TR/css-casc…
• @ media: www.w3.org/TR/css3-con…
• @ page: www.w3.org/TR/css-page…
• @ counter – style: www.w3.org/TR/css-coun…
• @ keyframes: www.w3.org/TR/css-anim…
• @ fontface: www.w3.org/TR/css-font…
• @ supports: www.w3.org/TR/css3-con…
• @ namespace: www.w3.org/TR/css-name…

Behind each of these @ rules is a set of CSS knowledge. Some of these will be highlighted throughout the course, but to give you an overview of the @ rule, we will provide some simple examples and descriptions of all the @ rules.

@charset

@charset is used to indicate the character encoding used by the CSS file. If it is used, it must appear first. This rule is only used until the parsing stage is given and does not affect presentation on the page.

 @charset "utf-8";
Copy the code

@import

@import is used to import a CSS file, except that the @charset rule is not imported. @import can import the entire contents of another file.

@import "mystyle.css"; @import url("mystyle.css"); / * * / grammar @ import [< url > | < string >] [supports ([< supports - condition > | < declaration >])]? <media-query-list>? ;Copy the code

From the code, we can see that import also supports supports and media Query forms.

@media

Media is the well-known rule used by Media Query, which makes some judgments about the type of device. Within media’s block is a list of common rules.

 @media print {
     body { font-size: 10pt }
 }
Copy the code

@page

Page is used to set the presentation of a web page when paging media visits it. A page is a special box model structure that allows you to set boxes around it in addition to the page itself.

@page {size: 8.5in 11in; margin: 10%; @top-left { content: "Hamlet"; } @top-right { content: "Page " counter(page); }}Copy the code

@counter-style

Counter-style produces data that defines the behavior of list items.

 @counter-style triangle {
   system: cyclic;
   symbols: ‣;
   suffix: " ";
 }
Copy the code

@ key-frames

Keyframes generate data that defines the animation keyframes.

@keyframes diagonal-slide { from { left: 0; top: 0; } to { left: 100px; top: 100px; }}Copy the code

@ font-face

Font-face is used to define a font, and icon font technology takes advantage of this feature.

@font-face { font-family: Gentium; src: url(http://example.com/fonts/Gentium.woff); }p { font-family: Gentium, serif; }Copy the code

@ support

Support checks the characteristics of the environment, which is similar to Media.

@ namespace

A rule used with XML namespaces to indicate that internal CSS selectors are all given a specific namespace.

@ viewport

Some features used to set the viewport, but compatibility is currently not very good and is mostly replaced by HTML meta.

other

In addition to the above, there are some AT rules that are not currently recommended.

• @color-profile is a CSS feature introduced in SVG1.0, but not implemented very well.
• @document has not been discussed and has been deferred to CSS4.
• @ the font – feature – values.

The regular rules

Let’s move on to qualified Rule, or common rule, and see what we need to remember here.

Qualified rule is mainly composed of selector and declared block. The declaration block in turn consists of attributes and values. In the list below, I describe the components of this syntax.

• The regular rules

  • The selector

  • The statement list

    • attribute

    • value

      • The type of the value
      • function

From:

Relearn front-end CSS syntax: In addition to properties and selectors, you also need to know the @ rules

15,000 words CSS basics (Core knowledge, common requirements)

Hurry up! W3CPlus webmaster Da Mo teacher in-depth analysis of the principle of CSS, teach you how to learn CSS

3. What are CSS pseudo-classes and pseudo-elements? Their differences and practical applications

pseudo-classes

Pseudo-classes classify elements based on characteristics, not their names, attributes, or content. Characteristics cannot be obtained directly from a DOM tree.

(Pseudo-class selectors do not exist in HTML documents, but can be selected using CSS syntax and rendered to them.)

Pseudo elements

Pseudo-elements create abstractions beyond the document tree that the document language can specify. For example, first-chlid accesses the first child element.

(CSS pseudo-elements are used to set special effects to certain selectors)

The difference between

Pseudo classes apply to the entire object

Pseudo-classes do not create elements, such as first-children, which simply style child elements.

Pseudo-elements apply to a part of an element, the first line or letter of a paragraph

Pseudo-elements are equivalent to creating an element, such as before and after both create a new element and then add the corresponding effects.

Example: pseudo classes and pseudo elements

A clear understanding of pseudo-classes and pseudo-elements

Base selector

The selector	The alias	instructions	version	The commonly used
tag	Label selector	Specified typeThe label	1	Square root
#id	The ID selector	identifiedThe label	1	Square root
.class	Class selectors	Object that specifies the class nameThe label	1	Square root
*	Wildcard selector	All typesThe label	2	Square root

Hierarchy selector

The selector	The alias	instructions	version	The commonly used
elemP elemC	Descendant selector	Elements of theDescendant elements	1	Square root
elemP>elemC	Child selector	Elements of theChild elements	2	Square root
elem1+elem2	Adjacent sibling selector	Element adjacentsibling	2	Square root
elem1~elem2	Universal sibling selector	After the elementsibling	3	Square root

Set selector

The selector	The alias	instructions	version	The commonly used
elem1,elem2	Union selector	Multiple specifiedThe element	1	Square root
elem.class	Intersection selector	Object that specifies the class nameThe element	1	Square root

Conditional selector

The selector	instructions	version	The commonly used
:lang	Of the specified markup languageThe element	2	x
:dir()	Specifying the direction of writingThe element	4	x
:has	Containing the specified elementThe element	4	x
:is	Conditionally specifiedThe element	4	x
:not	Not under specified conditionsThe element	4	Square root
:where	Conditionally specifiedThe element	4	x
:scope	The specifiedThe elementAs a reference point	4	x
:any-link	All containhreftheLink element	4	x
:local-link	All containhrefOf absolute addressesLink element	4	x

State selector

The selector	instructions	version	The commonly used
:active	mouse-activatedThe element	1	x
:hover	mouse-suspendedThe element	1	Square root
:link	Without access toLink element	1	x
:visited	Have access to theLink element	1	x
:target	Of the current anchor pointThe element	3	x
:focus	Input focusedThe form elements	2	Square root
:required	Enter mandatoryThe form elements	3	Square root
:valid	Input legalThe form elements	3	Square root
:invalid	Import illegalThe form elements	3	Square root
:in-range	Within the input rangeThe form elements	3	x
:out-of-range	Outside the input rangeThe form elements	3	x
:checked	option-selectedThe form elements	3	Square root
:optional	Options optionalThe form elements	3	x
:enabled	Event-enabledThe form elements	3	x
:disabled	Event disabledThe form elements	3	Square root
:read-only	read-onlyThe form elements	3	x
:read-write	Readable and writableThe form elements	3	x
:target-within	The internal anchor element is activeThe element	4	x
:focus-within	The internal form element is in focusThe element	4	Square root
:focus-visible	Input focusedThe form elements	4	x
:blank	The input is emptyThe form elements	4	x
:user-invalid	Input legalThe form elements	4	x
:indeterminate	The choice is undecidedThe form elements	4	x
:placeholder-shown	Placeholder displayThe form elements	4	Square root
:current()	Browse theThe element	4	x
:past()	Have been browsingThe element	4	x
:future()	Not browseThe element	4	x
:playing	Start playingMedia elements	4	x
:paused	pausedMedia elements	4	x

Structure selector

The selector	instructions	version	The commonly used
:root	The documentThe root element	3	x
:empty	No child elementThe element	3	Square root
:nth-child(n)	Element that specifies the sequential indexThe element	3	Square root
:nth-last-child(n)	Element that specifies the reverse indexThe element	3	x
:first-child	The first of the elementsThe element	2	Square root
:last-child	The tail of the elementThe element	3	Square root
:only-child	The parent element has only that elementThe element	3	Square root
:nth-of-type(n)	Tag that specifies the sequential indexThe label	3	Square root
:nth-last-of-type(n)	Tag that specifies the reverse indexThe label	3	x
:first-of-type	The first of the tagsThe label	3	Square root
:last-of-type	In the tag is the tailThe label	3	Square root
:only-of-type	The parent element has only the tagThe label	3	Square root

Property selector

The selector	instructions	version	The commonly used
[attr]	attribute-specificThe element	2	Square root
[attr=val]	Property equal to the specified valueThe element	2	Square root
[attr*=val]	Property containing the specified valueThe element	3	Square root
[attr^=val]	Property that begins with the specified valueThe element	3	Square root
[attr$=val]	Attribute ending with the specified valueThe element	3	Square root
[attr|=val]	Property that begins with the specified value (full word)The element(Not recommended)	2	x
[attr~=val]	Property containing the specified value (full word)The element(Not recommended)	2	x

Pseudo elements

The selector	instructions	version	The commonly used
::before	Inserted before the elementcontent	2	Square root
::after	Inserted after the elementcontent	2	Square root
::first-letter	Elements of theThe first letter	1	x
::first-line	Elements of theThe first line	1	x
::selection	mouse-selectedThe element	3	x
::backdrop	Full screen modeThe element	4	x
::placeholder	Of a form elementplaceholder	4	Square root

From: The difference between pseudo-classes and pseudo-elements

Super 8 is not necessarily know and practical pure CSS layout and typesetting skills | netease practice for four years

4.HTML document flow layout rules, CSS several positioning rules, positioning reference, the impact of the document flow, how to choose the best positioning way, Sprite diagram implementation principle

In the world of CSS, content is displayed from left to right and top to bottom. Normally a page is divided into rows, and rows can be multiple columns, so it looks top to bottom and left to right. This is a streaming layout in CSS, also known as document flow. Document flows, like water, can adapt to the container in which they are located, and generally have the following properties:

• Block-level elements fill the entire line by default, so multiple block-level boxes are arranged from top to bottom;
• By default, inline elements are arranged column by column in a row. When a row is overloaded, the inline elements are automatically moved to the next row.

From:

15,000 words CSS basics (Core knowledge, common requirements)

Location attributes of the CSS

CSS Sprite image production, use and related, graphic GIF.

5. More than 6 horizontal and vertical schemes can be implemented and their advantages and disadvantages are compared

CSS layout

Centering in CSS: A Complete Guide

6. Implementation principle of BFC, problems that can be solved, how to create BFC

Visual formatting model

First, a disclaimer:

The visual formatting model and the CSS box model are not the same thing!

Let me put it simply. Whereas Web pages (document trees) are made up of boxes (because any element can be considered a box), the visual formatting model is a set of rules that calculate the rules for converting elements into boxes. The layout of the page is a combination of the locations of these boxes. So by understanding the rules for how elements turn into boxes, you understand how Web pages are laid out. The layout of each box is determined by the following factors:

• Box dimensions: precisely specified, specified by constraints, or not specified
• Box types: inline, inline-level, atomic inline-level, and block
• Location solution: common flow, floating, or absolute location
• Other elements in the document tree: child or sibling elements of the current box
• Window size and position
• The size of the included picture
• Some other external factor

If you want to fully understand the visual formalization model of CSS, there are a few other concepts that need to be grasped, such as:

• Block: An abstract concept in which a Block occupies an independent region of a document flow and is stacked vertically on top of one another (by default)
• Containing blocks: Containing other boxes
• Box: An abstract concept created by the CSS engine based on the contents of a document. It is used for the positioning, layout, and formatting of document elements
• Block-level Box: Generated by block-level elements. A block-level element generates at least one block-level box, but it is possible to generate multiple (for example, list item elements)
• Inline-level Box: Generated by Inline level elements. Similarly, an inline element generates at least one inline box. In-line boxes include in-line boxes and atomic in-line boxes. The difference is whether the box participates in the creation of in-line formatting context
• Block Box: A Block Box is called a Block Box if it is also a Block container Box. In addition to named Block boxes, there is another class of Anonymous Block boxes, called Anonymous Block boxes, which cannot be selected by CSS selectors
• Atomic inline-level Box: An in-line Box that does not participate in the creation of the in-line formatting context. Atomic Inline boxes were originally called Atomic Inline boxes, but have since been modified. The contents of intraatomic boxes are not displayed in multiple lines.
• Line Box: This is different from inline boxes. Row boxes are boxes generated by Inline Formatting Context that represent a row. Line boxes are formatted from one side of the containing block to the other. Typically, browsers create an invisible row box for each row
• Block Container Box (Block Container Box or Block Containning Box) : A Block Container Box focuses on the current Box as a Container. It does not participate in the layout and positioning of the current Block, but only describes the relationship between the current Box and its descendants
• Block-level elements: refers to elementsdisplayA value ofblock 、 list-item 、 table 、 flex 和 grid, the element will become a block-level element. Whether an element is a block-level element is only an attribute of the element itself and is not directly used for the creation or layout of the formatting context
• Inline level Element: refers to elementsdisplayA value ofinline 、 inline-block 、 inline-table 、 inline-flex 和 inline-grid, the element will become an inline element. As with block elements, whether an element is an inline element is only an attribute of the element itself and is not directly used for the creation or layout of the formatting context
• Viewport: A Viewport is the Viewport area in the browser. Window size refers to the size of the viewable area of the browser
• Anonymous box: divided into block anonymous box and line anonymous box. In some cases, visual formatting requires the addition of supplementary boxes that cannot be selected by CSS selectors, called Anonymous boxes.

In addition to the boxes mentioned above, CSS defines several content models that can also be applied to elements. These models are generally used to describe layouts, and they may define some additional box types:

• Table content model: It is possible to create a table wrapper box and a table box, along with multiple other boxes such as table title boxes, and so on
• Multi-column content model: It is possible to create multiple column boxes between container boxes and content
• Flexbox content model: It is possible to create an elastic box
• Grid content model: A Grid box might be created

These concepts are enough to annoy us. I don’t think you’ll be able to say CSS is easy anymore with these concepts.

With these concepts in mind, let’s talk about formatting contexts in CSS. I’m sure you’ve heard that word at some point. In CSS, there are many kinds of formatting contexts, in addition to the familiar BFC and IFC, there are FFC created by Flexbox layout and GFC created by Grid layout. These are collectively referred to as CSS formatting contexts, also known as visual formatting models. The CSS visual formatting model is the mechanism used to process documents and display them on visual media.

Simply put, it is used to control the position of the box, that is, to achieve the layout of the page.

Formatting context can also be said to be part of CSS visual rendering. Its main function is to determine the layout of the box model, how its children will be positioned, and how they interact with other elements. So understanding the context of CSS formatting helps us grasp the key to various CSS layouts.

Inline formatting context

Inline Formatting Context, or IFC. It is used to format inline boxes.

The height of the IFC’s row box is calculated from the actual height of the element containing the row. The CSS attributes include font size, line-height, vertical-align, and text-align.

The inline elements are arranged horizontally from the top of the containing block, with margin, border, and padding in effect horizontally. Inline elements can be aligned vertically at the top, bottom, or baseline.

When several inline elements do not fit horizontally in a single row Box, they are assigned to two or more row boxes on the vertical stack; therefore, a paragraph is a vertical stack of many row boxes. These row boxes do not separate vertically (unless otherwise specified), and they do not overlap.

• Vertically, when the height of the elements in the row is lower than that of the row box, thenvertical-alignProperty determines the alignment in the vertical direction.
• In the horizontal direction, when the total width of the elements in the row is smaller than that of the row box, then the horizontal division of the elements in the row is divided bytext-alignDecision.
• Horizontally, when the total width of the row elements exceeds the row box, the row elements are divided into multiple row boxes. If attributes such as non-folding lines are set, the row elements overflow the row box.
• Both the left and right sides of the row box touch the contain block, and the float element is placed halfway between the row box and the contain fast edge.

Each of these rules creates an inline formatting context:

• IFC is generated only if a block-level element contains only inline elements
• The internal boxes will be placed on top of each other in uneven directions
• The vertical start of these boxes starts at the top of the box containing the block
• When these boxes were laid out, they were horizontalpadding 、 border 和 marginThe space taken up is taken into account
• Vertically, the boxes may be aligned in different ways (vertical-align ）
• All boxes on a row can be completely contained in a Line Box, the width of which is determined by the containing block and the existing float
• In an IFC, the left and right sides of a row box are generally close to its containing block, but will change due to the presence of floating elements. Floating elements are placed between the IFC and the row box, shortening the width of the row box
• When the total width of the inline boxes is less than the row boxes containing them, the horizontal rendering rule is determined bytext-alignTo determine the
• When the inline box exceeds the width of the line box, it is divided into multiple boxes, which are distributed among multiple line boxes. If an inline box cannot be split, the row box will overflow

IFC is mainly used for:

• The inline elements are defined astext-alignCenter horizontally
• The inline element extends the height of the parent element throughvertical-alignThe property is centered vertically

Block formatting context

Block Formatting Context (BFC) is part of the visual CSS rendering of a Web page. It is the area where the layout process of Block boxes takes place and where floating elements interact with other elements.

A BFC is essentially a rendered area of the page that is isolated from the rest of the page. The outer elements of the container do not affect the outer elements, and the outer elements do not affect the child elements of the container.

Boxes inside the BFC are arranged from top to bottom, one after the other. The vertical box distance in BFC is subject to the margin attribute, and the upper and lower margins will be superimposed. The left outermost boundary of each element touches the left side of the containing block BFC (for left-to-right formatting, otherwise the opposite). This is true even if there is a float. The BFC region does not fold with the box of floating elements. The height of the BFC is also affected by the floating element, which contributes to the calculation.

The following rules can create a BFC:

• The root element or the element containing the root element
• Float element (element’sfloatnotnone ）
• Absolutely locate the element (element’sposition 为 absolute 或 fixed ）
• Inline block elements (of elementsdisplay 为 inline-block ）
• Table cells (elementdisplay 为 table-cell, HTML table cells default to this value)
• Table title (element’sdisplay 为 table-caption, the HTML table title defaults to this value.)
• Anonymous table cell element (element’sdisplay 为 table 、 table-row 、 table-row-group 、 table-header-group 、 table-footer-group(HTML, respectivelytable 、 row 、 tbody 、 thead 、 tfootDefault property) orinline-table ）
• overflowValues are not forvisibleThe block element
• displayA value offlow-rootThe elements of the
• containA value oflayout 、 content 或 strictThe elements of the
• Elastic element (display 为 flex 或 inline-flexThe immediate child of the element)
• Grid elements (display 为 grid 或 inline-gridThe immediate child of the element)
• Multi-column containers (of elementscolumn-count 或 column-widthDon’t forauto, includingcolumn-count 为 1 ）
• column-span 为 allThe element always creates a new BFC, even if the element is not wrapped in a multi-column container

The block formatting context contains everything inside the element that created it. Its main uses:

• Create a separate rendering environment
• Prevent height collapse caused by floating
• Prevent upper and lower adjacent margins from folding

Flex Formatting Context

Flex Formatting Context is commonly known as FFC. When display is set to flex or inline-flex, a Flexbox container is created. The container creates a new formatting context for its content, the Flex formatting context.

Note, however, that Flexbox containers are not block containers (block-level boxes), and the following properties that apply to block layouts do not apply to Flexbox layouts:

• Multiple columnscolumn-*Property does not apply to Flexbox containers
• float 和 clearProperties do not apply to Flex projects and do not take Flex projects out of the document stream
• vertical-alginProperties are not valid on Flex projects
• ::first-line 和 ::first-letterPseudo-elements do not apply to Flexbox containers, and Flexbox containers do not provide the first formatted line or the first letter for their ancestors

Grid formatting context

Grid formatting Context (GFC) Similar to FFC, a grid container is created when the element’s display value is grid or inline-grid. The completor creates a new formatting context for its content, the Grid formatting context. This is the same as creating a BFC, but with a grid layout instead of a block layout.

Grid containers are not block containers, so some properties assumed to be designed for block layout do not apply in the context of grid formatting. In particular:

• float 和 clearApplication to grid projects will not work. butfloatProperties still affect the mesh completely on the child elementsdisplayBecause this occurs before the grid project is determined
• vertical-alignApplication to grid projects will not work either
• ::first-line 和 ::first-letterPseudo-elements do not apply to grid containers, and the grid container does not provide them with the first formatting line or the first formatting letter

Hurry up! W3CPlus webmaster Da Mo teacher in-depth analysis of the principle of CSS, teach you how to learn CSS

7. CSS functions can be used to reuse code to achieve special effects

CSS functions those things (a) compare functions

Functions and variables in CSS

Interesting CSS math functions

You-need-to-know-css

8. Master at least one PostCSS, Sass, and Less configuration

CSS precompiler for three Musketeers and PostCSS

9.CSS modular scheme, how to configure loading on demand, how to prevent CSS blocking rendering

What is modular CSS?

Discussion on CSS modular scheme (BEM, OOCSS, CSS Modules, CSS-in-JS…)

Does CSS load block?

Key CSS and Webpack: An automated solution to reduce clogging CSS rendering

10. Familiar with CSS for common animations, such as gradients, movements, rotations, zooming, etc

By 2020, fully master CSS animation

In 2020, master CSS animation thoroughly

Transition to CSS Animation by 2020

11.CSS browser compatibility to understand the compatibility of different apis in different browsers

CSS browser Compatibility

Compatibility issues and solutions

90% of the front end will step on the pit, are you in?

Internet Explorer Compatibility problem solution · Summary

12. Master a complete responsive layout scheme

Overview of front-end basics – screen, image, font and layout compatibility for mobile development

Principles and Solutions of Front-end Responsive Layout (Detailed Version)

Principles and practices of front-end responsive layout

Really, mobile sizing adaptation is independent of DPR

Responsive development experience

Extension:

Use CSS development techniques flexibly

49 CSS facts you may not know

CSS You May not Know (Season 2)

I write a common routine for CSS

I write CSS common routines continue

9 CSS Tricks to Improve your happiness

handwritten

1. Handwriting waterfall effect

Pure CSS implements waterfall flow layout

2. Use CSS to draw geometric shapes (circles, triangles, sectors, diamonds, etc.)

N old tricks for implementing triangles using CSS

Clever implementation of a triangle with rounded corners

CSS Shapes

Other polygons

Pure CSS makes all kinds of geometric shapes

3. Use pure CSS to achieve curve movement (Bezier curve)

How to understand and apply Bessel curves

Bezier curve in the front, approach her and fall in love with her

4. Implement the common layout (three bars, Grail, twin wings, top), but name multiple options and understand their strengths and weaknesses

CSS layout

Super 8 is not necessarily know and practical pure CSS layout and typesetting skills | netease practice for four years