# CSS+HTML interview questions

First of all, dear friends, this is Chenxi! A front – end pupil.

On which major browsers have your page been tested? What are the kernels of these browsers? What is a browser kernel? What are some common browser compatibilities? The solution?

Major browsers, kernels

The name of the The kernel The company
IE Trident Microsoft
Chrome Its, Blink Google
Firefox Gecko Mozilla
Opera Presto, its Opera Software
safari WebKit apple
Edge Blink Microsoft

Core composition and function

Rendering engine: responsible for rendering HTML, CSS, pictures and other information, and then output to the display JS engine: responsible for parsing JavaScript scripts, to achieve the dynamic effect of the page

Browser compatibility

  1. The browser defaults to different styles (important)

Solution :(add a global CSS style to unify)

  • Search for CSS resert and copy the reset code. The disadvantage is that all styles are unified.
  • Normalize CSS can be used by using NPM install and then imported directly. A method to clear the default style.
  1. The dotted box appears when Firefox clicks on the link:important)

Firefox automatically adds a dotted border around an element when a link is clicked.

Solution: We need to remove the dotted line in order to be consistent with other browsers. We can set the OUTLINE attribute to the A tag, as follows:

a{outline:none; }a:focus{outline:none; }Copy the code
  1. Double margin float problem: The problem occurs in browser: IE6 and earlier.
  2. Internet Explorer 6 not supported MIN: The browser where the problem occurred: Internet Explorer 6 or earlier
  3. IE6 cannot define containers around 1px wide: The problem occurs in browsers: IE6 and earlier
  4. Opacity: The browser where the problem occurs: IE8 and its lower versions
  5. Internet Explorer 6 does not support PNG-24 transparent images: The problem occurs in browsers: Internet Explorer 6 and earlier versions
  6. 3 pixel problem: The problem occurred in the browser: IE6 and lower

There’s a very important thing at the beginning of every HTML file, Doctype, you know what that is?

What does Doctype do?

Doctype is a standard common markup language document declaration type

This tag tells the browser which HTML specification to use to browse the document and which specification to parse the page with

The declaration is case insensitive

The meaning of the Doctype

Browsers themselves are divided into two modes, strict mode (standard mode) and promiscuous mode (weird mode),

The browser is through the doctype to distinguish between the two modes, doctype in HTML is to trigger the browser strict mode, if omitted, the browser will go into chaos mode.

Strict mode layout and requirements are in JS mode and the browser supports the highest standards to run the program.

In chaos mode, pages are rendered in a loosely progressive manner, rendering the page in accordance with the behavior of older browsers. In this mode, some styles will differ from the standard mode, and the interface will appear differently in different browsers, so be sure to use a docType at the beginning.

What are the advantages of Div+CSS over table? What other layouts are there?

Div+CSS layout benefits

1. Conform to W3C standards, code structure is clear, structure, style and behavior separation, bring good enough maintainability.

2. Accurate layout, simple modification of website layout.

3. Accelerated page loading speed (the most important) (in IE to load the entire table before showing the content).

4. Save space and traffic on the site.

5. Use HTML containing only structured content instead of nested tags to improve the efficiency of other search engines on web pages

layout

Normal streaming layout Floating layout Positioning layout Flex layout

Can you describe the difference between progressive enhancement and graceful degradation?

Progressive enhancement: Build the page for the lower version browser to ensure the most basic functions, and then improve the effect, interaction and additional functions for the advanced browser to achieve a better user experience.

Graceful downgrading: Start by building full functionality and then make it compatible with older browsers.

// For example, such writing is called incremental enhancement
.transition{
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;  
}

For example, such writing is called graceful degradation.transition{transition: all. 5 s; - o - the transition: all. 5 s; -moz-transition: all .5s; -webkit-transition: all .5s; }Copy the code

Progressive enhancement starts with a very basic, working version and expands to meet the needs of future environments; Graceful downgrading starts with a complex status quo and tries to reduce the supply of user experience.

Why is it more efficient to use multiple domain names to store website resources?

CDN cache is more convenient. 2. The browser can send only a limited number of HTTP requests at one time. Save cookie bandwidth 4. Reduce the connection number of the main domain name and optimize the page response speed 5. Prevent unnecessary security problems

What is the difference between SRC and href?

src

SRC is used to replace the current element, and href is used to establish a link between the current document and the referenced resource.

SRC will point to the content embedded in the document where the current tag is; SRC resources are downloaded and applied to documents when requested, such as JAVASCRIPT scripts, IMG images, and frame elements

href

Point to the location of the network resource, establish a link between the current element (anchor) or the current document (link),

If we add it to the document then the browser recognizes the document as a CSS file, downloads the resources in parallel and does not stop processing the current document.

Is this why it is recommended to load CSS using link rather than @import

What image formats do you know will be used for web page creation?

Png-8, PnG-24, JPEG, GIF, SVG

WebP: An image format developed by Google to speed up image loading. Image compression volume is only about 2/3 of JPEG, and can save a lot of server bandwidth resources and data space. WebP images are 40% smaller than JPEG images at the same quality. Apng: PNG bitmap animation extension, can achieve PNG format dynamic image effect. It was born in 2004, but has not been supported by major browser manufacturers, until recently it has been supported by iOS Safari 8, which is expected to replace GIF as the next generation of dynamic graphics standard.

Where does a JS request normally have cache processing?

  1. DNS cache: Access a website multiple times in a short period of time. You do not need to access the DNS server multiple times within a specified period.
  2. CDN cache: Content distribution network (people can get train tickets at the nearest outlet instead of having to queue at the train station)
  3. Browser cache: The browser stores the latest requested documents on the user’s disk.
  4. Server caching: Keep Frequently accessed Web pages and objects closer to the user’s system, making them faster when they are accessed again

How do you understand the semantics of HTML structures?

Why semantic?

A. In order to have a good content structure and code structure in the absence of CSS: to look good when running naked;

B. User experience: for example, fill in meaningful words and labels as far as possible for title and Alt labels used to explain nouns or picture information;

C. Good for SEO: establish good communication with search engines and help crawlers to capture more effective information: crawlers rely on tags to determine the context and the weight of each keyword;

D. Facilitate parsing by other devices to render web pages in a meaningful way;

E. Easy for team development and maintenance, more readable semantics, teams following the W3C standard follow this standard, can reduce differentiation

What should I pay attention to when writing HTML code?

  1. Use the non-semantic tags div and SPAN as little as possible;
  2. When the semantics are not obvious and div or P can be used, use P as much as possible, because p is spaced up and down by default to facilitate compatibility with special terminals.
  3. Do not use pure style tags such as B, FONT, U, etc. Use CSS Settings instead.
  4. Text to be emphasized, contained in the strong or em tag. Strong defaults to bold (not B) and em to italic (not I).
  5. To use a table, use caption, thead as the header, Tbody as the body, and Tfoot as the tail. Table header and general cells to be separated, table header with TH, cell td;
  6. The form fields are wrapped in the FieldSet tag and the Legend tag describes the purpose of the form;
  7. The description text for each input label needs to use the label label, and is associated with the corresponding input by setting the ID attribute for the input and for=someld in the lable label.

What semantic tags have been added to HTML5?

  • Header: Defines the header of the document
  • Nav: The section that defines navigation links
  • The main tag specifies the main content of the document.
  • Footer: The bottom of the footer that defines a document or section
  • Article: defines an article.
  • Section: Defines sections (sections, sections) in a document
  • Aside: Defines the side of the content other than the content it stands on
  • Multimedia label
  • canvas

How do you optimize Web performance?

Performance tuning is a big topic

Server communication layer

  • Reduced number of requests (resource merge)

Data transmission layer

  • Cache: Browser cache (strong cache)
  • Negotiate the cache
  • The compression
    • Data compression
    • Code file compression: HTML/CSS/JS comments, Spaces, long variables, etc
    • Static resources: font ICONS, metadata removal, reduction of size and resolution
    • Head and message
      • Reduce unnecessary headers in HTTP1.1
      • Reduce cookie data volume

The code level

  • Webpack packaging layer
    • Out of style
    • Js compressed
    • Image compression
    • Use iconfont vector images
    • Introduce DLL dynamic link library files and pre-pack resource packages that are not frequently changed, such as Vue/vuex/ vuE-Router/ant-Design
    • Multiple entry packing

The technical level

  • The front-end route is loaded lazily
  • Lazy data loading
  • Virtual list

The data processing

  • Http2
    • Header compression: Specialized HPACK compression algorithm
  • Link to reuse
    • Http1 establishes a Tcp connection and sends a request to the server while it is waiting to process the request. The link breaks after the server responds backtracking
      • Keep-alive links remain for a period of time
      • HTTP2 can take advantage of gaps
      • You don’t need to create links repeatedly
  • Binary frame

Add: With Http2, you can reduce the number of resource merges because header compression has reduced the amount of data transferred on multiple requests

Choice of frame

  • SSR server side rendering

    • Nuxt.js
    • Next.js

  • SPA single page application

  • SSG Static site generation scheme

What do you need to consider to do SEO from the perspective of the previous end?

Meta Tag Optimization

It mainly includes Title, Description and Keywords. There are other hidden words such as Author, Category, Language, etc.

What attributes can be defined in CSS to make DOM elements hidden? (What is the difference between display: None and visibility :hidden?)

way Difference of writing position Document flow distinction Dom difference
hidden=”hidden” In the HTML tag attributes, Take upDomain of the space Hide does not delete nodes are overwritten by display in the CSS
visibility :hidden; Written in the CSS Take upDomain of the space Hiding does not delete nodes
Display: none; Written in the CSS Do not take upDomain of the space Hiding does not delete nodes
hide() ; show(); Written in JS Do not take upDomain of the space Hiding does not delete the node, which is equivalent to modifying the display attribute
v-if/wx:if ; In the HTML tag attributes, Do not take upDomain of the space Hiding will delete nodes, with higher switching costs
v-show/wx:show; In the HTML tag attributes, Do not take upDomain of the space Hiding does not delete the node, which is equivalent to modifying the display attribute

What are the specific differences between inline elements, inline block elements, and block-level elements? Are the padding and margin of the inline elements settable?

Inline elements, inline block elements, and block-level elements

The name Of line Set the width of high Nested specification
Inline elements It doesn’t take up the whole row You cannot use CSS to set the width and height directly Inline elements can nest inline elements
Inline block elements It doesn’t take up the whole row You can set the width and height directly using CSS Generally loaded with text, picture content
Block-level elements An exclusive line You can set the width and height directly using CSS Block-level elements can nest block-level elements, inline block elements, and inline elements

Note: P elements cannot nest P elements, P elements cannot nest H series elements, and H series elements cannot nest H series elements

Common row-level

A, B, I, span, strong, del, em, etc

Common inline block level

Img, input, button, Textarea, select, etc

Common block-level

H1-h6, ul, OL, Li, DIV, P, form,table,tr etc

For padding and margin

Padding-top, padding-bottom, margin-top, and margin-bottom attributes for inline elements are invalid Padding-left, padding-right, margin-left, and margin-right attributes of inline elements can be set left and right, but not up and down

What is the difference between rGBA () and opacity?

Rgba () and opacity can also be implemented, but the biggest difference is that opacity is applied to the element and any content inside it.

Rgba () only works on an element’s color or its background color. (Children of rGBA transparent elements do not inherit transparency!)

CSS Priority allocation?

Contain! The important CSS has the highest priority

Under the same selector precision:

Id selector priority > Class selector large > Element selector Inline Style > Internal Style Inline Style > External Style

In the case of different selector precision:

You can determine the priority according to the weight calculation rules

The name of the The weight
Inline style, such as: style = “…” . A weight of1000
The ID selector, such as #content, A weight of0100
Class, pseudo class, property selector, such as. Content, :hover, [type=’text’] A weight of0010
Tag selector, pseudo-element selector, such as div p, ::first-line A weight of0001
Wildcard, child selector, adjacent selectorAnd so on. Such as* > +. A weight of0000
inheritanceThe style of the No weight

What is margin overlap? What’s the result of the overlap? How to solve it?

Margin merge (overlap is nothing more than two elements of the left and right structure)

In the vertical direction, when two elements meet, a margin merge occurs, taking the maximum margin

Margin merge for parent and child elements

If the parent element does not have an inside margin or border, set the child element’s margin. The margin is merged with the parent element’s margin

Solution: The parent element sets the border. The parent element sets the inner margin to replace the margin of the child element

Margin merge for sibling elements

In the vertical direction, the first element is set to margin-bottom and the second to margin-top, and margins merge between the two elements

Solution: Set only the maximum margin of the element

Solution 2

Add BFC paradigm

BFC can solve the following problems:

  • Margin merge
  • Margin overlay
  • floating
  • Coverage problems after de-scaling

What’s the difference between PX, EM and REM?

px

Pixel, absolute unit

Px is relative to the screen resolution of the monitor

em

Unit of relative length

Generally inherits the font size of the parent element

The default font height for any browser is 16px. All untuned browsers fit: 1em=16px

rem

Css3 added a relative length unit

Inherits the font size of the HTML root element

Rem is mostly used for mobile layout

Can you center text vertically and horizontally in CSS?

The level of

text-align

vertical

Use display and vertical-align to center the text in the container vertically

Center a single line of text vertically using line-height

Using Flex layout

Use padding to center child elements vertically

Absolute positioning with Margin: Auto

Vertically center block-level elements using absolute positioning and negative margins

What is the difference between link and @import in CSS?

<link href="CSSurl path" rel="stylesheet" type="text/css" />
// Link is an HTML tag. When the page is loaded, link will be loaded at the same time. Ink is an HTML tag.
 @importThe url (CSSurl path);// @import is provided by CSS; The CSS referenced by @import waits until the page is loaded; Import is only recognized in IE5.Link style has a higher weight than @import: in the CSS file introduced by the link tag, @importThe styles introduced will be layered over the styles of the CSS file itself,Copy the code

B The difference between a strong tag and a strong tag? What is the difference between an I label and an EM label? What’s the difference between Alt and title for IMG? The similarities and differences between strong and EM?

  • strong:Boldface emphasizes the tag, emphasizes, indicates the importance of the content
  • em:Italics emphasize the label, and more strongly, the emphasis of the content

Introduction to the box model? What does the CSS box model consist of?

The standard model refers to

Box-sizing: Content-box

Box size = Content + padding + border+ Margin

IE model refers to

Box-sizing: border-box box

Box size = content (content+padding+border) +margin;

The width contains (content + padding + border)

Common HTML compatibility problems?

Understanding of WEB standards and W3C?

1. For structural requirements :(tag specification can improve the efficiency of search engines to grab pages, which is very helpful for SEO)

  • Label letters should be lower case
  • Tag should be closed
  • Tags are not allowed to be nested arbitrarily

For CSS and JS

  • Use external CSS stylesheets and JS scripts whenever possible. Structure, performance, and behavior are divided into three parts, conforming to the norm. At the same time, improve page rendering speed, improve user experience.
  • Style as little as possible to use inter-line style sheets, so that the structure and performance of the separation, tag ID and class attributes to do to see the meaning of the text, the fewer tags, the faster the load, improve user experience, code maintenance is simple, easy to modify

What is the difference between HTML, XHTML, XML, and HTML5?

XHTML: Strict HTML, tags must be lowercase, tags must be closed, and tags must be properly nested

All XHTML elements must be properly nested, XHTML must have good structure, all tags must be lowercase, and all XHTML elements must be closed. All XHTML documents must have a DOCTYPE declaration, and HTML, head, title, and body elements must exist. Although the code is more elegant, the lack of fault tolerance is not conducive to rapid development.

XML: Extensible markup language, tags can be customized, for example

XML is probably best described as a cross-platform, hardware – and software – independent tool for processing and transmitting information

XML is designed to describe data, and its focus is on the content of the data. HTML is designed to display data, and the focus is on what the data looks like

HTML5: HTML4.0.1 update

What are the three layers of the front page? What does it do?

Composition: structure layer, presentation layer, behavior layer

They are: HTML, CSS, and JavaScript

Function: HTML to achieve the page structure, CSS to complete the page performance and style, JavaScript to achieve some client functions and business.

How do I center div? How to center a floating element? How do I vertically center a floating element?

Case 1: The block-level element of the unparent box is centered

Position + Margin (no movement, adaptive margin)

.box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; Margin: auto; // Margin: auto; // Horizontal center}Copy the code

Position + Transform (Move to the middle of the screen, margin gives itself half the width and height)

.box { position: absolute; top: 50%; left: 50%; Transform: translate(-50%, -50%); Margin-top: -100px; margin-top: -100px; margin-top: -100px; Margin-left: -100px; margin-left: -100px; margin-left: -100px; // Move it to the left to achieve horizontal center}Copy the code

Flex (Center spindle, center side axle)

Case 2: The block-level element of the parent box is centered

Flex (Center spindle, center side axle)

Css3 Added attributes table-cell, vertical-Aligen: Middel +margin

.parent { display: table-cell; vertical-align: middle; }. Child {margin: auto; // Horizontal center}Copy the code

Position + Translate (move half of itself first)

Text-align +display+vertical-align

What are the selectors of CSS? Which CSS properties can be inherited? How is the priority algorithm calculated? CSS3 new pseudo class has those?

The selector

1. Element selector tag name {}

2, id selector #id attribute {}

Class selector · Class attribute value {}

Selector 1, selector 2, selector n{}

5, intersection selector selector 1 selector 2 selector n{}

6, wildcard selector *{}

Descendant element selector ancestor element descendant element {}

Child element selector Parent > child element

9, pseudo-class selector :hover(state of element when moved) :visited(state of element after visited) :active(state of element when clicked)

10. Property selector

[Attribute name = “Attribute value”] Selects the element with the specified attribute value

[Attribute name ^=” attribute value “] selects the element whose attribute value begins with the specified content

[Attribute name $=” attribute value “] selects the element whose attribute value ends in the specified content

[Attribute name *=” attribute value “] selects the element whose attribute value contains the specified content

CSS inheritance

Font family properties

The property name describe
The font: Combination of fonts
The font-family: Specifies the font family for the element
The font – weight: Set the font thickness
The font – size: Set the font size
The font – style: Define the style of the font
The font – variant: Set the font for small uppercase letters to display text, which means that all lowercase letters are converted to uppercase letters

Text series attributes

The property name describe
The text text-indent: Text indentation
The text – align: Horizontal text alignment
The line – height: Line height
Word – spacing: Increase or decrease the amount of space between words
Letter – spacing: Increase or decrease the space between characters (character spacing)
The text – transform: Controlling text capitalization
Direction: Specify the direction of the text

Element visibility:

visibility

Cursor properties:

cursor

Table layout properties:

Caption -side, border-collapse, border-collapse, empty-cells, table-layout

List attributes:

List style-type, list style-image, list style-position, list style

Attributes that all elements can inherit:

Element visibility: visibility, opacity

Cursor properties: CURSOR

Inline inheritable properties:

Font family properties

Text series attributes: except text-indent and text-align

Attributes that block-level elements can inherit:

The text – indent, text – align

The CSS priority matches

Contain! The important CSS has the highest priority

Under the same selector precision:

Id selector priority > Class selector large > Element selector Inline Style > Internal Style Inline Style > External Style

In the case of different selector precision:

You can determine the priority according to the weight calculation rules

The name of the The weight
Inline style, such as: style = “…” . A weight of1000
The ID selector, such as #content, A weight of0100
Class, pseudo class, property selector, such as. Content, :hover, [type=’text’] A weight of0010
Tag selector, pseudo-element selector, such as div p, ::first-line A weight of0001
Wildcard, child selector, adjacent selectorAnd so on. Such as* > +. A weight of0000
inheritanceThe style of the No weight

Added pseudo classes to CSS3

  • :checked Selects the selected form element

  • :after Adds the first element inside the element

  • :before Adds the last content inside the element

  • :nth-child(n) Matches the parent element to specify the child element, sorting the NTH of all child elements

  • :first-child

  • :last-child

    .

Talk about the values of display and what they do. The value of position, what’s the difference?

display

None hides the element type in an inline row. Inline-block Inline block type. Block Indicates the block type. List-items are displayed as block type elements and add style list tags. The table element is displayed as a block-level table. Inherit specifies that the display property value should be inherited from the parent element.

position

Static: static positioning.

A. relative B.

Absolute: absolute position;

Fixed c.

Sticky: sticky positioning;

The last sentence

This is The learning experience of Shen Xi! If there is not straight, also hope to be corrected. I hope you don’t skimp on my advice. See you later.