One article combing CSS will be knowledge points

What is the difference between the Style tag after and before the body?

• Typically, pages load from the top down. Place the style tag before the body to load the style first.
• After if it is written in the body tag, as the browser to parse HTML documents in line by line way, when the resolution to written in the book is written in the style sheet at the end of the document, will cause the browser to stop before rendering, waiting for the loading and parsing the stylesheet will render again after complete, under Windows IE may appear FOUC phenomenon twinkle (page). ,

What is FOUC(Flash of Unstyled Content)? How to avoid FOUC

• When using @import to import CSS, some pages have a strange phenomenon in IE: the contents of the page without style flash momentarily. This phenomenon is called “document style temporary failure”, or FOUC for short.
• Cause: When the stylesheet is loaded later than the structural HTML, the page will stop rendering when it is loaded into the stylesheet. Wait for the stylesheet to be downloaded and parsed before re-rendering the page, resulting in a brief splintered screen.
• Solution: Just add an or element between.

CSS selectors

CSS selectors parse from top to bottom and from right to left to avoid parsing all elements

• Font size, font family, color, ul, li, DL, dt, dd;
• Non-inheritable styles: border, padding, margin, width, height

CSS selector types

• The id selector
  • Quickly get the label object based on the unique ID number provided
  • Value used to act as the label label for attribute: User name:, indicating that when the label label is clicked, the label with id userID gets focus
• Class selector (Class)
• Tag selector (H1)
• Adjacent selector
  • Direct Adjacent element selector (H1 + P)
  • Normal adjacent element selector (h2 ~ h2)
• Child selector (UL > LI)
• Descendant selector (Li A)
• Wildcard selector (*)
• Attribute selector (a[rel = “XXX”])
• Pseudoclass selector (:hover :first-child ···)
• Pseudo-element selector (:before :after ···)
• Packet selector

CSS selector priority

• Priority from high to low! Important > inline style > ID selector > Class selector > Tag selector > Wildcard selector > Inheritance
• Priority algorithm (weight)
  • The weight of the element selector
    • Element tag (derived selector) : 1
    • Class selector: 10
    • Id selector: 100
    • Maximum inline style: 1000
  • Inherited styles have the lowest priority
  • Compare multiple CSS selector priorities with the same weight, and the position defined is everything. There are six grades in rank from highest to lowest:

1. CSS defined in <style/> in the <head/> tag has the highest priority.2. The @import in the <style/> tag is introduced into the stylesheet definition.3. Style sheet definitions introduced by the <link/> tag.4. Import the stylesheet definition with @import in the stylesheet introduced by the <link/> tag.5. User Settings.6. Browser default.Copy the code

• In the case of the same position, the closest style definition prevails (same priority, select the style that appears last).

CSS pseudo-classes and pseudo-elements

Box model classification

• IE Box Model (Weird box model)
  • width = border + padding + content
  • Width of a box = width + margin
• W3C Box Model (Standard Box Model)
  • width = content
  • Width of a box = width + padding + border + margin

Some relative width of the box

• ClientWidth = width+ left/right padding
• OffsetWidth = width + left/right padding-right + left/right boder
• ScrollWidth: Gets the true width of the content layer of the specified tag (width of the visible area + width of the hidden area)

The boundary to collapse

Margin collapse CSS has a margin collapse. Margin merging occurs only for vertical margins of block boxes in normal document flow. Margins between inline boxes, floating boxes, or absolute positions do not merge.

Side by side DIV boundary collapse (brother)

For two DIV blocks side by side, the margin-bottom of the upper DIV and the margin-top of the lower DIV will collapse, and the maximum value of the upper and lower DIV margins will be taken as the display value, and only a single margin will be set.

Box collapse containing elements (Parent and child)

There is no border, padding, inlinecontent in the parent div, and the margin of the child div will look up until it finds one of the tags including border, padding, inlinecontent, Then press the div to margin.

The solution

• Set “border” for the parent box. Add “border” for the outer box and the parent box is not really matched (can be set to “border: 1px solid transparent”).
• Add Overflow: Hidden for the parent box;
• Set the padding value for the parent box;
• Add position: fixed to the parent box;

Negative role

• Negative Marign centers elements horizontally and vertically
• Negative Marign hides extra borders at the beginning and end of list LI
• Negative text-indent hides text
• A negative Z-index is involved in cascading context sorting
• Left, right, top, bottom

The position location

The display layout

Inline, block, and inline-block

Block level features:

• Each block-level element starts on a new line, and the following element starts on another line. (A block-level element occupies a single row)
• The height, width, line height, and top and bottom margins of the element can be set.
• The width of the element is 100% of its parent unless a width is specified.

Inline features:

• And all the other elements on the same line;
• The height, width, and top and bottom margins of the element cannot be set;
• The width of an element is the unchangeable width of the text or image it contains.

The inline – block features:

• Inline-block block elements have the characteristics of both inline and block elements.
• And all the other elements on the same line;
• The height, width, line height, and top and bottom margins of the element can be set.

What is the problem with using display:inline-block? And how to solve it? (*)

Two inline-block elements put together produce a blank space.

The cause of the void

Element is placed as an inline elements, elements between the whitespace (Spaces, carriage returns, etc.) will be browser processing, according to the blank in the CSS properties of handling (it is normal, merging redundant blank), originally the carriage returns in the HTML code is transformed into a whitespace, under the condition of the font is not 0, whitespace is longer than a certain length, So there is a gap between the elements of the inline-block.

The solution

• Write the end of the child element tag on the same line as the start of the next tag or all the child tags on the same line
• Set the font size to 0 on the parent element and reset the correct font size on the child element
• Set float: left for the child element

Flex layout

This layout provides a more efficient way to lay out, align, and allocate space for items in a container. It has no directional restrictions and can be used freely by the developer (vertical-align, float, and clear attributes for child elements are disabled).

Container properties (6)

• Flex-direction ** Determines the main axis (container alignment direction) **

flex-direction: row | row-reverse | column | column-reverse;

• Flex-wrap ** If an axis does not fit, define a line break rule **

flex-wrap: nowrap | wrap | wrap-reverse;

• Flex-flow ** Short for flex-direction and flex-wrap **

flex-flow: flex-direction||flex-wrap;

• Justify -content** defines the alignment of the container on the main axis **

justify-content: flex-start | flex-end | center | space-between | space-around;

• Align-items ** defines the alignment of the container on the cross axis **

align-items: flex-start | flex-end | center | baseline | stretch;

• Align-content ** defines the alignment of multiple axes. This property does not work if the container has only one axis **

How does full-screen scrolling work? What CSS properties are required?

The principle of

Similar to the rotation diagram, the whole elements are arranged all the time. Assuming that there are 5 full-screen pages to be displayed, the height will be 500%, but we can only display 100%. The rest of the content can be positioned on the Y-axis by transform or realized by margin-top

CSS properties Involved

overflow:hidden | transition:all 1000ms ease

BFC block-level format context

What is BFC?

• The BFC, literally block-level formatting context, is a separate rendering area that only block-level boxes participate in. It specifies how the internal block-level box is laid out and has nothing to do with the outside.
• The W3C defines BFC as follows: floating elements and absolutely positioned elements, block-level containers that are not block-level boxes (for example, inline blocks, form cells, and table titles), and block-level boxes whose overflow values are not “visible”, all create new BFCS for their content (blocking Fromatting contexts, block-level formatted text).
• Note: The BFC can be thought of as a large box with block-level boxes inside

How do I trigger the BFC? (*)

• Root element → root element (HTML) is the largest BFC
• Position is set to fixed or Absolute
• Set display to inline-block, table-block, table-caption
• The value of overflow is not visible
• The value of float is not None

BFC layout rules:

1. The internal boxes will be placed vertically, one on top of the other.
2. The vertical distance of the Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap
3. The left side of the margin box of each element touches the left side of the containing block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float.
4. The region of the BFC does not overlap with the external float box.
5. A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements. And vice versa.
6. When calculating the height of the BFC, floating elements are also involved

Functions and principles of BFC:

• Adaptive two-column layout
• Clear internal float
• Prevent vertical margin overlap (by placing vertical boxes in different BFC, margins do not overlap.)
• The elements inside and outside the BFC never interact with each other, so when there is a float outside the BFC, it should not affect the layout of the Box inside the BFC, and the BFC will narrow without overlapping with the float. Similarly, when there is a float inside the BFC, the BFC calculates the height of the float so as not to affect the layout of the external elements. The same goes for avoiding margin overlap.

IFC inline format context

• The inner boxes are arranged one after the other, starting at the vertex containing the block.
• If a line does not fit, it is “split” and opened to the next line.
• Only horizontal margins remain in the box.
• Padding and Border do not extend the line height.

Z-index cascading context

• Z-index can solve the problem of overwriting between elements by setting its cascading order.
• If the element is unpositioned, the Z-index set to it will be invalid.

When elements are stacked, covering relation criterion (*)

Parent and sibling elements

• When there is a clear indication of cascading levels, such as the recognized Z-index value
  • The larger the z-index is, the closer it is to the visual point.
  • With the same Z-index, being at the back of the DOM stream overwrites the front.
• If z-index is not set, the default value is used. If z-index is not set, the location overwrites the unlocated element.
• When both positions are not located and overlap occurs, being at the back of the DOM stream overwrites the front.

Parent-child element

• Different parent elements, as long as the parent element is larger, then the whole is closer to the visual point, regardless of the size of the child elements.
• If the z-index of the parent element is valid, the child element will be above the parent element regardless of whether the z-index is set.
• If the z-index of the parent element is invalid (unpositioned or the default value is used), the z-index setting of the positioned child element takes effect.

Creation of a cascading context

Root cascade context

Refers to the page root element, which is the default initiator element for the scroll bar. This is why absolute positioning elements are positioned relative to the browser window when left/top equivalents are positioned, if no other positioning elements are restricted.

Locates elements with traditional cascading context

To contain the position: relative/position: absolute/position: fixed orientation elements, when its z – the index value is not the time for auto, will create a cascade of context.

CSS3 and the new age of cascading context

In addition to introducing new attributes, CSS3 also challenges many old rules. For example, the influence of CSS3 Transform on overflow hiding and position:fixed positioning. Here, the impact of the cascading context is more extensive and significant. As follows:

1. Z – the index values are not for auto flex (parent element display: flex | inline – flex).
2. The opacity value of the element is not 1.
3. The transform value of the element is not None.
4. The mix-blending-mode element is not normal.
5. The filter value of the element is not None.
6. The isolation value of the element is ISOLATE.
7. Will-change specifies the value of any of the above attributes.
8. The -webkit-overflow-scrolling for the element is set to touch

Naming scheme

The main problems to be solved are naming conflict and reuse. There is no absolute superiority or inferiority among many solutions. Still want to combine oneself scene to decide.

OOCSS

• When it comes to rules for objects, there are two main principles: separating structure from appearance, and container from content.
• Separate structure and appearance: Add repeatable design units and advance product and UI thinking in this regard, such as the following naming and modularity rules for object patterns used in CSS.
• Separate container and content: this refers to the use of styles that do not match only with element positions. You can use the style anywhere, and if you do not apply the style, the default style will be kept.

SMACSS

• Sma and OOCSS have many similarities, but there are many differences, mainly in the classification of styles. They are: base, layout, module, status, theme
• In comparison with OOCSS, most of the design ideas are the same, using a class as the scope of CSS (scope is two restrictions, 1 does not comply with the scenario limit to use, 2 does conform to the scenario to use the correct), the other difference is different for skin and state writing rules
  • Base: Can be applied anywhere, I also call global style
  • Layout: mainly used to achieve different characteristics of the layout, improve the reuse rate of the layout,
  • Module: Modularity in design, a reusable unit, typically a dom+ CSS coupling binding.
  • State: Describes the layout or module specialization in a particular state. I would recommend zen Garden of CSS, which can be skinnized through CSS while the DOM structure remains unchanged.
  • Theme: More customized than the state, we will set the theme for some special modules, including a series of color, size, interaction and other heavy design, parametric design.

BEM

Bem is the block, element, modifier mentality to write styles. It doesn’t cover the structure of the CSS, it just suggests how to name your CSS.

• Block level: name of the owning component
• Element: The name of the element in the component
• Modifier: Any class associated with element modification

Style-Components

Ditch CSS altogether and write CSS rules in JavaScript

CSS Modules

Use JS to compile native CSS files to make them modular

According to the need to load

• Use require.js to load CSS on demand
• Webpack configures the on-demand loading of CSS

CSS Browser Compatibility

CSS hack

Sometimes we need to write specific CSS styles for different browsers or versions. This process of writing corresponding CSS code for different browsers or versions is called CSS hack, which can be roughly summarized into three types: conditional hack, attribution-level hack, and selector-level hack.

Automation plug-in

• Autoprefixer is a plugin that automatically manages browser prefixes. It parses CSS files and adds browser prefixes to CSS content, using Can I Use (Caniuse website) data to determine which prefixes are needed.
• When you add Autoprefixer to a resource builder such as Grunt, you can forget all about CSS prefixes and simply write CSS as normal, following the latest W3C specification. F projects need to support older browsers, modify the Browsers parameter Settings.
• There are plugins for Webpack, gulp and Grunt, so don’t waste your time with CSS compatibility.

What are the common CSS compatibility problems

• *{margin:0;} *{margin:0; padding:0px; }
• IE6 has a bilateral distance BUG
• In IE6 or IE7, set the height beyond your specified height by setting Overflow: Hidden; Or set the line height to be less than the height you set
• In Internet Explorer, you can obtain a custom attribute using the method of obtaining a general attribute or using getAttribute() to obtain a custom attribute
• Chrome’s Chinese UI forces text less than 12px to 12px by adding the CSS property -webkit-text-size-adjust: None; Can be resolved, or use the scale property in transform
• Hover styles do not appear after a hyperlink is visited, because the clicked hyperlink style no longer has hover and active. The solution is to change the arrangement of CSS properties: A: L – V – H – A link {} – > A: visited {} – > A: hover {} – > A: active {}
• Under IE, the event object has x, Y attributes, but no pageX, pageY attributes, but no X, Y attributes solution: through the condition – Png24 bit image in IE6 browser background, the solution is to make PNG8

CSS optimization and performance improvement

• By placing CSS files at the top of the page, multiple CSS can be merged and HTTP requests minimized
• Avoid transition constraints, avoid descendant selectors, chain selectors, and multiple type selectors
• Avoid unnecessary namespaces, avoid unnecessary duplicate styles, and remove empty CSS rules
• Use semantic names and compact syntax
• Avoid using! important
• Simplify rules as much as possible, merge duplicate rules of different classes as much as possible, and fix parsing errors
• Use the display attribute correctly
  • Width, height, margin, padding, and float should not be used after inline
  • Float should not be used after inline-block; Vertical-align should not be used after a block
• Do not abuse floats and follow box model rules
• Don’t abuse Web fonts, don’t overstate font sizes, don’t redefine H1-H6, don’t overdefine h1-H6 styles
• Zero does not require any units
• Standardize various browser prefixes

WEB standards and W3C

Q1: What happens when position is superimposed with display, overflow, float?

• Display: Specifies the type of box the element should generate (how the child elements are sorted)
• Position: Specifies the positioning type of the element
• Float: Defines the direction in which the element floats
• Position: Absolute/fixed has the highest priority. When position is set to absolute or fixed, float becomes invalid. Display needs to be adjusted. Can only be a block element or form (block/table)

Q2: What is the difference between display:none and visibility:hidden?

• Display: None Hides the corresponding element and no space is allocated in the document layout (resulting in rearrangement)
• Visibility :hidden elements, leaving the original space in the file layout (resulting in redrawing)
• The former hides the element and its descendants entirely; The latter has inheritance, and children will remain hidden, but can also be separately set to visibility: visible for display.

Q3: border: none; And the border: 0; What’s the difference?

Performance difference:

• {border: 0; }: border-width/border-color = 0; border-width/border-color = 0; border-width/border-color = 0; border-width/border-color = 0;
• {border: none; } is understood as border-style:none. boder:0; Border: None renders one more border-width:0 than border: None, which is why border: None performs better than border:0.

Compatibility differences:

• {border:none; } When border is “none” it seems to be valid for IE6/7. Border is more effective when border is “0” than when border is “None”.

Q4: what is the difference between px | to | REM em?

PX PX Pixel. A unit of relative length. Pixel PX is relative to the screen resolution of the monitor. The value of EM is not fixed. EM inherits the font size of the parent element. (1em=16px in browser body)

• Font-size=62.5%;
• Divide your original px by 10 and replace it with em;
• Recalculate em values for fonts that have been enlarged. Avoid duplicate font size declarations.

REM (new in CSS3) uses REM as opposed to only the HTML root element. Combining the advantages of relative size and absolute size, it can adjust all font sizes proportionally only by modifying the root element, and can avoid the chain reaction of font size compound layer by layer. EX (not recommended)

• Ex is a unit of relative length, and 1ex is defined as the height of a lowercase “x” in a given font. Therefore, this value will vary from font to font.
• However, many browsers do not have a built-in ex height value, and simply take the em value and half of it as the EX value. Therefore, ex is generally not recommended. The choice of font units is largely up to your project, rem is recommended if your user base is using the latest version of the browser, PX is recommended for compatibility, or both.

Q5: Viewport unit: VW, Vh, vmin, vmax

• Vw viewport width 1/100.
• Vh viewport height 1/100.
• Vmin vw and vH.
• Vmax The maximum value in vw and VH.

Q6: What is the difference between RGBA() and opacity?

• Opacity applies to an element and the transparency of all content within the element
• Rgba () only works on element colors or background colors (children of elements that make RGBA transparent do not inherit transparency)

Q7: PNG, JPG, JPEG, BMP, GIF these picture formats explain, respectively when to use. Have you heard about WebP?

• PNG Portable Network Graphics is a lossless bitmap file format for data compression. Advantages are: high compression ratio, good color. It works in most places.
• JPG is a distortion compression method used for photos. It is a destructive compression that does a good job of smoothing changes in tone and color. On the WWW, the format used to store and transfer photos.
• GIF is a bitmap file format that recreates true-color images in 8-bit colors. You can animate it.
• BMP advantages: high quality pictures; Disadvantages: Too large; Application scenario: Windows desktop wallpaper;
• Webp is an image format introduced by Google in 2010 that is only two-thirds as compressed as JPG and 45% smaller than PNG. Disadvantages are longer compression time, poor compatibility, currently supported by Google and Opera.

Q8: How to hide or transparent elements?

opacity: 0; //1 = 0;visibility: hidden; // this is similar to the above;display: none; //3.background-color: rgba(0,0,0,02.); //4 Only the background color is transparentCopy the code

Q10: What are progressive enhancement and graceful degradation?

Progressive enhancement

• It is to start from the most basic usability, on the basis of ensuring the availability and accessibility of site pages in low-level browsers, gradually increase the function and improve user experience.
• In essence, some of our daily development habits, such as first writing pages in markup language and then controlling page styles through style sheets, are concepts of progressive enhancement
• Other more obvious moves include using new technologies such as HTML5 and CSS3 to enrich pages for advanced browsers.

Graceful degradation

• It’s about first using the latest technology to build the best functionality and user experience for advanced browsers, and then diluting the functionality and user experience that can’t be supported against the limitations of lower-level browsers.
• In our daily development, a typical example of smooth degradation would be to write page code for Chrome first and then fix exceptions in IE or remove features for IE that could not be implemented

so

• Both of these concepts have been around for a long time, although the terms “progressive enhancement” and “graceful degradation” have only recently become common.
• In our current HTML5 and CSS3 combat, these two concepts are particularly important, how to ensure that the use of constantly changing new technologies to build in the mainstream browser has basic usability, and advanced browser experience, is we need to clear the thinking in the development process.

Shoulders of giants