CSS knowledge summary
Article Directory
- CSS knowledge summary
- One, implement a simple modal box
- 2. About front-end rendering and back-end rendering
- Three, written test questions
-
- 1. The css attribute overflow attribute defines how the content of the overflow element content area will be handled. If the value is scroll, the user agent will provide a scrolling mechanism regardless of whether it is needed. (√)
- 2. Description of HTML Doctype and strict mode and promiscuous mode:
- 3. About CSS Spirites
- 4. Three major browser kernels
- Fourth, the principle of AJAX technology
- Five, interview questions about BFC
One, implement a simple modal box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
section {
width: 800px;
height: 100%;
margin: 0 auto;
background-color: rgba(68, 45, 170, .1);
}
.modal {
display: none;
position: absolute;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
background-color: rgb(95, 93, 93, .2);
transition: all 1s ease-in-out;
}
button {
width: 100px;
height: 30px;
}
.modal-box {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 300px;
height: 200px;
background-color: rgb(252, 246, 246);
}
</style>
</head>
<body>
<section>
<button></button>
</section>
<div class="modal">
<div class="modal-box">
<header></header>
<main></main>
<footer></footer>
</div>
</div>
<script>
const button = document.querySelector('button');
const modal = document.querySelector('.modal');
button.addEventListener('click', function(e) {
modal.style.display = 'block';
});
modal.addEventListener('click', function(e) {
if (e.target == modal) {
modal.style.display = 'none';
}
})
</script>
</body>
</html>
2. About front-end rendering and back-end rendering
Front-end rendering and back-end rendering
Three, written test questions
1. The css attribute overflow attribute defines how the content of the overflow element content area will be handled. If the value is scroll, the user agent will provide a scrolling mechanism regardless of whether it is needed. (√)
2. Description of HTML Doctype and strict mode and promiscuous mode:
The document type
DTD (Document Type Definition) is a set of machine-readable rules that define what is allowed and what is not allowed in a specific version of XML or HTML. When parsing a web page, the browser will use these rules to check the validity of the page and take corresponding measures. The browser understands which DTD to use by analyzing the DOCTYPE declaration of the page, and thus knows which version of HTML to use.
DOCTYPE currently has two styles, strict and transitional . The purpose of transitioning DOCTYPE is to help developers migrate from the old version to the new version.
If you send an XHTML document with the correct MIME type, browsers that understand XML will not display invalid pages.
Browser mode
browser, there are two rendering modes: standard mode and mixed mode (quirks mode). In the standard mode, the browser renders the page according to the specification; in the promiscuous mode, the page is displayed in a relatively loose and backward compatible manner.
DOCTYPE switching
For HTML 4.01 documents,
DOCTYPEs containing strict DTDs often result in pages being rendered in standard mode.
A DOCTYPE that contains excessive DTD and URI also causes the page to be rendered in standard mode.
But having excessive DTD without URI will cause the page to be rendered in promiscuous mode.
The absence or incorrect form of DOCTYPE will cause HTML and XHTML documents to be rendered in promiscuous mode.
3. About CSS Spirites
CSS Sprites are called css sprites by many people in China, which is a way of processing web page images. It allows you to include all the sporadic pictures involved in a page into one big picture, so that when you visit the page, the loaded pictures will not be slowly displayed one by one as before. Up.
Using the combination of CSS "background-image", "background-repeat", and "background-position" for background positioning, background-position can accurately locate the position of the background image with numbers.
Use CSS Sprites can well reduce http requests a web page, thus greatly improving the performance of the page, which is the biggest advantage of CSS Sprites, which is also the main reason for the wide dissemination and application;
CSS Sprites can reduce the byte picture , once After comparing multiple times, the bytes of 3 pictures merged into 1 picture are always less than the sum of the bytes of these 3 pictures . Therefore, the C error
solves the problem of web designers in naming pictures. You only need to name a collection of pictures without naming every small element, thereby improving the efficiency of web page production.
It is convenient to change the style. You only need to modify the color or style of the picture on one or a few pictures, and the style of the entire webpage can be changed. It is more convenient to maintain.
4. Three major browser kernels
Wekbit is an open source web browser engine, which is the core of the browser. The default browser of Apple's Safari, Google's Chrome, Nokia S60 platform, the default browser of Apple mobile phones, and the default browser of Android mobile phones all use Webkit as the browser core. The degree of adoption of Webkit can be seen from this, and of course it has become one of the three mainstream browser cores. The other two are Gecko and Trident . The famous Firefox uses the Gecko kernel, while Microsoft's IE series uses the Trident kernel.
In addition, Sogou browser is dual-core, dual-core does not mean that a page is processed by two cores at the same time, but all web pages (usually the standard universal markup language application hypertext markup language) are processed by the webkit core, and only bank websites use IE Kernel
Fourth, the principle of AJAX technology
- AJAX refers to asynchronous JS and XML
AJAX is not a new technology, but a combination of several existing technologies to achieve asynchronous processing of web page request update rendering.
AJAX mainly includes:
- Use CSS and XHTML to express.
- Use the DOM model to interact and display dynamically.
- Use XMLHttpRequest to communicate asynchronously with the server.
- Use javascript to bind and call.
The core of AJAX is the XMLHttpRequest object
The main principle of AJAX is to add an intermediate layer between the user and the server-the AJAX engine, which makes user operations and server responses asynchronous.
Five, interview questions about BFC
1. Two brother boxes A is on top and B is on bottom, A margin-bottom: 20px, B margin-top: 30px What is the final distance between A and B?
30px Because they belong to the same BFC, the margins will overlap. You can put a box on B and turn on the BFC and it will become 50px.
- A and B are the parent-child relationship A is outside and B is inside, A margin-top: 30px, B margin-top: 20px, what is the distance between A and B?
For the same reason, the margins of the two boxes will overlap, causing the child box to rest on the border of the parent box. So the distance is 0px.
3. A is absolute positioning, B is relative positioning, A and B are siblings, where are A and B moving relative to each other, whether A and B are out of the document flow
A moves relative to the positioned parent box or root element and leaves the document flow; B moves relative to its position without leaving the document flow.