Some miscellaneous knowledge points in front-end basics

Actually, I had the idea of learning front-end in my freshman year, and I had some understanding of HTML and CSS, but at that time I was focused on Android development and didn't persist.
As an engineer, no matter what kind of engineer, the knowledge learned in a specific field is definitely limited. The IT industry is so big, you have to look at other areas.
If I have to say what kind of engineer I want to be, I hope I can become a full-stack engineer (if possible).

Miscellaneous Points#

Here are some important points that I need to understand or easily forget. There is no fixed logical order.

Positioning Issues#

The most commonly used ones are: absolute and relative.

absolute: Positions the element relative to its nearest positioned ancestor, if any; otherwise, positions it relative to the document.
relative: Positions the element relative to its normal position.

z-index: Changes the stacking order of elements, representing the element's position on the Z-axis. The default value is 0.

When an element uses the float property to specify which direction it should float, and you want the following elements to no longer float around it, you can use:

.nav::after{
    content:"";
    display:block;
    clear:both;
}

Fonts#

When the text exceeds the length, in order to keep the page neat and beautiful, the excess text is represented by "...":

.product-buyer-name {
overflow: hidden; /*Hides the overflow of the cell.*/
text-overflow: ellipsis; /*Uses an ellipsis for the overflowed text*/
white-space: nowrap;  /*Ensures that the text content in the cell (TD) does not wrap automatically, causing the excess content to break the cell in the horizontal direction*/
}

Some small icons on web pages
I always thought that some small icons on web pages were displayed by inserting an img tag, but after further understanding, I realized that icons like the tab bar on Taobao are displayed using a custom font.
I included this in the font category because when we need to display certain fonts that are not available on the computer, we need to load the resources of this font to achieve the effect of displaying the font even if it does not exist on other people's computers.

So how do we get these font resources and icon resources? Of course, through
Google or Baidu
There are many resources available on the Alibaba Vector Icon Library. We can select the resources we need and add them to the shopping cart before downloading the source code.

In the downloaded source code, there are resource files and a CSS demo. To use them, we first copy the resource files.

Copy the font-face generated under the project

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?##iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg##iconfont') format('svg');
}

Define the style for using the iconfont

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

Select the corresponding icon and get the font code to apply it to the page

<i class="iconfont">&##x33;</i>

Differences between var, let, and const in JavaScript#

const: Declares a read-only constant. Once declared, the value of the constant cannot be changed.
let: Declares a variable with block scope, only accessible within the block it is declared in.

Variable Hoisting

Overview: Variables can be used before they are declared.

var: Allowed
let: Not allowed
const: Not allowed

console.log(a);//Runs normally, outputs undefined
var a = 1;
console.log(b);//Error, Uncaught ReferenceError: b is not defined
let b = 1;

console.log(c);//Error, Uncaught ReferenceError: c is not defined
const c = 1;

The purpose is mainly to reduce runtime errors and prevent using a variable before it is declared, which can lead to unexpected behavior.

Temporal Dead Zone

Overview: If there is a let or const declaration in a code block, the block creates a closed scope for these declarations. If you use these variables before they are declared, an error will be thrown.

var: Exists
let: Does not exist
const: Does not exist

Example:

var num = 123;
if (true) {
	num = 'abc';//Error
	let num;
}

Explanation: There is a global variable num, but within the block scope, let declares a new num variable, which is bound to the block scope. Therefore, assigning a value to num before declaring it will result in an error.

Redeclaration

Overview: Refers to declaring the same variable within the same scope.

var: Allowed
let: Not allowed
const: Not allowed

The consequences of allowing redeclaration with var:

var i = 10;
for(var i = 0;i < 5;i++){
  console.log(i);
}
console.log(i);// Outputs 5

var does not have block scope, so the i in the for loop replaces the outer i.

Initial Value#

var: Not required
let: Not required
const: Required

Scope#

var: Except for block scope
let: Block scope
const: Block scope

Block scope:

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
    console.log(n); // 10 Inner n
  }
  console.log(n); // 5 Current n
}