Some miscellaneous knowledge points in front-end basics.

Actually, I had the idea of learning front-end in my freshman year. I had some understanding of HTML and CSS, but at that time I was focused on Android development and didn't persist with front-end.
As an engineer, no matter what kind of engineer, the knowledge learned is limited to a certain field. 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 become, I hope I can become a full-stack engineer (if possible).

Miscellaneous Points#

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

Positioning Issues#

The most commonly used are: absolute and relative.

absolute: positions the element relative to its nearest positioned ancestor, if any; otherwise, it is positioned 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 is floated using the float property, 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, to keep the page neat and beautiful, the excess text can be represented by "...":

.product-buyer-name {
overflow: hidden; /*hides the overflow of the cell*/
text-overflow: ellipsis; /*represents the overflow with an ellipsis*/
white-space: nowrap;  /*prevents the text from wrapping to the next line, causing the excess text to break out of the cell horizontally*/
}

Small icons on web pages
I always thought that 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 section because when we need to display certain fonts that are not available on the computer, we can use the same method to load the font resources and ensure that the font is displayed even if it doesn't exist on other people's computers.

So how do we get these font 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 generated font-face in 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, whose value cannot be changed once declared.
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 without error, outputs undefined
var a = 1;
console.log(b); // Throws an error, Uncaught ReferenceError: b is not defined
let b = 1;

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

The purpose is 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 variables declared with let or const are in a "temporal dead zone". Using these variables before they are declared will result in an error.

var: exists
let: does not exist
const: does not exist

Example:

var num = 123;
if (true) {
	num = 'abc'; // Throws an 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 results in an error.

Redeclaration

Overview: Declaring the same variable in 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

The var keyword 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: not limited to block scope
let: limited to block scope
const: limited to 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)
}

The advantage of block scope is that it can be used for testing ideas without worrying about variable name conflicts or external interference, which can happen with var's scope.