Home > Article > Web Front-end > Take a look at these front-end interview questions to help you master high-frequency knowledge points (2)
10 questions every day, after 100 days, you will have mastered all the high-frequency knowledge points of front-end interviews, come on! ! ! , while reading the article, I hope you don’t look at the answers directly, but first think about whether you know it, and if so, what is your answer? Think about it and then compare it with the answer. Would it be better? Of course, if you have a better answer than mine, please leave a message in the comment area and discuss the beauty of technology together.
Me: Uh~, link appears first, and @import appears later. This also results in link compatibility being better than @import, followed by the loading order. , the browser loads the tag link first, and then loads @import. The entire code is as follows:
[Related recommendations ：webfront-end development】
Me: Uh~, the functions they want to achieve are generally the same, but there are essential differences, as follows:
title and h1 The difference :
title is used to summarize website information and is displayed on the title of the web page. It can tell search engines or users what the content theme of this website is.
The function of h1 is to summarize the subject content of the article, which is displayed on the web page content. It can tell us what the main content of the website is
The difference between b and strong:
b is an entity tag, used to bold text, which has no practical meaning; strong is a logical tag, used to strengthen the tone of characters and emphasize the importance of content. In order to comply with CSS3 specifications, b should be used as much as possible Use less, just use strong.
The difference between i and em:
i is an entity tag, used to tilt text, has no practical meaning, and is more used in On the font icon; em is a logical label, emphasizing the character content, and is more used in professional terms.
Me: Uh~, title is the value displayed when the mouse is moved into the image, and alt is the value displayed when the image cannot be loaded.
Me: Uh~, okay, the summary is as follows:
png: Lossless compression, size to volume ratio jpg/jpeg is large, suitable for making small icons.
jpg: Using compression algorithm, there is a little distortion, smaller than png, suitable for medium and large pictures.
gif: Usually for animation.
webp: Supports both lossy and lossless compression, same quality images, webp has a smaller size but poor compatibility.
Me: Uh~, okay, the CSS box model is divided into: standard box model , IE (weird) box model, as follows:
Standard box model: margin, border, padding, content
IE box model：margin, content (border padding content)
CSS conversion box model：
box- sizing: content-box; /*Standard box model*/
box-sizing: border-box; /*IE box model*/
Me: Uh~, line-height is the height of each line of text. If the text is wrapped, the height of the entire box will increase (number of lines * line height)
height is a fixed value, which is the height of the box.
Me: Uh~,CSS selectors mainly include the following types:
Wildcard selector (*), id selector (#), class selector (.), tag selector (div, p, h1...), adjacent selector (), descendant selector (ul li ), child element selector ( > ), attribute selector ( a[href] ), etc.
CSS propertiesthat can be inherited include: font-size, Color, line-height and other text series, non-inheritable include: border, padding, margin and other box attributes
Me: Uh~, from the perspective of priority comparison: !important>inline style>id>class>label>wildcard. For priority calculation, we can set the weight for CSS: !important has the highest weight and can be ignored. Through calculation, we can see which weight value is higher. It makes sense why the style of the current page is this style:
First: Inline style (style) Weight value: 1000
Second: id selector Weight value: 100
Third: Class selector Weight value: 10
Fourth: Label & Pseudo Element selector weight value: 1
Fifth: wildcard, >, of which element selector is used. Draw a triangle?
Me: Uh~, just use border. Give the width of the border and then hide the border every day. If you want to use which direction of the triangle, just give the color separately. The code is as follows:
<style>
div{
width: 0;
border: 100px solid transparent;
/* 想要上三角形,颜色为红色 */
border-top: 100px solid red;
}
</style>
<body>
<div></div>
</body>
Interviewer: Talk about your understanding of the BFC specification
Me: Uh~, BFC (also called block-level formatting context) is an independent layout environment, which can be understood as an independent container. The sub-elements in the container will not affect the elements outside. If an element has BFC, then no matter how you modify the inner elements, they will not affect the outer elements. The entire code is as follows:
: Value of float: non-noneBasic programming videoValue of overflow: non-visible The value of display is: inline-block, table-cell...The value of position is: absolute, fixed
<style> ul{ list-style: none; border: 5px solid red; overflow: hidden; /* 设置BFC */ } ul li { width: 100px; height: 100px; background-color: orange; margin: 10px; float: left; } </style> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <h1>12</h1> </body>(Learning video sharing:
Web front-end introduction
,
)
The above is the detailed content of Take a look at these front-end interview questions to help you master high-frequency knowledge points (2). For more information, please follow other related articles on the PHP Chinese website!