The basis of CSS

1. The difference between pseudo-classes and pseudo-elements

In my opinion, the difference between pseudo-classes and pseudo-elements is whether they can be implemented with DOM elements. Those that can be implemented with DOM elements can be called pseudo-elements, such as ::after, ::before, etc. Pseudo classes such as: Link, :visited, :hover, :active, :last-child, etc. Single colon or double colon? The CSS3 specification requires (::) to represent pseudo-elements and (:) to represent pseudo-classes. See more for a summary of pseudo-classes and pseudo-elements

2. CSS selectors and three main features

Selectors: tag selectors, ID selectors, class selectors, descendant selectors, child selectors (>), union selectors, sibling selectors (+, ~), attribute selectors, wildcard selector (*). 1) Inheritance: not all attributes can be inherited, only the text-/font-/color/line- can be inherited, the son can inherit, other descendants can also inherit. 2) hierarchy: parsing from top to bottom, conflicts shall prevail. 3) Priority: From high to low, inline style >ID selector > Class selector > Element selector important> Inline Style >ID selector > Class selector > Tag > Wildcard > Inheritance

3. The concept of box model

Width = content+padding width +border width standard box model width = content

 box-sizing:border-box|content-box|inherit
Copy the code

Border-box/IE/content-box/inherit inherit from box-sizing

4. What are the values of display? Explain their role

Block: indicates the block type. The default is the width of the parent element, regardless of the width of the content, you can set the width and height, line feed display. None: Elements are not displayed and removed from the document stream. Inline: Inline element. The default value is content width. The width, height, and display line cannot be set. Inline-block: The default width is the width of the content. The width and height can be set. List-item: Displays and adds style list tags as block types. Table: displays a block-level table. Inherit: Inherit from the parent element.

5. The difference between inline and block-level elements

Block level elements: width and height can be set, margin, padding, and auto-wrap can be set, and inline elements can be arranged from top to bottom: width and height are invalid, margin, padding, and no auto-wrap can be set horizontally

6. The difference between link and @import

Link is the use of HTML header tags to import external CSS files.

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Copy the code

@import Uses CSS rules to import external CSS files

<style>
@import url(style.css)
</style>
Copy the code
@import 'style.css'
@import url(style.css)
Copy the code
  • Difference 1 @import is a syntax rule of the CSS. Only styles can be imported. Link is an HTML tag that not only defines CSS, but also RSS, REL connection properties, and so on
  • Difference 2 Loading Sequence When a page is loaded, the CSS introduced by the link label is loaded at the same time. The @import import CSS is loaded after the page is loaded
  • Difference 3 Link is incompatible, and @import is incompatible with earlier browsers
  • Difference 4 Link supports dom styling via javascript, @import does not.

7. How to implement animations in CSS?

Css3 adds transition and animation. Before CSS3, we use hover pseudo-class attributes, and we use JS to change CSS attributes.

  • hover
.test{
  width:100px;
  height:100px;
  background-color: red;
}
.test:hover{
  background-color: yellow;
}
Copy the code

The state of the element changes immediately. There is no transition. Add transition

  • transition
.test {
  width:100px;
  height:100px;
  background-color: red;
  transition: 1s;
}
.test:hover {
  background-color: yellow;
}
Copy the code

Grammar: the transition: property | duration | timing – function | delay; Duration: how many seconds or milliseconds it takes to complete the transition effects timing-function: what method does it take to complete the transition effects Delay: the delay of the transition animation.

.test{
  width:100px;
  height:100px;
  background: red;
  transition: background 1s,width 2s,height 3s;
}
.test:hover {
  width:200px;
  height:200px;
  background: yellow;
}
Copy the code
  • Animation is more powerful
.test{
  width:100px;
  height:100px;
  background: red;
}
.test:hover {
 animation:div-anim 1s linear;
}
@keyframes div-anim{
  100%{
    width:200px;
    height:200px;
   background: yellow; }}Copy the code

Animation: name duration timing-function delay iteration-count direction play-state fill-mode; animation: name duration timing-function delay iteration-count direction play-state fill-mode; Duration: animation duration timing-function: what method does the transition effect take? Delay: the delay time of the transition animation. Rotund-count: Specifies the number of times an animation is played. Direction: Animation playback direction normal- sequence reverse- alternate- alternate-reverse(first reverse, then forward, alternate) play-state: Animation playback state, paused- paused, running-continue fill-mode: After the animation ends, none- style forwards without animation starting – after the animation ends, animation stays in the end state backwards- Animation goes back to the first frame state both- forwards and forwards are applied in rotation according to direction

Animation, Transition, tranform: Rotate, scale, move, and tilt. It has nothing to do with setting style animations. Translate is just a property of transform.

The difference between animation and transtion

8, CSS common hidden elements method, the difference?

  • Display: None does not occupy a position on the page and does not bind corresponding listening events.
  • Visibility: The hidden element still occupies space, but does not respond to bound listening events.
  • Opcity :0 elements have zero transparency, occupy space, and respond to bound listening events.
  • Z-index: negative value, covered with other elements.
  • Tranform: scale (0, 0); The element is scaled to 0, and the element occupies position on the page, but does not bind to the corresponding listening event.

Overflow: Scroll is not smooth, what should I do?

```css -webkit-overflow-scrolling:touch; // Enable hardware acceleration and smooth slidingCopy the code

10. How to realize overflow of single and multi-line text?

Refer to the following

11. What is rearrangement and redrawing? What operations cause rearrangement redraw?

Page generation process
  • HTML is parsed into a DOM tree by an HTML parser;
  • The CSS is parsed into a CSSOM tree by the CSS parser
  • Combining DOM Tree and CSSOM Tree, generate a Render Tree;
  • Generate a flow, and the browser draws all the nodes in the rendering tree on the screen;
  • Paint the layout on the screen to display the page.
concept

When we change the size and position of an element, we will re-evaluate the style, layout, draw, etc. This behavior is rearrangement, also known as rearrangement, simply means to regenerate the layout and rearrange the elements. Changing the color properties of an element does not trigger layout, it triggers style calculation and drawing, which is called redraw.

Trigger some factors
  1. Trigger the rearrangement
  • Render the first time the page enters
  • Add/remove visible DOM
  • Changes the position and size of elements, such as margins, borders, widths, heights, and so on
  • Change element content, such as image size, text amount, etc
  • Change font size
  • Change the browser window size, such as resize
  • Activate CSS pseudo-classes, such as hover
  • Setting the style property will trigger a reflow every time you change the style of a node
  • Query certain properties or call certain calculation methods: offsetWidth, offsetHeight, etcgetComputedStyleMethod, or Internet ExplorercurrentStyle“, will also trigger the rearrangement, the principle is the same, both to seek a “real-time” and “accuracy”

Common attributes and methods that cause rearrangements: Width, height, margin, padding, border, display, position, overflow, font-size, min-height, clientWidth, clientHeight, clientTop, CL IentLeft, offsetTop, scrollTo(), etc

2. Trigger redraw

  • The appearance of the element changes without triggering the page layout

Common attributes that cause redraw: Color, border-color, visibility, background, background-image, background-position, border-radius, background-repeat, box-shado W etc.

How to optimize

Reduce rearrangement times

  • Style set changes
// bad
var el = document.querySelector('.el');
el.style.padding= '5px';
el.style.border = '1px solid red';

// good
var el = document.querySelector('.el');
el.style.cssText = 'padding:5px;border:1px solid red'; // good .active { padding:5px; border-left:1px; border-right:2px; } var el = document.querySelector('.el');
el.className = 'active';
Copy the code
  • Batch modify DOM

Method: 1. Hide the element, modify it, and then display it. 2. Use the document fragment to create a subtree and copy it to the document 3. Copy the node to the copy, operate on the copy, and then overwrite the element

//html 
<ul id="mylist">
  <li><a href="https://www.mi.com">xiaomi</a></li>
  <li><a href="https://www.miui.com">miui</a></li>
</ul>// js let data = [ { name: 'tom', url: 'https://www.baidu.com', }, { name: 'ann', url: 'https://www.techFE.com'}] javascript function appendNode($node, data) {var a, li; for(let i = 0, max = data.length; i < max; i++) { a = document.createElement('a'); li = document.createElement('li'); a.href = data[i].url; a.appendChild(document.createTextNode(data[i].name)); li.appendChild(a); $node.appendChild(li); } } // bad let ul = document.querySelector('#mylist'); appendNode(ul, data); // let ul = document.querySelector('# myList '); ul.style.display = 'none'; appendNode(ul, data); ul.style.display = 'block'; / / method 2 let fragments = document. CreateDocumentFragment (); appendNode(fragment, data); ul.appendChild(fragment); // let old = document.querySelector('# myList '); let clone = old.cloneNode(true); appendNode(clone, data); old.parentNode.replaceChild(clone, old);Copy the code
  • The separation of reading and writing

Multiple DOM reads should be placed together. Do not add a write operation between the two reads.

// Bad four times rearrange + redrawdiv.style.left = div.offsetLeft + 1 + 'px';
div.style.top = div.offsetTop + 1 + 'px';
div.style.right = div.offsetRight + 1 + 'px';
div.style.bottom = div.offsetBottom + 1+ 'px'; // Good cache layout information is equivalent to read/write separation triggering a rearrangement + redrawvar curLeft = div.offsetLeft;
var curTop = div.offsetTop; 
var curRight = div.offsetRight;
var curBottom = div.offsetBottom;


div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';
div.style.right = curRight + 1 + 'px'; 
div.style.bottom = curBottom + 1 + 'px';
Copy the code

The original operation resulted in four rearrangements, but actually only one rearrangement after read-write separation, mainly due to the browser’s rendering mechanism.

When we modify the geometry of an element, the browser triggers a rearrangement or redraw. Browsers typically put multiple reorder operations into a queue and wait for a certain amount of time or threshold to be reached before they are executed in batches. However, when fetching layout information, the queue is forced to empty, which is also called forced backflow.Copy the code

12, say CSS preprocessing, what are the benefits of less?

An extension language that adds programming features to CSS, using basic programming techniques such as variables, simple logical judgments, and functions. CSS precompiled output is still standard CSS styles. Less, SASS are dynamic style languages, CSS preprocessor, AN abstraction layer on CSS, are a special syntax/language and compiled CSS. The less variable symbol is @ and the Sass variable symbol is $

  • Code is cleaner, easier to maintain and less code
  • Changes are faster. Base colors use variables that move everywhere
  • Variable mixing improves style reusability
  • Use code blocks to save a lot of code
  • Additional tools like belly, Darken, Loops, Mixins, etc. make CSS feel like a real programming language.

13. If you need to write animation manually, what is the minimum time interval you think?

The default frequency of most monitors is 60Hz, which means 60 refreshes per second, so the minimum interval is theoretically 1/60 * 1000ms = 16.7ms

14. What is responsive layout? What is the principle of responsive layout?

The page layout

1. What is the Flex layout? Do you normally use Flex layout

Concept: Flex stands for Flexible Box, Flexible layout, designed to provide maximum flexibility for boxed models. An element with a Flex layout is called a Flex container, and all of its child elements automatically become members of the container, called flex projects. Game entry learning flex container properties

flex-direction: Row | row - reverse | column | column - reseverse / / project orientation of the flex - wrap: nowrap | wrap | wrap - reverse / / project are in line, Don't break the justify - content: flex - start | flex - end | center | space - between | space - around / / project on the main shaft alignment align - items: The flex - start | flex - end | center | baseline | stretch / / project on the cross shaft alignment align - the content: Flex - start | | flex - end center | space - between | space - around | stretch / / root axis to flex its way - flow: Short for flex-direction and flex-wrap properties.Copy the code

Project attributes

orderFlex-grow: The size of an item. The default0Flex -shrink: does not increase the size of the project even if there is surplus space. The default is1, if the space is insufficient, narrowing the flex - the basis of the project: the project room for the main shaft, and the default auto, flex project itself size: flex - turns | flex - the shrink | flex - the basis, by default0 1Auto. Align-self: Allows a single item to have a different alignment than other items, overwriting the align-items property.Copy the code

Flex :1: two columns on the left and two rows on the top and two rows on the left What is the difference between flex-basis setting auto and 0? 1. Flex-grow :1; flex-shrink:1; flex-basis:0%; Reference [article] (www.zhangxinxu.com/wordpress/2… 2. Flex :1 preferentially minimizes content size when insufficient, and Flex: Auto preferentially maximizes content size when insufficient.

2. CSS implements multi-column equiheight layout, requiring the actual height occupied by elements to be the higher of the multiple columns.

  • Flex layout
<style>
.wrap {
  display:flex;
}
.item {
    flex:1;
    background-color: beige;
    border: 1px solid red;
  }
</style>
<div class="wrap">
          <div class="item">left</div>
          <div class="item">
            <div>center</div>
            <div>center</div>
          </div>
          <div class="item">
            right
          </div>
        </div>
Copy the code
  • Table – cell layout
<style>
.wrap {
  display:table;
  width:100%;
}
.left..center..right {
  display:table-cell;
  background-color: aqua;
}
</style>
<div class="wrap">
  <div class="left">left</div>
  <div class="center">
    <div>center</div>
    <div>center</div>
    <div>center</div>
  </div>
  <div class="right">
    right
  </div>
</div>
Copy the code
  • The positive or negative value at the bottom of the inner and outer margins
.wrap {
  width:100%;
  overflow: hidden;
}
.left..center..right {
  float:left;
  width:33.3%;
  background-color: aqua;
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}
<div class="wrap">
  <div class="left">left</div>
  <div class="center">
    <div>center</div>
    <div>center</div>
    <div>center</div>
  </div>
  <div class="right">
    right
  </div>
</div>
Copy the code
  • Grid Layout reference article
.wrap {
  display:grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-auto-flow: column;
  background-color: antiquewhite;
}
.item {
  background-color: aqua;
}
<div class="wrap">
  <div class="item">left</div>
  <div class="item">
    <div>center</div>
    <div>center</div>
    <div>center</div>
  </div>
  <div class="item">
    right
  </div>
</div>
Copy the code

3. How to achieve highly adaptive

  • flex
<div class="box">
  <header>The head</header>
  <main>
    <p>In the middle of the content</p>
  </main>
  <footer>At the bottom of the</footer>
</div>
<style>
.box {
  display:flex;
  flex-direction: column;
  height:100%;
}
header.footer {
  height:100px;
  background-color: red;
}
main {
  flex:1;
  height:100%;
 background-color: chocolate;
}
</style>
Copy the code
  • position: absolute
    <div class="box-wrap">
        <div class="box">
          <header>The head</header>
          <main>
            <p>In the middle of the content</p>
            <p>In the middle of the content</p>
          </main>
          <footer class="footer">At the bottom of the</footer>
        </div>
    </div>
    <style>
        .box-wrap {
            height:100%;
        }
        .box {
          height:100%;
          position: relative;
        }
        header {
          width:100%;
          height:100px;
          position:absolute;
          top:0;
          background-color: red;
        }
        .footer {
          width:100%;
          height:100px;
          position:absolute;
          bottom:0;
          background-color: green;
        }
        main {
          width:100%;
          position: relative;
          top:100px;
          bottom: 100px;
          background-color: chocolate;
        }
    </style>
Copy the code

4. Differences between EM, PX and REM

  • Px is a fixed pixel that cannot be changed to fit the page size.
  • Em and REM are more flexible, px is a relative unit of length, the length is not fixed, more suitable for responsive layout.
  • Em sets font size relative to the parent element, while REM sets font size relative to the parent element.

Scenario Application (TODO) : [REM mobile layout] (caibaojian.com/rem-respons…)

5. What are the ways in which CSS can center a div without knowing its width and height?

  • table
<style>
.parent {
  display:table-cell;
  text-align: center;
  vertical-align: middle;
  width:400px;
  height:400px;
}
.child {
  display: inline-block;
}
</style>
<div class="parent">
  <div class="child">The article centers</div>
</div>
Copy the code
  • transform
<style>
.parent {
  position: relative;
  width:400px;
  height:400px;
}
.child {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}
</style>
<div class="parent">
  <div class="child">The article centers</div>
</div>
Copy the code
  • flex
<style>
.parent {
  display:flex;
  align-items: center;
  justify-content: center;
  height:400px;
}
</style>
<div class="parent">
  <div class="child">The article centers</div>
</div>
Copy the code
A mind map in the middleBorrowing from other authors

6, up and down fixed, middle rolling layout how to achieve?

7, start to fix 100px left and right, adaptive three-column layout in the middle?

8. What are the pros and cons of the REM layout?

Positioning and floating

1, BFC mechanism (block formating Content formatting context)

Concept: Can be thought of as a separate area, the layout of the elements inside is irrelevant to the external elements. Layout rules: 1) The internal boxes are placed one after another; 2) the vertical spacing of boxes is determined by margins. Margins of adjacent boxes belonging to the same BFC will overlap. 4) The BFC is a separate region, and the elements in the container and outside elements do not affect each other. 5) The BFC region does not overlap with the float box (its region does not overlap with the float element). Reference trigger condition: any condition can trigger: 1) body root element 2) float element Float: float: none 3) Overflow: visible 4) display: inline-block, table, table-cell, table-caption 5) Position: absolute, fixed 1) Clear float, see example

<div style="border: 1px solid # 000;" > <div style="width: 100px;height: 100px;background: red;float: left;" ></div>
</div> // Because the elements inside the container float out of the document flow, the container is left with only2pxMargin height / / = = = = = = = = = = = = = = = = line = = = = = = = = = = = = = = = = = = = = = = = = = = / / trigger landing the <div style="border: 1px solid # 000;overflow: hidden"> width: 100px;height: 100px;background: #eee;float: left;" ></div>
</div>
Copy the code

2) To solve the vertical margin merge, one of the elements is nested in another container, and the container is set as BFC, so that the two elements are in different BFC, and the margin will not overlap.

<head>
div{
   width: 100px;
   height: 100px;
   background: red;
   margin: 100px;
}
</head>
<body>
   <div></div>
   <div></div>
</body> / / = = = = = = = = = = = = = = = = line = = = = = = = = = = = = = = = = = = = = = = = = = ="div class="container">
   <p></p>
</div>
<div class="container">
   <p></p>
</div>
.container {
   overflow: hidden;
}
p {
   width: 100px;
   height: 100px;
   background: red;
   margin: 100px;
}
Copy the code

3) Adaptive two-column layout: In a two-column layout, after the left element is set to float, the right element will overlap with the left element

<div style="height: 100px;width: 100px;float: left;background: redwidth: 200px; height: 200px;background: #eee"> I am a floating is not set, there is no trigger landing the element < / div > / = = = = = = = = = = = = = = = = line = = = = = = = = = = = = = = = = = = = = = = = = = = < div style ="height: 100px;width: 100px;float: left;background: redwidth: 200px; height: 200px;background: #eee;overflow:hidden"> < div style = "box-sizing: border-box! Important;Copy the code

2. The cause of height collapse in the CSS and the solution to height collapse?

Reason: By default, the parent element wraps the child element. If the parent does not set the height, the height of the child element will support the height of the parent element, but when the parent element is set to float, the child element will be separated from the document flow, and the child element will not support the parent element, resulting in height collapse. Solution: BFC solution and Clear float solution. 1. Add overflow: hidden to parent element in BFC scheme; 2. Clear scheme, add a blank div at the end of the parent element, and clear the float of the blank div. 3. Another clear solution is to add a blank block element to the end of the element via the After pseudo-class, and then clear the float. reference

     .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
Copy the code

Other related questions: How does the clear property clear floats? reference

MarginLeft /marginTop, top, or left

4, CSS3 中 文 position:sticky?

application

1. Implement a triangle with pure CSS3?

  .test {
    width:0;
    height:0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent transparent red;
 }
Copy the code

2, CSS how to implement a semicircle

/ / all round.semi-circle {
  width:100px;
  height:100px;
  background-color: red;
  border-radius: 50%; } // Upper semicircle.semi-circle {
  width:100px;
  height:50px;
  background-color: red;
  border-radius:50px 50px 0 0; } // Left semicircle.semi-circle {
  width:50px;
  height:100px;
  background-color: red;
  border-radius:50px 0 0 50px ;
}
Copy the code

3. Square with adaptive width and height?

/ / method.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange; } // Method two.square {
  width: 10vw;
  height: 10vw;
  background: tomato; } //.square {
  width: 20%;
  overflow: hidden;
  background: yellow;
}
.square::after {
  content: "";
  display: block;
  margin-top: 100%;
}
Copy the code

4, CSS draw a sector?

5. 0.5px line?

To be continued…