Summary of 30 CSS interview knowledge points

Translator: Front-end Xiaozhi Source: codersera.

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.
This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.

CSS, short for Cascading Style Sheets , is a style sheet language used to describe the layout of documents written in markup languages like HTML. It is one of the three Musketeers for designing web pages, the other two are HTML and Javascript .

CSS is designed to separate style and content, including layout, colors, and fonts. This separation improves the accessibility of content, provides more flexibility and control in the specification of styling features, and enables multiple web-based CSS by specifying the relevant .css in a single . Pages can share formatting and reduce complexity and repetition in structured content.

It has a simple syntax and uses a large number of English keywords to specify the names of various style properties.

Now that we've discussed the basics of CSS, let's look at important CSS-based interview questions.

Question 1: What is CSS?

CSS (Cascading Style Sheets) is a styling language that is simple enough for HTML elements. It is very popular in web design and its application is common in XHTML.

Question 2: Why develop CSS?

CSS was developed in 1997 as a way for web developers to design the layout of the web pages they were creating. Its purpose is to allow developers to separate the content and structure of the website code from the visual design.

This separation of structure and design allows HTML to perform more functions than the original.

Question 3: What are the major versions of CSS?

Different versions of CSS:

CSS1
CSS2
CSS2.1
CSS3

Question 4: What are the components of CSS styles?

A style rule consists of three parts:

Selectors – Selectors are HTML tags used to select content to be styled. It selects HTML elements based on their ID , class and name.
Attributes – An attribute is an attribute of an HTML tag. In short, all HTML attributes are converted to CSS attributes.
value – A value in CSS defines a set of valid values for a CSS property.

Question 5: How many ways are there to integrate CSS into a web page

CSS can be integrated in three ways

Inline : use directly on HTML elements

 <p style=”colour:skyblue;”>hello world</p>

External : Create separate CSS files in the workspace, then link them in each web page created

 <head>

<link rel=”text/css”href=”your_CSS_file_location”/>

</head>

Internal : The head element of the web page has internal CSS implemented in it.

 head>
     <style> 
             P{
                   color : lime;
               background-color:black;
                }
     </style>
</head>

Question 6: Who is maintaining the CSS specification?

The World Wide Web Consortium maintains the CSS specification.

Question 7: What does pseudo-element mean?

Pseudo-elements are keywords added to selectors that allow a style, a specific part of the selected element. CSS is used to apply styles in HTML markup, it allows extra markup to the document without affecting the actual document. It can be used to:

Style the first letter, line or element.
Insert content

grammar:

 Selector: :pseudo-element
{Property1 :value;
Property2 :value;}

Question 8: What are the advantages of CSS?

The advantages of CSS are:

Consistency – CSS helps build a consistent framework that designers can use to build other sites. As a result, the efficiency of web designers also increases.
Ease of use – CSS is very easy to learn and simplifies website development. All code is placed on one page, which means that improvements or edits to lines of code do not require repeated modifications to multiple pages.
*Site Speed * – Typically, a website can use up to 2 pages of code or more. But with CSS, this is not a problem. It only requires 2-3 lines of code, so the website database is kept clean, eliminating any website loading issues.
Device Compatibility – Since people use different types of smart devices to access the internet, there is a need for responsive web design. The role of CSS here is to make web pages more responsive so they display the same way across all devices.
Multi-browser support – CSS enjoys multi-browser support and it is compatible with all major internet browsers.
Repositioning – CSS allows you to define changes in the position of web elements on the page. Through its implementation, developers can place HTML elements where they like to align with the page's aesthetic appeal or other considerations.

Question 9: What are CSS gradients?

Gradients are the process by which we create intermediate frames between two images to get the look of the first image and then develop into the second image, and it's mostly used to create animations.

Question 10: What is CSS specificity?

CSS specificity is a score or rating that determines which style declaration an element must use. There are four categories of specificity levels in CSS that can authorize selectors:

inline style
ID
Classes, Properties and Pseudo-Classes
elements and pseudo-elements

Question 12: What are the disadvantages of CSS

The disadvantages of CSS are:

Too many versions - CSS has many versions compared to other parameters like HTML or Javascript - CSS1, CSS2, CSS2.1, CSS3. So CSS can get very confusing, especially for beginners.
Lack of security - Since CSS is an open text based system, it does not have a built in security system to prevent it from being overwritten. With read/write access to it, anyone can change CSS files and change links.
Fragmentation - Using CSS, it may not work on one browser with another. Therefore, before a website goes live, web developers must test compatibility by running the program on multiple browsers.
Complexity – CSS can be complicated by using third-party software like Microsoft FrontPage.

Question 13: What is RWD (Responsive Web Design)?

RWD (Responsive Web Design) technology is used to perfectly display design pages on every screen size and on devices like mobile, tablet, desktop and laptop, saving us from having to create different pages for each device.

Question 14: What are the benefits of CSS sprites?

The benefits of CSS sprites are:

By combining various small images into one image, the loading time of web pages is reduced.
Fewer HTTP requests, thus reducing load times.

Question 15: What are CSS context selectors?

A contextual selector, strictly speaking, is called a descendant combinatorial selector, which is a set of label names separated by spaces. Labels used to select descendants of the specified ancestor element. Whenever a label has such an ancestor "upstream" in its hierarchy, that label is selected. It doesn't matter how many levels there are from the label to the context that is the ancestor.

Everyone said that there is no project to write on the resume, so I helped you find a project, and also included a [Building Tutorial] .

I cooperate with Alibaba Cloud, and the discount price is relatively cheap: 89/year, 223/3 years, which is cheaper than 9.9 per month for students. I bought a project to build a project, and I am familiar with the technology stack. , I use my mother's) recommendation to buy a three-year cost-effective point, click this article to view.

Question 16: What is progressive enhancement and smooth degradation?

The concept of progressive enhancement refers to starting from the most basic usability, and gradually adding functions and improving user experience on the basis of ensuring the usability and accessibility of site pages in low-level browsers. In essence, some of our daily development habits, such as first writing a page in a markup language, and then controlling the page style through a style sheet, all belong to the concept of progressive enhancement; other more obvious behaviors include the use of new technologies such as HTML5 and CSS3. , which improves the richness of the user experience for the page for advanced browsers.

The concept of smooth degradation refers to first using the latest technology to build the strongest functions and user experience for advanced browsers, and then gradually attenuating those functions and experiences that cannot be supported against the limitations of low-level browsers; in our daily development, A typical example of a smooth regression is to first code the page for Chrome, then fix the exception in IE or remove features for IE that cannot be implemented.

Therefore, these two conceptual methods have already existed in our daily development work, but the terms "progressive enhancement" and "smooth degradation" have only become popular in recent years. In our current HTML5 and CSS3 actual combat use, these two concepts are particularly important. How to ensure the use of constantly changing new technologies to build sites with basic usability under mainstream browsers, and improve the experience for advanced browsers, These are the lines of thought that we need to be clear about during the development process.

Question 17: How do we add icons on web pages?

We can use icon libraries such as font-awesome or Ali's iconfont to add icons to HTML pages. We have to add the name of the given icon class to any inline HTML element. ( <i> or <span> ). The icons in the icon library are scalable vectors that can be customized using CSS.

Question 18: Which property specifies the width of the border?

border-width Specifies the width of the border.

Question 19: How to distinguish between physical tags and logical tags?

Physical labels are called presentation marks, while logical labels are useless for appearance. Physical tags are newer versions, while logical tags are old and focused on content.

As the title, after our label element is written, the browser will render the result, but it's not just that simple

 //物理元素
<b>我想用b标签加粗</b>
 
//逻辑元素
<strong>我想用strong标签加粗</strong>
 
//两段文字都加粗了，而且视觉效果完全一样

Indeed, the text is bolded, and both achieve the purpose we want, but we have overlooked a problem. Since the b tag can be bolded, then the strong tag is also bolded. What is the meaning of its existence? Now that the W3C defines both, what's the difference between them? What are the similarities between them?

physical element

Physical elements, also known as entity tags, do a physical behavior. For example, I bolded a piece of text with a b tag above, and what it conveys to the browser, telling the browser that I want to bold this text, It can also be seen from the word Bold that it only means bold in English and has no other effect. To sum up in one sentence: Physical elements tell the browser how to display them.

logical element

Logic element, from the English literal Strong, it can be seen that it means emphasis, so we use this logic element (as above strong) to convey a message to the browser that emphasizes the importance of a certain text, indicating that this text is more important, and also Conducive to search engine indexing.

The Web standard advocates that XHTML does not involve specific forms of expression, and "emphasis" can be emphasized by bold or in other ways, and the specific expression of strong can also be changed through css, and there is no strong logic tag. , you don’t need the b tag to indicate bold font. The b tag and the strong tag have the same effect by default. Strong can be defined as another style to emphasize the effect, but it is best to comply with the W3C standard, which promotes content. It is separated from the style, so it is not recommended to use the b tag just to achieve boldness. From the perspective of XHTML document significance and user experience, the strong logical tag is more suitable, while SEO is based on optimization.

Question 20: How to define a pseudo-class in CSS? What are they used for

CSS pseudo-classes are used to add some special effects to selectors. Pseudo-class syntax

 selector:pseudo-class{property:value;}

Question 21: What is the difference between CSS and SCSS?

The difference between CSS and SCSS is as follows:

CSS is a style language used to design web pages, while SCSS is used to compose CSS style sheets for browsers.
SCSS provides variables that can be used to shorten code, which is a big advantage over CSS.

Question 22: What are the advantages and disadvantages of embedded style sheets?

Advantages of embedded style sheets:

Multiple tag types can be created in one document.
In complex cases, selectors and grouping methods can be used to apply styles.
No additional downloads required.

Disadvantages of embedded style sheets:

Multiple documents cannot be controlled.

Question 23: List the various media types used.

Different media are not case sensitive, so they have different properties. they are:

aural - for speech and audio synthesizers
print - for the printer
projection - for project presentations, such as slideshows
handheld - for small handheld devices
screen - for computer monitors

Question 24: What are the properties of font?

Font-style
Font-variant
Font-weight
Font-size/line-weight
Font-family

Question 25: What does "rule set" mean?

This directive tells the browser how to render a specific element on the HTML page. It consists of a selector and a declaration block that follows the ruleset. Selectors can be attached to other selectors to be identified by rulesets.

Question 26: What is a CSS framework?

CSS Framework is a library that allows easier and more standards-compliant web design using the CSS language. Most of these frameworks contain at least one grid and more and other Javascript based features. Some famous CSS frameworks are: ACSS，Bulma，YAML，Foundation etc.

Question 27: Briefly describe the advantages and disadvantages of using image base64 encoding.

Base64 encoding is a picture processing format. The picture is encoded into a long string of strings through a specific algorithm. When displayed on the page, the string can be used to replace the picture.
url property.
The advantages of using base64 are:
(1) The disadvantages of using base64 to reduce the HTTP request of an image are:
(1) According to the encoding principle of base64, the encoded size will be 1/3 larger than the original file size. If a large image is encoded into html/css, it will not only increase the file size, but also affect the loading speed of the file. Increase the browser's time for parsing and rendering html or css files.
(2) Using base64 cannot be directly cached. To cache, only files containing base64, such as HTML or CSS, can be cached, which is much worse than the effect of directly caching images in the domain.
(3) Compatibility issues, browsers before ie8 do not support it.
Generally, the small icons of some websites can be introduced using base64 images.

Question 28: What is your understanding of the BFC specification (block formatting context)?

BFC refers to the block-level formatting context. After an element forms a BFC, the layout generated by its internal elements will not affect the external elements, and the layout of the external elements will not affect the internal elements in the BFC. A BFC is like an isolated area that does not affect other areas.
Generally speaking, the root element is a BFC area. Floating and absolutely positioned elements also form BFC. When the value of the display property is inline-block and flex, the BFC will also be created. There is also a BFC that will be created when the overflow value of the element is not visible.

Question 29: What is IFC?

IFC refers to the row-level formatting context, which has some layout rules like this:
(1) The boxes inside the row-level context will be placed one after the other in the horizontal direction.
(2) When one line is not enough, it will automatically switch to the next line.
(3) The height of the row-level context is determined by the height of the highest inner inline box.

Question 30: What are the ways to optimize CSS and improve performance?

Loading performance:
(1) CSS compression: Packing and compressing the written CSS can reduce a lot of volume.
(2) CSS single style: When bottom and left margins are required, many times choose: margin: top 0 bottom 0; but margin-bottom: bot
tom;margin-left:left; performs more efficiently.
(3) Reduce the use of @import, and use link, because the latter is loaded together when the page is loaded, and the former is to wait for the page to be loaded before loading.
Selector performance:
(1) The key selector (key selector). The last part of the selector is the key selector (that is, the part used to match the target element). CSS selectors are matched from right to left. When using descendant selectors, the browser traverses all child elements to determine whether it is the specified element, etc.;
(2) If the rule has an ID selector as its key selector, do not add a label to the rule. Filter out extraneous rules (so the style system doesn't waste time matching them).
(3) Avoid using wildcard rules, such as *{} calculation times are amazing! Only select the elements that need to be used.
(4) Select as few labels as possible, but use class.
(5) Use the descendant selector as little as possible and reduce the weight value of the selector. The overhead of the descendant selector is the highest, try to minimize the depth of the selector, and the maximum should not exceed three layers, and use more classes to associate each label element.
(6) Understand which properties can be inherited, and then avoid repeating the rules for these properties.
Rendering performance:
(1) Carefully use high-performance attributes: floating, positioning.
(2) Minimize page rearrangement and redrawing.
(3) Remove empty rules: {}. Empty rules are generally created to reserve styles. Removing these empty rules will undoubtedly reduce the size of the CSS document.
(4) When the attribute value is 0, no unit is added.
(5) The attribute value is a floating decimal 0.**, and the 0 before the decimal point can be omitted.
(6) Standardize various browser prefixes: the ones with browser prefixes come first. Standard properties follow.
(7) Do not use the @import prefix, it will affect the loading speed of css.
(8) Selectors optimize nesting and try to avoid too deep levels.
(9) The css sprite image, the small icon of the similar part of the same page, is convenient to use and reduces the number of requests on the page, but at the same time the image itself will become larger. When using it, consider the advantages and disadvantages before using it.
(10) Correct use of the display property. Due to the effect of display, some style combinations will be invalid, which will increase the style volume and also affect the parsing performance.
(11) Don’t abuse web fonts. WebFonts may be unfamiliar to Chinese websites, but they are very popular abroad. Web fonts are often bulky, and some browsers block page rendering hurting performance when downloading web fonts.
Maintainability and robustness:
(1) Extract styles with the same attributes, integrate them and use them in pages through classes to improve the maintainability of CSS.
(2) Separation of style and content: define CSS code into external CSS.

The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool , Fundebug .

Original: https://codersera.com/blog/top-css-interview-questions-and-answers/

comminicate