A, CSS,

The box model

The CSS box model is essentially a box that encapsulates surrounding HTML elements, including margin, border, padding, and actual content. The box model allows us to place elements in the space between the surrounding elements.

Box-sizing: content-box (W3C box model, also known as standard box model) — Element width and height is expressed as the size of the content.

Box-sizing: border-box — The width and height of the elements are expressed as content + inside margin + border size, with the background extending to the outer edge of the border.

New features of CSS3

  1. Word-wrap Word wrap
  2. How does text-overflow display when it exceeds the bounds of the specified container
  3. Text rendering text-decoration
  4. Text shadow text-shadow
  5. Gradient effect
  6. Transition-duration: duration of transition
  7. Transform stretching, compression, rotation, offset, etc
  8. Animation animation
  9. Shadow box – shadow
  10. Grid layout GIRD, elastic layout Flex

The difference between Transition and animation

Animation and Transition have most of the same properties. They both change the value of an element’s properties over time. The main difference is that Transition needs to trigger an event to change its properties, while Animation does not need to trigger any events to change its properties over time. And transition to 2 frames, from…. To, and animation can do it frame by frame.

CSS selectors and their priorities

  1. ! important
  2. Inline style=””
  3. ID selector # ID
  4. Class selector/property selector/pseudo-class selector. Class.active [href=””]
  5. Element selector/relational selector/pseudo-element selector HTML +div>span::after
  6. Wildcard selector *

BFC

BFC (Block Farmatting Content) formatting context is the CSS rendering mode of the box model layout in a Web page. It refers to an independent rendering area or an isolated independent container.

Landing the application

Prevent margin overlap or font surround, clear internal floating, and adapt to two – or multi-column layouts.

Conditions that trigger the BFC

  • The root element
  • The value of float is not None
  • The value of overflow is not visible
  • The display value is inline-block, table-cell, and table-caption
  • The value of position is absolute and fixed

The characteristics of landing

  • The internal boxes are placed vertically one on top of the other;
  • The vertical distance is determined by margin;
  • The BFC region does not overlap the float element region;
  • When calculating the height of the BFC, the floating element is also involved;
  • A BFC is a separate container on the page, and the child elements inside the container do not affect the outside elements.

Absolute and relative positioning

  • absolute: Absolute position, relative to the nearest positioned ancestor element. If each layer has no located ancestor element, the reference is offset to the body element, completely out of the standard document flow.
  • fixed: Fixed positioning. The positioned element is positioned relative to the window, which means that it will remain in the same position even as the page scrolls. A fixed location element does not retain the space it should have on the page.

Common ground: Changing the presentation of inline elements out of the document flow.

Differences: The root element for absolute is configurable, while the root element for fixed is fixed to the browser window.

Tell me about a CSS layout you’ve used

Grid layout, Layout layout, Flex layout, Wings, Grail layout, etc.

Flex layout

Flex layout is one of the solutions for web layout, called “elastic layout”, used to provide maximum flexibility for box models. Traditional layout solutions are based on the box model and rely on the display property +position property +float property. It is very inconvenient for special layouts, such as vertical center. In 2009, the W3C introduced a new solution, Flex layout, which enables a wide range of page layouts. The Flex layout is now supported by all browsers and is now the preferred layout.

The container has two axes by default: a horizontal axis and a vertical cross axis. Elements with a Flex layout are called Flex containers.

Note: The float, clear, and vertical-align attributes of child elements are invalidated by setting the element layout to FELx.

  1. Parent element attribute
The property name Attribute values note
display flex Defines a Flex container whose immediate children accept the Flex environment
flex-direction row,row-reverse,column,column-reverse Determine the direction of the principal axis
flex-wrap nowrap,wrap,wrap-reverse If an axis does not fit, how to line feed
flex-flow [flex-direction] , [flex-wrap] isflex-directionProperties andflex-wrapProperty. The default value isrow nowrap
justify-content flex-start,flex-end,center,space-between,space-around Sets or retrieves the alignment of elastic box elements along the main (horizontal) axis
align-items flex-start,flex-end,center,baseline,stretch Sets or retrieves the alignment of elastic box elements in the lateral (vertical) direction
  1. Child element attribute
The property name Attribute values note
order [int] By default, Flex orders are rendered in alphabetical order and can be changed by the Order property, with values as small as the first value or as negative.
flex-grow [number] Sets or retrieves the expansion ratio of an elastic box that allocates the remaining space according to the expansion factor set by the elastic box element as a ratio
flex-shrink [number] Sets or retrieves the shrink ratio of an elastic box that shrinks a space based on the shrink factor set by the elastic box element
flex-basis [length], auto Sets or retrieves the elastic box expansion reference value
align-self auto,flex-start,flex-end,center,baseline,stretch Sets or retrieves the alignment of elastic box elements in the lateral (vertical) direction, overriding the parent align-items setting
### Make the element disappear

Opacity: hidden, display: none, z-index: -1, opacity: 0

  1. Opacity: 0 — Hides elements without changing the page layout, which can also be triggered if an element is already bound to events, such as click.
  2. Visibility: hidden — Hides the element without changing the page layout or triggering events that the element is already bound to.
  3. Display: None — Literally hides the element and changes the layout of the page, meaning it has been deleted from the page.
  4. Z-index: -1 – Hides elements under other elements.

Remove the floating

  • Add the empty div element clear: both after the float element.
  • Add overflow: Hidden or Auto style to the parent element to trigger the BFC.
  • Add clear: both to the pseudo-element.

The pseudo-element approach is recommended as it does not add new divs to the page and makes the document structure clearer.

Calc function

The calc function is a new feature in CSS3. It can use calc () to calculate the border, margin, padding, font-size, width and other attributes to set dynamic values.

Note:

  • Leave a space before and after the operator, for example: width: calc(100%-10px);
  • The calc() function supports “+”, “-“, “*”, “/”;
  • For browsers that do not support calc(), the entire attribute value expression is ignored. However, we can use a fixed value as a fallback for browsers that do not support calc().

The mobile end rem

Rem officially defines the font size of the root element. Rem is a relative CSS unit, 1rem is equal to the font size on an HTML element. Therefore, in the project we can change the size of 1rem by simply setting the font size on the HTML.

(function () {
    var html = document.documentElement;
    function onWindowResize() {
        html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
    }
    window.addEventListener('resize', onWindowResize); onWindowResize(); }) ();Copy the code

Mobile terminal 1 px

In general, in PC short browsers, set the pixel ratio (DPR) to 1, where 1 pixel represents a physical pixel; But on retina screens, the DPR is usually 2 or 3. One CSS pixel is no longer equal to one physical pixel, so it looks thicker than the actual design.

<style>
    .box{
        width: 100%;
        height: 1px;
        margin: 20px 0;
        position: relative;
    }
    .box::after{
        content: ' ';
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 1px;
        transform: scaleY(0.5);
        transform-origin: 0 0; 
        background: red;
    }
</style>
<div class="box"></div>

/** 2.border-image */
div{
    border-width: 1px 0px;
    -webkit-border-image: url(border.png) 2 0 stretch;
    border-image: url(border.png) 2 0 stretch;
}
Copy the code

Fixed width on both sides adaptive three-column layout in the middle

The holy cup layout and the twin wing layout are important layout methods that front-end engineers need to master daily. Both have the same function, in order to achieve a fixed width on both sides of the three-column layout, the middle width of the adaptive.

/** Grail layout */
<style>
body{
    min-width: 550px;
}
#container{
    padding-left: 200px;
    padding-right: 150px;
}
#container .column{
    float: left;
}
#center{
    width: 100%;
}
#left{
    width: 200px;
    margin-left: -100%;
    position: relative;
    right: 200px;
}
#right{
    width: 150px;
    margin-right: -150px;
}
</style>
<div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</div>
Copy the code
/** Dual wing layout */
<style>
body {
    min-width: 500px;
}
#container {
    width: 100%;
}
.column {
    float: left;
}
#center {
    margin-left: 200px;
    margin-right: 150px;
}
#left {
    width: 200px;
    margin-left: -100%;
}
#right {
    width: 150px;
    margin-left: -150px;
}
</style>

<div id="container" class="column">
    <div id="center">center</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
Copy the code

Pseudo classes and pseudo elements

CSS introduced the concept of pseudo-classes and pseudo-elements to format information beyond the document tree. That is, pseudo classes and pseudo elements are used to modify parts that are not in the document tree.

pseudo-classes

The purpose of pseudo-classes is to use selectors to find information that doesn’t exist in the DOM tree and that can’t be retrieved by regular CSS selectors.

  1. Get information that does not exist in the DOM tree. For example, the “Link” and “Visited” of a tag do not exist in DOM tree structure and can only be obtained through CSS selector.
  2. Gets information that cannot be retrieved by regular CSS selectors. For example, to get the first child element, we can’t get it with a regular CSS selector, but we can get it with :first-child.

Pseudo elements

Pseudo-elements are used to create and style elements that are not in the document tree. For example, we can append some text to an element and style the text with :before. Although this text is visible to the user, it is not actually in the document tree. Common pseudo-elements include ::before, ::after, ::first-line, ::first-letter, :: Selection, ::placeholder, etc

Thus, the difference between a pseudo class and a pseudo element is whether an element outside the document tree is created.

The difference between ::after and :after

In actual development work, we will see someone write the pseudo-element :after, which is actually caused by the difference between CSS2 and CSS3 standards.

In CSS2, one colon is used for pseudo-elements. In CSS3, two colons are specified for pseudo-elements in order to distinguish pseudo-classes from pseudo-elements. So, for old CSS2 pseudo-elements, such as :first-line, :first-letter, :before, :after, the browser will recognize a colon, but for new CSS3 pseudo-elements, such as ::selection, you must write two colons.

The CSS draws a semicircular fan-shaped triangle trapezoid

div{
    margin: 50px;
    width: 100px;
    height: 100px;
    background: red;
}
/ * semicircle * /
.half-circle{
    height: 50px;
    border-radius: 50px 50px 0 0;
}
/ * fan * /
.sector{
    border-radius: 100px 0 0;
}
/ * * / triangle
.triangle{
    width: 0px;
    height: 0px;
    background: none;
    border: 50px solid red;
    border-color: red transparent transparent transparent;
}
/ * trapezoidal * /
.ladder{
    width: 50px;
    height: 0px;
    background: none;
    border: 50px solid red;
    border-color: red transparent transparent transparent;
}
Copy the code

The difference between link and @import

  • linkMore functions, you can define RSS, define Rel and other functions, while@importOnly used to load CSS
  • When the resolution tolinkWhen, the page will load the cited CSS synchronously, while@importThe referenced CSS is not loaded until the page is finished loading
  • @importInternet Explorer 5 or above is required
  • linkYou can use JS to dynamically import,@importno

Difference between REM and EM

Rem is based on the font size of the root, while EM is based on the font size of the parent

Rem: relative to the font size of the root HTML element, if the HTML is font size: 12px, then the div in it is set to font size: 2rem, so that the middle div is 24px

Em: relative to the parent element, if a p element is 12px and has a span tag inside it, set it to 2em, then the span font size is 12*2=24px

The primary purpose of the Css preprocessor

A Css preprocessor is a specialized programming language used to add programming features to Css (and thus Css itself is not a programming language). It doesn’t need to worry about browser compatibility, because the CSS preprocessor will still compile and output standard CSS styles. In general we can use CSS preprocessors: using variables, simple logical judgments, functions and other basic programming skills.

The primary purpose of the Css preprocessor

The Css syntax is not powerful enough. For example, Css selectors cannot be nested, resulting in repeated selectors statements in the Css. The inability to define variables in Css and the lack of a proper style reuse mechanism makes overall Css styles difficult to maintain. Therefore, the Css preprocessor can reduce the code, provide the Css style reuse mechanism, and improve the maintainability of Css code.

Css preprocessor variables in the code language and other languages, can realize the value of reuse, it also exists the life cycle, which is the scope (variable scope, we call it a scope), the simple point is the concept of local variable or a global variable, find the variable sequence is to find in local definition first, if you cannot find, is defined to find the superior, All the way to the global.

The use of Css preprocessors

Integration is used in front-end development tools (plug-ins) such as vscode, webstrom, etc.

Integration is used in project build tools that are automatically transformed when the project is compiled (packaged), such as Webpack, gulp, and so on.

Sass history:

Born in 2007, Sass is the earliest and most mature CSS preprocessor. It has the support of the Ruby community and compass, the most powerful CSS framework. Under the influence of Less, Sass has evolved into SCSS with full CSS compatibility.

Less appeared in 2009, influenced by SASS, but it uses THE syntax of CSS, making it easier for most developers and designers to get started. It has far more supporters outside the Ruby community than SASS. Its disadvantages are that compared with SASS, it has Less programmable features, but its advantages are simplicity and CSS compatibility.

Stylus was created in 2010 from the NodeJS community to provide CSS preprocessing support for Node projects. Stylus has a strong following within the community and is not nearly as popular as Sass or Less in a broad sense.

In summary, SASS seems to have the advantage in terms of features it offers, but less allows developers to smoothly transition from existing CSS files to LESS without the need to convert CSS files to SASS format as sASS does.

Stylus is stronger in function and has a stronger js connection.

Stylus is used because: Short and intuitive, indentation makes CSS hierarchies intuitive. At attribute references reduce maintenance. Functions and mixins, great tools for reuse.