Know browser
component
It's possible that when we talk about the components, the partners are directly confused. To be frank, don't be afraid, there are more confused people behind!
The composition is divided into two parts: shell and kernel (the kernel is the core part, which represents the technical means used by the browser, and the shell is the interface seen by our users)
For example, do you know the larger browser manufacturers?
| shell | kernel |
|---|---|
| Google Chrome | webkit (developed by Google and apple safari) / blink (Google separates Technology) |
| safari | webkit |
| firefox | gecko |
| IE | trident |
| opera (currently belongs to 360 and Kunlun world wide) | presto |
=====Manual boundary=====
- 360
- Roam
- Cheetah
- Global
- Sogou
- ...
The meaning of the dividing line: the lower part of the interface is only a means on the shell, and there is no exclusive kernel. If we answer, just answer the part on the dividing line.
kernel
Including rendering engine and JS engine
Rendering engine, literally, is to render our page. You can roughly understand it. This article explains JS engine here. JS engine didn't exist in the early days. It is responsible for JS parsing through synchronous rendering engine. The performance of the rendering engine is limited, so the ability of JS to parse code is relatively low, and more than 100 lines of code may crash. Therefore, the introduction of JS engine greatly increases the optimization of JS parsing, and the speed is quite fast.
The more famous is the V8 engine launched by Google, which has made a lot of optimization for JS parsing. Only one word, Google, cow!
Understanding CSS
cascading style sheet
selector
<!-- inline style --> <div style="width: 100px; height: 100px;"></div>
<style type="text/css">
/* Internal style */
div{
width: 100px;
height: 100px;
background-color: #000;
}
</style>
<!-- External style --> <link rel="stylesheet" href="./index.css">
Weight priority problem
Check the following code. What color will it display?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Basic style</title>
<!-- External style -->
<link rel="stylesheet" href="./index.css">
<style type="text/css">
/* Internal style */
div{
background-color: blue;
}
</style>
</head>
<body>
<div style="background-color: red;"></div>
</body>
</html>
External style index CSS file code is as follows:
div{
width: 100px;
height: 100px;
background-color: yellow;
}
The answer is red
Weight: inline style (less used, you can use display: none to cache data) > internal style sheet (for general testing) > external style sheet (mainly used)
Priority of selector
! Important > ID > class | attribute > label >*
Group selector
Clears the outline of the input box
input,
textarea{
outline: none;
}
Browser matching rules for parent-child selectors
Bottom to top, right to left
button
button{
border: none; // Remove the border of the button
color: white; // Change button font color
background-color: red; // Change button color
font-size: 12px; // Change font size
}
Single line text truncation and ellipsis display
div{
width: 200px;
height: 22px;
border: 1px solid #000;
white-space: nowrap; /*nowrap */
overflow: hidden; /*Hidden beyond*/
text-overflow: ellipsis; /*Ellipsis on hidden parts*/
}
The difference between visibility:hidden and display:none
visibility:hidden preserves the HTML document space occupied by hidden elements
display:none does not reserve the HTML document space occupied by hidden elements
Text alignment of inline blocks and inline elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text alignment of inline blocks and inline elements</title>
<style type="text/css">
.block{
display: inline-block;
width: 150px;
height: 100px;
border: 1px solid #000;
vertical-align: middle; /*alignment*/
}
</style>
</head>
<body>
<span class="block">123</span>
<span>123</span>
</body>
</html>
Method for centering multiple lines of text in container
1. Set the display of the container to table
2. Set the display of the text in the container to table cell (table cell attribute)
3. Set the vertical align of the text in the container to middle
Default spacing between inline block elements
Set the attribute on the parent element of the block in the row where the margin is generated: font size: 0px;
Set the value of word spacing on the parent element to an appropriate negative value
Horizontal and vertical center: the outer box is fixed with the inner margin, and the width and height of the inner box are 100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal and vertical centering mode 1</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
padding: 30px;
border: 1px solid #000;
}
.box .box1 {
width: 100%;
height: 100%;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
Browser body default margin
IE8 - > up and down 16px, left and right 8px
IE7 - > up and down 15px, left and right 11px
location
Floating flow
Floating stream, block level element cannot recognize the position of floating stream element. Positioning position creates a new layer.
Inline, inline block, floating, overflow hiding and plain text can identify the location of floating elements, except block level elements.
After float, the element becomes an inline block level element
Clear floating mode 1
Because after the floating flow is set, the block level elements cannot recognize the position of the floating flow elements, and the problem of high collapse will naturally occur. You can clear it in the following way. You can set clear: both through a block element, but this method is not particularly good. An additional element is added.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clear floating mode 1</title>
<style type="text/css">
.box {
width: 200px;
border: 1px solid #000;
}
.box .inner-box{
float: left;
width: 100px;
height: 100px;
}
.box .inner-box.box1{
background-color: green;
}
.box .inner-box.box2{
background-color: orange;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="inner-box box1"></div>
<div class="inner-box box2"></div>
<p class="clearfix"></p>
</div>
</body>
</html>
Pseudo class
Look directly at the following example to see how pseudo classes are used
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo class simple use</title>
<style type="text/css">
p:before{
content: "Chocolate";
}
p:after{
content: "Blog!";
}
</style>
</head>
<body>
<p>like</p>
</body>
</html>
Among them, the attribute value of content must be added!
Clear floating mode 2
Use pseudo elements to clear floats by adding a block level and setting clear:both.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clear floating mode 2</title>
<style type="text/css">
ul::after,
div::after{
content: "";
display: block;
clear: both;
}
.box {
width: 200px;
border: 10px solid #000;
}
/* The following method can also be used, but it is not as good as setting div directly above */
/* .box::after{
content: "";
display: block;
clear: both;
} */
.box .inner-box{
float: left;
width: 100px;
height: 100px;
}
.box .inner-box.box1{
background-color: green;
}
.box .inner-box.box2{
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
<div class="inner-box box1"></div>
<div class="inner-box box2"></div>
</div>
</body>
</html>
Clear floating mode 3
The following is the best way to clear the float. Write a class clearfix directly, and then add this class directly to the parent element if you need to clear the float.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clear floating mode 3</title>
<style type="text/css">
.clearfix::after{
content: "";
display: block;
clear: both;
}
.box {
width: 200px;
border: 10px solid #000;
}
.box .inner-box{
float: left;
width: 100px;
height: 100px;
}
.box .inner-box.box1{
background-color: green;
}
.box .inner-box.box2{
background-color: orange;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="inner-box box1"></div>
<div class="inner-box box2"></div>
</div>
</body>
</html>
content realizes dynamic data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>content Dynamic data acquisition</title>
<style type="text/css">
p::before{
content: attr(data-username);
}
</style>
</head>
<body>
<p data-username="Chocolate">,Welcome to visit!</p>
</body>
</html>
CSS3
Box shadow
Box shadow: horizontal position (must) vertical position (must) blur distance shadow size (equivalent to an increment in horizontal and vertical) shadow color type of shadow
Compatibility writing
-webkit-box-shadow: 0 0 10px; -moz-box-shadow: 0 0 10px; -o-box-shadow: 0 0 10px;
Border fillet
Pure circle 50% width and height
Semicircle angle height/2 + px
When you encounter the problem of prominent image coverage, you can use overflow: hidden to solve it.
The zoom of the background image of the website cover does not change the scale
.banner{
width: 100%;
height: 600px;
background-color: orange;
background-image: url(img/xxx.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
The background image does not change with the scroll bar
Background attachment has two attribute values: scrool (the default value, which will change with the scroll bar) and fixed (which will not change with the scroll bar)
html{
height: 100%;
background-color: orange;
background-image: url(img/xxx.jpg);
background-size: 100% 100%;
background-attachment: fixed;
}
Common writing templates of logo company
There is a remedy to solve the problem that css cannot be loaded due to network problems
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>logo Company common writing template</title>
<style type="text/css">
h1{
margin: 0;
}
.logo{
width: 142px;
height: 58px;
}
.logo h1 .logo-hd{
display: block;
width: 142px;
height: 0;
padding-top: 58px;
background: url(img/logo.png) no-repeat 0 0/142px 58px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="logo">
<h1>
<a href="" class="logo-hd">TaoBao</a>
</h1>
</div>
</body>
</html>
BFC features
- It is a bit like a completely independent container, which will not affect the layout of external elements.
- It belongs to the category of ordinary flow
How to make an element BFC
- body itself is a BFC element
- Defined float: left / right
- position: absolute / fixed
- display: inline-block / table-cell / flex
- overflow: auto / hidden / scroll
What problem has BFC solved
What problem does it solve?
- margin merge problem
- Height collapse problem
- margin collapse problem
Let's explain the problem of margin collapse. The following code shows that when we set margin top in the child box, we will find that we will go down with the parent box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BFC: margin Collapse problem</title>
<style type="text/css">
.box1{
width: 300px;
height: 300px;
background-color: #000;
}
.box2{
width: 50px;
height: 50px;
margin: 0 auto;
margin-top: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
The solution is to use the BFC feature
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BFC: margin Collapse problem</title>
<style type="text/css">
.box1{
/* Optional mode */
/* border: 1px solid transparent; */
/* Solution, form BFC */
/* display: inline-block; */
/* display: table-cell; */
/* overflow: hidden; */
/* float: left; */
width: 300px;
height: 300px;
background-color: #000;
}
.box2{
width: 50px;
height: 50px;
margin: 0 auto;
margin-top: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
CSS writing order
- display position float clear
- Self attribute: width height margin padding border background
- Text attribute: color font text align vertical align white space
Article reference
Thank Mr. Ono for his detailed explanation of CSS and call the teacher. It is suggested that you can take a look at it in combination with the video. After reading it, you will suddenly realize it!
last
The output of the article is not easy. I hope all my friends will support it!
Previous selections:
Little lion front-end note warehouse
Partners can submit their own problem-solving codes in Issues, 🤝 Welcome to Contributing, punch in and swipe questions, Give a ⭐ ️ if this project helped you!
Visit Chaoyi blog It is convenient for children to read and play~
Learning is like sailing against the current. If you don't advance, you will fall back