This is the 13th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

The difference between link and @import

1. Link is an XHTML tag with a heavier weight than @import. The page will be loaded at the same time when loading, and there is no compatibility problem

2, @import is provided by CSS, the weight is lower than @import, the page loading will wait for the page loading to load, IE5 above can be recognized

When javascript changes its style, only the link tag can be used, because @import is not controlled by the DOM

2. How CSS hides elements

1, opacity: 0; // Set the opacity of the element to 0, so that it appears to be hidden, but it still occupies space and can be interactive. // Opacity: no; // opacity: no; Display: none; // Display: none; // Display: none; 5, z-index: 9999; // Hide elements completely from the document, no space, no interaction, no influence layout; Transform: scale(0,0) transform: scale(0,0); // A plane transform that scales elements to zero, but takes up space and cannot interact with each otherCopy the code

You can also use absolute positioning to remove the visible area, or clipping with clip-path

Third, the understanding of cascading context

Understanding: a three-dimensional concept of HTML elements that extend on a virtual Z-axis relative to the user facing the web page. HTML elements occupy cascading context space in order of priority based on their attributes.

Trigger generation of cascading context:

1, the root element HTML 2, the z-index value is absolute/relative positioning except auto 3, the parent element is display: inline-flex; Display: Flex 4; element whose opacity is less than 1; element whose transform property is not None; element whose filter value is not None; element whose mix-blend-mode value is not NormalCopy the code

4. Clear the floating mode

2, <div style=' both'>< div style='clear:both'> Or overflow: hiddenCopy the code

Five, media enquiries

The content displayed in a specific range can be tailored according to different widths and heights, which are usually applicable to devices of different screen models to make corresponding responses.

< font ='stylesheet' style =' width: 4px; text-align: left; 600px) { .container { display: noe } }Copy the code

The difference between pseudo-class and pseudo-element

Definition:

1, pseudo-class: colon + selector, under certain circumstances to display style content

Pseudo-elements: Create elements that are not in the document tree and add styles, such as “:after” adding text after setting an element, or adding styles, but the text is visible but not in the document flow.

The difference between:

A pseudo-class changes the state of an element by adding a pseudo-class to the element selector, while a pseudo-element changes an element by performing operations on the element.

Vii. The difference between EM, PX and REM

1, PX: absolute unit, the page according to accurate pixel display

2, EM: relative unit, based on the parent node font size, based on the nearest principle, browse the default font is 18px, the entire page 1EM is not a fixed value

3, REM: relative unit, relative to the font size of root HTML, cSS3 added attributes, Chrome/Firefox /IE9

Block level element level method

Margin: 0 auto

<div class='center'> </div>.center {width:100px; height: 100px; margin: 0 auto; }Copy the code

Flex layout

<div class='center'>
    <div class='flexdiv'>1</div>
</div>

.center {
    display: flex;
    justify-content: center;
}
Copy the code

3. Table method

<div class='center'>.center {display: table; margin: 0 auto; }Copy the code