preface

Moving on, today we are talking about HTML + CSS.

Problem resolution

What are the properties of the Flex layout? What do they stand for?

Specify the container as a Flex layout

.box {
  display: flex;
}
Copy the code

The container has the following six properties

  • Flex-direction: determines the direction of the main axis (i.e. the alignment of items)
flex-direction: row | row-reverse | column | column-reverse;
Copy the code
  • flex-wrap: (flex-wrapProperty definition, if an axis does not fit, how to wrap)
flex-wrap: nowrap | wrap | wrap-reverse;
Copy the code
  • flex-flow: (flex-flowAttributes areflex-directionProperties andflex-wrapProperty. The default value isrow nowrap)
flex-flow: <flex-direction> || <flex-wrap>;
Copy the code
  • justify-content: (justify-contentProperty defines the alignment of items on the main axis (horizontal)
justify-content: flex-start | flex-end | center | space-between | space-around;
Copy the code
  • align-items: (align-itemsProperties define how items are aligned on the cross axis (vertical)
align-items: flex-start | flex-end | center | baseline | stretch;
Copy the code
  • align-content: (align-contentProperty defines the alignment of multiple axes. This property does not work if the project has only one axis.)
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Copy the code

Second, CSS3 compared with CSS2 more attributes?

Some common and common attributes are listed below:

  • Layout (flexFlexible layout,GridGrid layout)
  • Background (background 、background-image 、background-repeat 、background-origin 、background-clipEtc.)
  • Border (border-image,border-radius Etc.)
  • Color (can be usedRGBA,HSLTwo color methods, you can also use gradient.)
  • Gradient (gradientlinear-gradient, radial gradientradial-gradient)
  • Transition (transition)
  • Deformation, transformation (transform)
  • Animation (animation)
  • Media Enquiries (@media,@importThis property is a key part of responsive design.
  • Text (personalized fonts@font-face, text decorationtext-stroke-colorText overflowtext-overflow)

For details, please see

What is BFC

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.

The block formatting context is important for both locating floats (see float) and clearing floats (see clear). Float location and clear float are only applied to elements in the same BFC. Floats do not affect the layout of elements in other BFC, and clearing floats only clears floats of elements before it in the same BFC. Margin collapsing also occurs only between block-level elements that belong to the same BFC.

See block Formatting Context for more details

Four, layout design: fixed at the top, scroll page below

There are many ways to design

Flex Flex layout

Note: CSS is written inline and displays a scrollbar when the content in main exceeds the height of the page.

<body style="display: flex; flex-direction: column; height: 100vh;" > <header style=" min-height: 100px; width: 100%; border: 1px solid black; " ></header> <main style=" flex: 1; overflow-y: scroll;" > <div> Content area </div> </main> </body>Copy the code

Please describe the classification of Html layout elements. Describe the application scenarios for each layout element

  • Inline elements: display:inline

    Span, a, B, strong, I, em, br, input, textarea

    The width and height are determined by the size of the content itself (text, image).

  • Block elements: display:block

    Div, H1-H6, HR, menu, UI, Li, DL, table, P, from

    You can directly control CSS properties (width, padding, margin). If the width is not set, the height is the height of its own content, and the width is the width of its parent content.

  • Inline block elements: display:inline-block

    The combination of the above two types does not automatically wrap, but does recognize width, height, line-height, padding, and margin

Application Scenarios:

  • Inline element: Used not to specify width and height; width and height are specified by the content
  • Block-level elements: Used to specify the width and height, and label a single line
  • Inline block level elements: Used to specify the width and height of elements that do not fill a row

How to reduce the number of Dom? How to optimize loading a lot of Dom at once

Ways to reduce the number of DOM

  • Use pseudo elements, shadow implementation content as far as possible not to useDOMImplementation, such as clear float, style implementation.
  • Load on demand to reduce unnecessary rendering
  • Use proper structure and semantic tags

Load a lot of DOM optimizations at once

  • virtualDOM, direct operationJSObjects are less expensive and more efficient
  • The cacheDOMObject that does not need to be iterated overDOMThe node is cached first and referenced directly in the loop
  • ifDOMYou just change the location, you don’t need to delete it and rebuild it in another location, you can directly replace the wholeDOMJust change the position (this place needs algorithm traversal optimization)

What are the new features of Html5? How do I handle browser compatibility issues with new tabs? How to distinguish Html from Html5?

HTML 5 new features

  • Drag and drop the releaseAPI(Drag and drop)
  • Better semantic content tagging (header,nav,footer,aside,article,section)
  • Audio and videoAPI （audio,video)
  • The canvas (Canvas)API
  • Geography (Geolocation)API
  • The local storelocalstorageSession storagesessionstorage
  • Form control,calendar,date,time,email,url,search
  • The new technologywebworker.websocket

How to deal with new TAB browser compatibility

  • Handle errors. If it doesn’t work and you definitely need it, can you fill it with something else?
  • Importing packaged libraries that already support these tags (html5shiv.js)

How does Html differ from Html5

  • View the document headerdoctype. The old version would have declared asxhtml1-transitional.dtd
  • Structure semantic, the old version of the general use<div id="header"></div>, the use ofclassnameThe new version uses structured language tags.

8. What should I do if the default event of a tag is disabled

In simple terms, locate the control, add a click listening event, and jump to it using location.href.

let domArr = document.getElementsByTagName("a")
[...domArr].forEach(item=>{
    item.addEventListener('click',function(){
        location.href=this.href
    })
})
Copy the code