This article will share with you 29 CSS interview knowledge points. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
CSS is the abbreviation ofCascading Style Sheets. It is a style sheet language used to describe markup such as HTML. The layout of documents written in a language. It is one of the three musketeers used to design web pages, the other two beingHTMLandJavascript.
CSS is designed to keep style and content separate, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of style features, and enable multiple Web pages are able to share formats and reduce complexity and duplication in structured content.It has a simple syntax and uses a large number of English keywords to specify the names of various style attributes.
Now that we have discussed the basics of CSS, let’s look at important CSS-based interview questions.
is a styling language that is simple enough for HTML elements. It is very popular in web design, and its application is also common in XHTML.
Question 2: Why develop 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 website code from the visual design.This separation of structure and design allows HTML to perform more functions than it could originally.
[Recommended tutorial:
CSS video tutorial Question 3: What are the major versions of CSS?– The selector is an HTML tag used to select the style to be set. Content. It selects HTML elements based on theirID, class and name.
– An attribute is an attribute of an HTML tag. In short, all HTML properties are converted into CSS properties.
– Values in CSS define a set of valid values for a CSS property.
1,
Inline: Use
hello world
: Create a separate CSS file in the workspace, and then create Link them in a web page
: The head element of the web page implements internal CSS in it.
Selector: :pseudo-element {Property1 :value; Property2 :value;}
– CSS helps to build a consistent framework that designers can work with to build other sites. As a result, the efficiency of web designers also increases.
– 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 need to be repeated across multiple pages.
*– Typically, a website can use up to2pages or more of code. But with CSS, this is not a problem. It requires only2-3lines of code, therefore, the website database remains clean and eliminates any website loading issues.
– Since people use different types of smart devices to access the internet, responsive web design is required. The role of CSS here is to make web pages more responsive so that they display the same way across all devices.
– 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. Its implementation allows developers to place HTML elements wherever they like, consistent with the page's aesthetic appeal or other considerations.
Gradient is the process by which we create an intermediate frame between two images to get the look of the first image and then develop into the second image. It is mainly used to create animations.
CSS specificity is a score or level that determines which style declaration an element must use. There are four categories in CSS that can grant specific levels of selectors:
Inline styles
ID
Classes, Attributes and Pseudo-Classes
Elements and Pseudo-Elements
#Too many versions– CSS has many versions compared to other parameters like HTML or Javascript-CSS1 , CSS2, CSS2.1, CSS3. As a result, CSS becomes 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 the CSS file and change the links.
Fragmentation- Using CSS, it may not work from one browser to another. Therefore, before a website goes live, web developers must test compatibility by running the program on multiple browsers.
Complexity– Using third-party software such as Microsoft FrontPage can make CSS complex.
Descendant combined selector, which is a set of tag names separated by spaces. Used to select tags that are descendants of the specified ancestor element. As long as a tag has such an ancestor "upstream" in its hierarchy, the tag will be selected. It doesn't matter how many levels there are between the tag and the context that is the ancestor.
The concept of progressive enhancementrefers to starting from the most basic usability, while ensuring Site pages build on their usability and accessibility in low-level browsers, gradually adding functionality and improving the user experience. In essence, some of our daily development habits, such as first using markup language to write pages, and then controlling the page style through style sheets, all belong to the concept of progressive enhancement; other more obvious behaviors include the use of new technologies such as HTML5 and CSS3 , for advanced browsers to improve the richness of user experience for pages.
The concept of smooth degradationrefers to first using the latest technology to build the strongest functions and user experience for advanced browsers, and then gradually reducing those that cannot be supported based on the limitations of low-level browsers. functions and experience; in our daily development, a typical example of smooth degradation is to first write the page code for Chrome, and then fix the exceptions in IE or remove those functional features that cannot be implemented for IE.
So, these two conceptual methods have actually coexisted in our daily development work for a long time, but the terms "progressive enhancement" and "smooth degradation" have only begun to be popularized in recent years. In our current practical application of HTML5 and CSS3, these two concepts are particularly important. How to ensure that the ever-changing new technologies are used to build a site with basic usability under mainstream browsers, and to improve the experience for advanced browsers? These are the ideas we need to be clear about during the development process.font-awesomeor Alibaba’siconfontto add icons to HTML web pages. We have to add the name of the given icon class to any inline HTML element. (or). The icons in the icon library are scalable vectors and can be customized using CSS.
border-widthSpecify the width of the border.
物理标签被称为表示标记，而逻辑标签对于外观是无用的。物理标签是较新的版本，而逻辑标签是旧的并且专注于内容。
如题，我们的标签元素写上后，浏览器就会渲染出结果，但不仅仅是这么简单
//物理元素 我想用b标签加粗 //逻辑元素 我想用strong标签加粗 //两段文字都加粗了，而且视觉效果完全一样
确实，文字加粗了，两者都达到了我们想要的目的，但是我们忽略了一个问题，既然b标签可以加粗，那么strong这个标签同样是加粗，存在的 意义又是什么呢？既然W3C定义了两个，它们之间的不同点是什么呢？它们之间的相同点又是什么呢？
物理元素
物理元素，又叫实体标签，它所做的是一种物理行为，比如上面我把一段文字用b标签加粗了，它所传达的给浏览器，告诉浏览器 我要加粗这段文字，从单词Bold中也可以看出来，英文中仅仅是加粗的意思，并没有其他作用。总结来说就是一句话： 物理元素就是告诉浏览器该怎么显示出来。
逻辑元素
逻辑元素，从英文字面上Strong就可以看出它是强调的意思，所以我们用这个逻辑元素(如上strong)来向浏览器传达 一个强调某段文字重要性的消息，说明此文字较为重要，也有利于搜索引擎收录。
Web标准主张XHTML不涉及具体的表现形式，“强调”可以用加粗来强调，也可以用别的方式强调，也可以通过css来改变strong的具体表现 ，还有就是并不是有了strong逻辑标签，就不用b标签来表示字体加粗了，b标签和strong标签默认情况下强调的效果一致，strong完全可以定义成别的样式，用来强调 效果，但是最好符合W3C标准，它更提倡内容与样式分离，所以单纯为了达到加粗而使用b标签不建议这样做， 从XHTML文档有意义性及用户体验角度来说，strong逻辑标签更加合适，而SEO方面，则针对优化情况而定。
CSS伪类是用来添加一些选择器的特殊效果。伪类的语法
selector:pseudo-class{property:value;}
CSS和SCSS之间的区别如下：
CSS是一种用于设计web页面的样式语言，而SCSS用于为浏览器组合CSS样式表。
SCSS 提供了一些变量，可以使用这些变量来缩短代码，这是与 CSS 相比的一大优势。
嵌入式样式表的优点:
可以在一个文档中创建多种标签类型。
在复杂情况下，可以使用选择器和分组方法来应用样式。
无需额外下载。
嵌入式样式表的缺点：
无法控制多个文档。
不同的介质不区分大小写，因此它们具有不同的属性。 他们是：
aural - 用于语音和音频合成器
print - 用于打印机
projection - 用于方案展示，比如幻灯片
handheld - 用于小的手持的设备
screen - 用于电脑显示器
Font-style
Font-variant
Font-weight
Font-size/line-weight
Font-family
该指令告诉浏览器如何在HTML页面上渲染特定元素。 它由一个选择器和一个遵循规则集的声明块组成。 选择器可以附加到其他选择器，以通过规则集进行标识。
CSS 框架是一个库，它允许使用CSS语言进行更轻松，更符合标准的Web设计。 这些框架中的大多数至少包含一个网格以及更多功能和其他基于Javascript的功能。 一些著名的CSS框架有：ACSS，Bulma，YAML，Foundation等。
base64 encoding is an image processing format that uses a specific algorithm to encode the image into a long string. When displayed on the page, the string can be used to replace the
of the image. url attribute.
The advantages of using base64 are:
(1) Reduce the HTTP request for an image
The disadvantages of using base64 are:
(1) According to the encoding principle of base64, the encoded size will be larger than the original file The size is 1/3 larger. If you encode large pictures into HTML/CSS, it will not only increase the size of the file and affect the loading speed of the file, but also increase the time it takes for the browser to parse and render the HTML or CSS file.
(2) It is not possible to cache directly using base64. To cache, you can only cache files containing base64, such as HTML or CSS. This is much worse than the effect of directly caching images in the domain.
(3) Compatibility issues, browsers before ie8 are not supported.
Generally, small icons of some websites can be introduced using base64 images.
Affects internal elements in BFC. A BFC is like an isolated area and has no influence on other areas.
Generally speaking, the root element is a BFC area. Floating and absolutely positioned elements will also form a BFC. BFC will also be created when the value of the display attribute is
attributes such as inline-block and flex. Also, BFC will be created when the overflow value of the element is not visible.
(1) The boxes inside the row-level context will be placed one after another 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 internal inline box.
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, margin:top 0 bottom 0; is often chosen, but margin-bottom:bot
tom;margin-left:left; is executed higher efficiency.
(3) Reduce the use of @import, and it is recommended to use link, because the latter is loaded together when the page is loaded, and the former waits for the page to be loaded before loading.
Selector performance:
(1) 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 will traverse 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 tags to the rule. Filter out irrelevant rules (so the style system doesn't waste time matching them).
(3) Avoid using wildcard rules, such as *{}, the number of calculations is amazing! Select only the elements you need to use.
(4) Try to select as few tags as possible, but use class.
(5) Use descendant selectors as little as possible and reduce the weight of the selector. The cost of descendant selectors is the highest. Try to reduce the depth of the selector to the minimum. The maximum should not exceed
three levels. Use more classes to associate each tag element.
(6) Understand which attributes can be inherited, and then avoid repeatedly specifying rules for these attributes.
Rendering performance:
(1) Use high-performance attributes carefully: floating and positioning.
(2) Minimize page rearrangement and redrawing.
(3) Remove empty rules: {}. The reason for empty rules is generally 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: those with browser prefixes come first. Standard properties follow.
(7) Do not use the @import prefix, it will affect the loading speed of css.
(8) Optimize nesting of selectors and try to avoid too deep levels.
(9) CSS sprite image, a small icon in a similar part of the same page, is convenient to use and reduces the number of page requests, but at the same time the image itself will become larger. When using it, carefully consider the pros and cons before using it.
(10) Correctly use the display attribute. Due to the role of display, some style combinations will be invalid, which will only increase the size of the style and also affect the parsing performance.
(11) Do not abuse web fonts. WebFonts may be unfamiliar to Chinese websites, but it is very popular abroad. Web fonts are often large in size, and some browsers will block page rendering and hurt performance when downloading web fonts.
Maintainability and robustness:
(1) Extract styles with the same attributes, integrate them and use them in the page through classes to improve the maintainability of CSS.
(2) Separation of style and content: define css code into external css.
Original address: https://codersera.com/blog/top-css-interview-questions-and-answers/
! !For more programming-related knowledge, please Visit:
Programming Video
The above is the detailed content of Summary of 29 CSS interview questions (analysis of knowledge points). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
