This article refers to the great god article, but also their own review of the preparation of the interview summary of small notes

Main contents: 

Box model 2.BFC 3. Cascading context 4. Center layout 5. Selector priority 6. Clear float method 7. Link and @import difference 8. CSS preprocessor 9. CSS animation 10. Rem layout principle 11. How to achieve multi-endpoint adaptation?Copy the code

The box model

  • Box model classification:
In theory, there are four boxes: Content Box, padding Box, border Box, and Margin Box. In fact, the padding-box was only supported by Firefox, and now it is not supported. Margin Box is even worse

  • Calculation method: 
Content box: width of box model = width of content border box: width of box model = width of content + padding + borderCopy the code
  • CSS switching mode:
Box-sizing can be set, content-box for standard model, border-box for IE model

  • Get the width and height of the box model through JS 
1. Dom.style. width/height -- The corresponding content box can only get the width and height of the inline style of the DOM element. Are unable to get 2. Dom. CurrwntStyle. Width/height after completion of page rendering results, either way, it can get only supports IE 3. Window. GetComputedStyle (dom). The width/height principle with 2, Compatibility is better 4. Dom. GetBoundingClientRect (). The width/height according to the elements in the Windows of the absolute position to obtain wide high 5. Dom. The offsetWidth/offsetHeight - corresponding border box Dom. ClientWidth/clientHeight corresponding padding box - dom. The corresponding padding scrollWidth/scrollHeight - box, but contains the size of the overflowCopy the code

BFC

  • What is landing?
BFC stands for Block Formatting Context, which is the rendering model used by Block boxes.

Block Formatting Context(BFC) and Inline Formatting Context(IFC)
  • Here are the three boxes:
I was also a little confused when I saw it. I always thought that B of BFC meant block level element, but I found it conflicted with the trigger condition, so I found that B here was a box

Block-level boxes: Boxes made up of block-level elements, each of which generates at least one box, called primary block-level boxes. Elements like Li also generate extra boxes to prevent bullet points. Describes the relationship between parent and sibling elements. Block containing boxes: A box containing only other block-level boxes, or a box that generates an in-line formatting context. The resulting box contains only in-line boxes. Describes the relationship between an element and its descendants. Block boxes: Boxes that are both block boxes and container boxes
  • What is Formatting Context?
It is a separate rendering area of the page with a set of rendering rules that determine how child elements are positioned and how they relate to other elements.

  • BFC triggering conditions: 
1. Root element 2.floatPosition: Absolute /fixed 4. display: inline-block/table/table-cell/table-caption/flex/inline-flex 5. Block-level elements and Overflow! == visibleCopy the code
  • Landing the features: 
1. Two adjacent boxes belonging to the same BFC are vertically aligned; 2. Margins of two adjacent boxes belonging to the same BFC overlap; 3. Touches the left side of the border box containing the block (except for the child element absolute)floatElement overlap 5. The height of BFC containsfloatThe text layer is not covered by a floating layer, but surrounds it. 7. The BFC is a separate container of page damage, and the child elements inside the container and the external elements do not want to influence each otherCopy the code
  • Application:
  1. Prevent margin overlap: add a parent element to one of the boxes and trigger the BFC
  2. Clear internal float (wrap a BFC around the float element so that it does not affect the external element)
  3. Fixed height collapse caused by floating (height of BFC contains height of floating element)
  4. Prevents being overwritten by floating elements (forms BFC, independent of floating element BFC)

Cascading context

  • Conditions that trigger a hierarchy:
  1. position
  2. Css3 attributes: flex, transform, opacity, filter, will-change, -webkit-overflow-scrolling
  3. Root level Context (HTML) 
<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>stack</title>
</head>
<body>
    <div class="background">background</div>
    <div class="z-index-minus">z-index-minus</div>
    <div class="block">block</div>
    <div class="float">float</div>
    <div class="inline">inline</div>
    <div class="z-index-0">z-index-0</div>
    <div class="z-index-puls">z-index-puls</div>
</body>
<style>
div {
    position: absolute;
    width: 1000px;
    height: 100px;
}
.background {
    background: red;
}
.z-index-minus {
    width: 900px;
    background: green;
    z-index: -100;
}
.block {
    width: 800px;
    background: gold;
    display: block;
}
.float {
    width: 700px;
    background: grey;
    float: left;
}
.inline {
    width: 600px;
    display: inline;
    background: rebeccapurple;
}
.z-index-0 {
    width: 500px;
    z-index: 0;
    background: teal;
}
.z-index-puls {
    width: 400px;
    z-index: 100;
    background: orange;
}
</style>
</html>Copy the code
The hierarchy priorities are shown as follows:

Note: The child element level cannot exceed the parent element limit.

Centered layout

  • Horizontal center
  1. text-align:center
  2. margin: 0 auto;
  3. flex+ justify-content: center
  4. absolute + transform
  • Vertical center
  1. line-height: height
  2. flex + align-item: center
  3. absolute + transform
  4. display:table
  • Horizontal and vertical center
  1. absolute + transform
  2. flex + justify-content + align-item

Selector priority

! Portant > inline style > #id >.class > tag > * > Inheritance > default

Method to clear the float

  • Add the :after pseudo-class tag to the end of the float element setting clear:both
  • The parent element constructs the BFC

The difference between link and @import

  • Link not only introduces external CSS, but also defines functions such as RSS(to display selected data) and Rel(to specify the relationship between the current document and the linked document/resource). @import can only be used to load CSS
  • When the CSS is imported, the page loading sequence is different: link, as long as the page is parsed to link, the CSS will be loaded synchronously, while @import will be loaded only after the page is loaded
  • Link can be added dynamically via JS, but @import cannot

CSS preprocessor (SASS/LESS/Stylus/PostCSS)

These are CSS-like languages that webpack compilation can turn into browser-readable CSS and give CSS more power.

Common functions:

  • File splitting: Cut large files into smaller files for easy maintenance
  • Selector nesting: It is easier to see the hierarchy
  • Variable: Easier to unify the visual style, easy to replace the overall style
  • Loop statement: sass example 
@for $i from 1 to 10 {
 .border-#{$i} {border:#{$i}px solid blue;}}Copy the code
  • Conditional statement: sASS example 
@if lightness($colorBackground-color: RGB (51, 51, 51); background-color: RGB (51, 51, 51);# 000;
} @else {
　background-color: #fff;
}Copy the code
  • Automatic prefixes: Webpack compilation implements automatic prefixes through the PostCSS plug-in
  • Mixin reuse: a simple example of how to use Less, refer to the article for details 
1. Simple mixin. a,#b{
  color: rebeccapurple;
}
.mixin-class{
  .a();
}
.mixin-id{
  #b();} 2. Mixin.border-radius (@radius) {// Set the default:.border-radius(@radius: 5px) {-webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

Copy the code

CSS animations

  • Transition — Transition animation 
transition: property duration timing-function delay;Copy the code
  • Animation – Defines the animation for each frame 
animation: keyframe-name duration timing-function delay iteration-count direction;Copy the code
  • Transform — static 
Translate, Scale, rotate, skew, opacity and other property functionsCopy the code

The principle of REM layout

Concept:

  1. Em: Units relative to the parent element
  2. Rem: A relative unit of CSS, a unit of size relative to the HTML root element, which is essentially proportional scaling.
  3. Vw, VH: Screen width /100, screen height /100
Principle:

  1. They are generally width-based, dividing the screen width into 100 pieces and converting to a percentage layout. But Google Chrome supports a minimum font size of 12px, so you can divide the screen into 10 parts to calculate.
Set the font size of HTML elements = screen width / 100 

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px'; Copy the code
2. Edit preprocessing function according to the size of the design drawing 

$ue-width: 640; /* The width of the ue graph */ @function px2rem($px) {@return #{$px/$ue-width*100}rem;
}

p {
  width: px2rem(100);
}Copy the code
Is REM omnipotent? Rem is an elastic box layout, as opposed to a responsive layout.

Rem does not apply to font sizes; Setting the font size for the root element affects all elements that do not have a font size, so you can fix it on the body by setting the font size through the media query.

Font size can be implemented according to media query and EM: 

@media screen and (min-width: 320px) { body {font-size: 16px} } @media screen and (min-width: 481px) and (max-width:640px) { body {font-size: 18px} } @media screen and (min-width: 641px) { body {font-size: 20px}} div {font-size: 1.2em}Copy the code
If you need to distinguish different DPR effects, you can use CSS for adaptation: 

.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    font-size: 14px;
}
[data-dpr="2"] .selector {
    font-size: 28px;
}
[data-dpr="3"] .selector {
    font-size: 42px;
}Copy the code
The CSS selector can be used only after the DATA-dPR attribute is set to the HTML 

document.documentElement.setAttribute('data-dpr', window.devicePixelRatio);Copy the code
Some basic concepts

  1. Physical pixel: Also known as device pixel, it is the tiniest physical component in the display.
  2. Device-independent pixel: density-independent pixel, a point in a computer coordinate system that represents a virtual pixel that can be applied by a programmer.
  3. Device Pixel ratio (DPR) = physical pixels/device-independent pixels 
window.devicePixelRatioCopy the code
4. Meta tags: The meta tags of viewport mainly tell the browser how to standardize the rendering of the page. On the mobile page, the meta tags are set as follows: 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">Copy the code

How to achieve multi-endpoint adaptation?

In terms of layout, the combination of Flex layout and REM layout + REM principle is used, which does not apply to font size