This article will summarize and share with you 75 the high-frequency test points in CSS for front-end interviews to help students succeed in the autumn recruitment. Hurry up and collect it to study!

[Compilation and sharing] 75 high-frequency test points in CSS for front-end interviews

Theory

1. What is the function of box-sizing attribute value?

The parsing mode of the box model used to control elements, the default is content-box

context-box: W3C's standard box model, setting the height/width attributes of the element refers to the height/width of the content part
border-box: IE traditional box Model. Setting the height/width attribute of the element refers to the height/width of the border padding content

[Learning video sharing: css video tutorial, web front-end 】

2. absolute Absolute positioning is relative to whom?

The CSS position property is used to specify how an element is positioned in the document.

Absolute elements will be moved out of the normal document flow, and no space is reserved for the element. The position of the element is determined by positioning the specified element relative to the nearest non-static positioned ancestor element. Absolutely positioned elements can have margins set and will not merge with other margins.

3. What is the difference between inline elements and block-level elements?

Inline elements: An inline element only occupies the space contained by the border of its corresponding label.

Block-level elements: A block-level element occupies the entire space of its parent element (container), thus creating a "block".

Difference:

Whether to start a new line: By default, inline elements will not start on a new line, and blocks Level elements will start on a new line.
Whether the width and height can be set: Block-level elements can set the width and height attributes. Note: Even if the width of block-level elements is set, it still occupies an exclusive line. Setting width and height for inline elements is invalid.
Whether inner and outer margins can be set: Block-level elements can be used, and horizontal padding-left/right and margin-left/right of inline elements are generated. Margin effect, but vertical padding-top/bottom, margin-top/bottom will not produce margin effect. (That is, the horizontal direction is valid, and the vertical direction is invalid)
#Whether to include each other: Block-level elements can contain inline elements and block-level elements. Inline elements cannot contain block-level elements

4. What are the common inline elements and block-level elements?

1. Common inline elements

<span>, <a>, <lable>, <strong>, <b>, &lt ;small>, <abbr>, <button>, <input>, <textarea>, <select>, <img alt="[Compilation and sharing] 75 high-frequency test points in CSS for front-end interviews" ></select></textarea></button></abbr></b></strong></lable></a></span>

2. Common block-level elements

<div>, <p>, </p> <li>, <h1> ~ <h6>, </h6> </h1> <form>, <header>, <hr>, , <ul>, <article>, <aside>, <dd>, <dl> <h2 data-id="heading-6"><strong>5. How to detect the smallest font supported by the browser size? </strong></h2> <p>You can use JS to set the DOM font to a certain value, and then take it out. If the value is set successfully, it means it is supported. </p> <h2 data-id="heading-7"><strong>6. What does "flex:1;" in CSS mean? </strong></h2> <p>flex is short for flex-grow, flex-shrink and flex-basis. </p> <p>In addition to the two shortcut values auto (1 1 auto) and none (0 0 auto), there are also the following setting methods: </p> <ul> <li>When the flex value is a non-negative number, then the number is the flex-grow value, flex-shrink takes 1, flex-basis takes 0%, the following are equivalent: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.item {flex: 1;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; }</pre><div class="contentsignin">Copy after login</div></div> </li> <li>When the flex value is 0, the corresponding three values are respectively For 0 1 0%<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.item {flex: 0;} .item { flex-grow: 0; flex-shrink: 1; flex-basis: 0%; }</pre><div class="contentsignin">Copy after login</div></div> </li> </ul> <p>For more writing methods, please go to <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" target="_blank" textvalue="MDN-flex">MDN-flex</a> to view</p> <h2 data-id="heading-8"><strong>7. What is CSS media query? </strong></h2> <p>Media Queries have existed as early as the CSS2 era. After being baptized by CSS3, they have become more powerful. The responsive features of bootstrap come from this.</p> <p>Simple Generally speaking, media query is a syntax used to modify when css takes effect. </p> <blockquote><p> The introduction of media query is to allow expressions to be added to determine the environment of the media. to apply different style sheets. In other words, it allows us to change the layout of the page to accurately adapt to different devices without changing the content</p></blockquote> <h2 data-id="heading-9"><strong>8. When importing styles into a page, what is the difference between using link and @import? </strong></h2> <ul> <li><p>link belongs to the HTML tag, and @import is provided by css; </p></li> <li><p>When the page is loaded, link will be loaded at the same time , and the css referenced by @import will wait until the page is loaded before loading; </p></li> <li> <p>link is an XHTML tag and has no compatibility issues, while @import can only be recognized by IE5 or above; </p> </li> <li><p>The weight of the link style style is higher than the weight of @import. </p></li> </ul> <h2 data-id="heading-10"><strong>9. Why doesn’t CSS support parent selectors? </strong></h2> <p>The answer to this question is the same as "Why does the CSS adjacent sibling selector only support the following elements but not the preceding sibling elements?" </p> <p>The browser parses the HTML document from front to back, from outside to inside. Therefore, we often see the loading situation where the page header appears first and then the main content appears. </p> <p>However, if CSS supports the parent selector, then all child elements of the page must be loaded before the HTML document can be rendered, because the so-called "parent selector" means that descendant elements affect ancestor elements. If descendant elements still How to affect the style of ancestor elements without loading processing? As a result, the web page rendering speed will be greatly slowed down, and the browser will have a long whiteboard. Generally speaking, it is determined by the rendering mechanism of CSS and HTML itself. </p> <h2 data-id="heading-11"><strong>10. What scenarios are margin and padding suitable for? </strong></h2> <p>When to use margin: </p> <ul> <li>Need to add a blank outside the border</li> <li>No background color is required in the blank space</li> <li>Connected from top to bottom The space between two boxes needs to offset each other. </li> </ul> <p>When to use padding: </p> <ul> <li>Need to add a blank space inside the border</li> <li>The blank space requires a background color</li> <li>The two connected top and bottom The blank space of two boxes is expected to be the sum of the two. </li> </ul> <h2 data-id="heading-12"><strong>11. What are the values of display? </strong></h2> <p>Common ones are as follows:</p> <table> <thead><tr class="firstRow"> <th align="center">Value</th> <th align="center">Description</th> </tr></thead> <tbody> <tr> <td align="center">none</td> <td align="center">The element will not be displayed</td> </tr> <tr> <td align="center">block</td> <td align="center">This element will be displayed as a block-level element, with line breaks before and after this element symbol. </td> </tr> <tr> <td align="center">inline</td> <td align="center">Default. This element will be displayed as an inline element with no line breaks before or after the element. </td> </tr> <tr> <td align="center">inline-block</td> <td align="center">Inline block element. You can set the width and height and display them side by side. </td> </tr> <tr> <td align="center">inline-table</td> <td align="center">This element will be displayed as an inline table (similar to a table), with no line breaks before and after the table. </td> </tr> <tr> <td align="center">table</td> <td align="center">This element will be displayed as a block-level table (similar to a table), with line breaks before and after the table. </td> </tr> <tr> <td align="center">inherit</td> <td align="center">Specifies that the value of the display attribute should be inherited from the parent element. </td> </tr> <tr> <td align="center">grid</td> <td align="center">Grid layout (Grid) is the most powerful CSS layout solution. It divides web pages into grids, and you can combine different grids to create various layouts. </td> </tr> <tr> <td align="center">flex</td> <td align="center">Flexible layout is used to provide maximum flexibility for the box model. </td> </tr> </tbody> </table> <p>其他的可以自行查阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/display" target="_blank" textvalue="MDN-display">MDN-display</a></p> <h2 data-id="heading-13"><strong>12. 两个同级的相邻元素之间，有看不见的空白间隔，是什么原因引起的？有什么解决办法？</strong></h2> <p>行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。</p> <p>解决方法：</p> <ul> <li>相邻元素代码代码全部写在一排</li> <li>浮动元素，float:left;</li> <li>在父级元素中用font-size:0;</li> </ul> <h2 data-id="heading-14"><strong>13. CSS 中，有哪些方式可以隐藏页面元素？有什么区别？</strong></h2> <p><strong>display:none</strong>：元素不可见，不占据空间，无法响应点击事件</p> <p><strong>visibility:hidden</strong>：元素不可见，占据页面空间，无法响应点击事件</p> <p><strong>opacity:0</strong>：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件</p> <p><strong>设置height、width属性为0</strong>：将元素的 margin，border，padding，height和width 等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其 overflow:hidden 来隐藏其子元素。特点：元素不可见，不占据页面空间，无法响应点击事件</p> <p><strong>position:absolute</strong>：将元素移出可视区域，元素不可见，不影响页面布局</p> <p><strong>clip-path</strong>：通过裁剪的形式，元素不可见，占据页面空间，无法响应点击事件</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.hide { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }</pre><div class="contentsignin">Copy after login</div></div> <p>最常用的还是<code>display:none和visibility:hidden，其他的方式只能认为是奇招，它们的真正用途并不是用于隐藏元素，所以并不推荐使用它们

#	display: none	visibility: hidden	opacity: 0
页面中	不存在	存在	存在
重排	会	不会	不会
重绘	会	会	不一定
自身绑定事件	不触发	不触发	可触发
transition	不支持	支持	支持
子元素可复原	不能	能	不能
被遮挡的元素可触发事件	能	能	不能

14. Why do front-end projects need to initialize CSS styles?

Due to browser compatibility issues, different browsers have different default values for tags. If the browser's CSS is not initialized, the same page will be displayed differently in different browsers.

15. What is the difference between display:none and visibility:hidden?

Performance

display:none disappears completely, does not occupy a place in the document flow, and the browser will not parse the element;
visibility:hidden disappears visually, which can be understood as the effect of transparency being 0. It occupies a place in the document flow, and the browser will parse the element;

Performance

Using visibility:hidden has better performance than display:none. When display:none switches the display, the page will reflow (when some elements in the page need to change the size, layout, display Hide, etc., the page is rebuilt, and this is a reflow. All pages need to generate a reflow when they are loaded for the first time), and when visibility switches whether to display or not, it will not cause a reflow.

16. What are the new features of CSS3?

##Selectors: Universal sibling selector, pseudo-class selector, pseudo-element selector, negative selector, state pseudo-class selector

New style: border, box-shadow, background, text, color

Border:
- box-shadow: Add a shadow to the element
- border-image: Use an image to draw the border
Background: Several new attributes about the background have been added, namely
background-clip, background-origin, background-size and background-break
Text: word-wrap, text-overflow, text-shadow, text-decoration

##Transition

: transition

Transition

：transform

animation

：animation

Other

：gradient, flexFlexible layout, GridGrid layout, media queries, blending modes, etc...

17. What is hardware acceleration?

animation
and transition smoother.

18. What is the difference between double colon and single colon in ::before and :after? Explain what they do?

19. What is the order of CSS matching rules?

I believe that most beginners will think that CSS matching is from left to right, but it is actually the opposite.

CSS matching occurs when the Render Tree is built (Chrome Dev Tools attributes it to the Layout process). At this time, the browser has built the DOM and obtained the CSS style. What needs to be done at this time is to match the style with the nodes on the DOM. What the browser needs to do in order to improve performance is fast matching.

First of all, we must make it clear that the browser is looking for the corresponding rule for a "visible" node. This is different from the jQuery selector. The latter uses a rule to find the corresponding node, so from left to Right might be faster. But for the former, due to the huge size of CSS, there may be thousands of rules in a CSS file, and for the current node, most of the rules cannot be matched. If you think about it for a moment, you will know that if you start matching from the right (also from the right) Starting from a more precise position), most of the inappropriate nodes can be eliminated faster. If you start from the left, you will only find the matching failure when you go deeper. If most of the rules are deeper in level, it will be a waste of resources.

In addition to the above, we also mentioned earlier that DOM construction is "step-by-step", and DOM does not block Render Tree construction (only CSSOM blocks). This is also to allow elements to be rendered earlier on the page.

Consider the following situation. If we build only part of the DOM at this time and the CSSOM is completed, the browser will build the Render Tree.

At this time, for each node, if a rule is found that matches from right to left, we only need to observe whether the parent node of the node matches layer by layer, and its parent node must already be on the DOM at this time.

But conversely, we may match a node that does not yet exist on the DOM, and the matching process at this time wastes resources.

20. What are the methods to optimize and improve CSS performance?

Avoid over-constraints
Avoid descendant selectors
Avoid chain selection Symbols
Use compact syntax
Avoid unnecessary namespaces
Avoid unnecessary The repetition of
is best to use semantic names. A good class name should describe what it is rather than something like
Avoid !important and choose other selectors if possible
To streamline rules, you can merge repeated rules in different categories

21. What is the difference if the style tag is written before or after the body?

The page loads from top to bottom. Of course, the style is loaded first.

is written after the body tag. Since the browser parses the HTML document line by line, parsing the style sheet written at the end (outline or written in the style tag) will cause the browser to stop the previous rendering. , wait for loading and parsing of the style sheet before re-rendering. FOUC phenomenon may occur under IE in Windows (i.e. page flickering problem caused by style failure)

22. Setting the vertical percentage of the element Is it relative to the height of the container?

When setting the width of an element as a percentage, it is calculated relative to the width of the parent container. However, for some attributes that represent vertical distance, such as padding-top, padding-bottom , margin-top, margin-bottom, etc., when setting them by percentage, they are also based on the width of the parent container, not the height.

23. What is the difference between transition and animation?

transition is a transition attribute, which is overemphasized. Its implementation needs to trigger an event (such as mouse movement, focus, click, etc.) before executing the animation. . It is similar to flash tweening animation, setting a start keyframe and an end keyframe.
animation is an animation attribute. Its implementation does not require triggering events. It can be executed by itself after setting the time, and an animation can be looped. It is also similar to flash tween animation, but it can set multiple keyframes (defined with @keyframe) to complete the animation.

24. Tell me about your understanding of the box model?

When laying out a document, the browser's rendering engine will represent all elements as a A rectangular box (box)

A box consists of four parts: content, padding, border, margin

Standard box model: Standard box model, which is the default box model of the browser

[Compilation and sharing] 75 high-frequency test points in CSS for front-end interviews

As you can see from the picture above ：

The total width of the box = width padding border margin;
The total height of the box = height padding border margin

That is, width/ height is just the content height, not including padding and border value

So in the above question, width is set to 200px, but because padding exists, but the width of the box is actually 240px

IE weird box model

[Compilation and sharing] 75 high-frequency test points in CSS for front-end interviews

from above As you can see from the picture:

The total width of the box = width margin;
The total height of the box = height margin;

That is, width /height contains padding and border values

25. What is Atom CSS? What are the advantages and disadvantages?

Atom CSS: Atomic CSS means that a class only does one thing.

Different from commonly used BEM rules, atomic css means splitting, and all CSS classes have a unique CSS rule

Advantages

Reduces the size of css and improves css reuse
Reduces the complexity of naming

Disadvantages

Increased memory cost. After splitting CSS into atoms, you must remember some classes before writing. Even if tailwindcss provides a complete tool chain, when you write background, you must remember that the beginning is bg.
Increases the complexity of the html structure. When the entire dom has such a class name, it will inevitably cause trouble in debugging. Sometimes it is difficult to locate specific css problems
你仍需要起class名。对于大部分属性而言，你可以只用到center,auto，100%，这些值，但是有时候你仍需要设定不一样的参数值，例如left，top，这时候你还需要起一个class名

26. 脱离文档流有哪些方法？

float：使用 float 脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。
absolute：absolute 称为绝对定位，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。
fixed: 固定定位，完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）

27. CSSOM树和DOM树是同时解析的吗？

浏览器会下载 HTML 解析页面生成 DOM 树，遇到 CSS 标签就开始解析 CSS，这个过程不会阻塞，但是如果遇到了 JS 脚本，此时假如 CSSOM 还没有构建完，需要等待 CSSOM 构建完，再去执行 JS 脚本，然后再执行 DOM 解析，此时会阻塞。

28. CSS Sprites 是什么，如何使用？

CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。

优点：

减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；

缺点：

图片合成比较麻烦；
背景设置时，需要得到每一个背景单元的精确位置；
维护合成图片时，最好只是往下加图片，而不要更改已有图片。

29. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

30. canvas 在标签上设置宽高，与在 style 中设置宽高有什么区别？

canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。
而style的width和height是canvas在浏览器中被渲染的高度和宽度。
如果canvas的width和height没指定或值不正确，就被设置成默认值。

31. 相邻的两个 inline-block 节点为什么会出现间隔，该如何解决？

真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：

<input> <input>

Copy after login

[Compilation and sharing] 75 high-frequency test points in CSS for front-end interviews

我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题

这种表现是符合规范的应该有的表现。

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

不过，这类间距有时会对我们布局，或是兼容性处理产生影响，以下展示几种方法去掉

移除空格：元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了

使用margin负值

.space a { 
    display: inline-block; 
    margin-right: -3px; 
}

Copy after login

使用font-size:0

.space { font-size: 0; } 
.space a { font-size: 12px; }

Copy after login

使用letter-spacing

.space { letter-spacing: -3px; } 
.space a { letter-spacing: 0; }

Copy after login

使用word-spacing

.space { word-spacing: -6px; } 
.space a { word-spacing: 0; }

Copy after login

32. Sass、Less 是什么？为什么要使用他们？

他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。

它们的优点？

结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

33. CSS3 新增伪类有哪些？

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中
...

34. CSS 动画和 JS 实现动画分别有哪些优缺点？

1. CSS动画

优点

浏览器可以对动画进行优化
代码相对简单,性能调优方向固定
对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

缺点

运行过程控制较弱,无法附加事件绑定回调函数
代码冗长，想用CSS实现稍微复杂一点动画,最后CSS代码都会变得非常笨重

2. JS 动画

优点

控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成
CSS3有兼容性问题，而JS大多时候没有兼容性问题

缺点

代码的复杂度高于CSS动画
JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况

35. 为什么会出现浮动？什么时候需要清除浮动？清除浮动的方式有哪些？

什么是浮动：浮动（float）最初是为了让文字环绕图片排布，就想报纸上面的图文混排模式。但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法。

什么时候需要清除浮动：

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

父级div定义height
最后一个浮动元素后加空div标签并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom

36. IconFont 的原理是什么？

IconFont 的使用原理来自于 css 的 @font-face 属性。

这个属性用来定义一个新的字体，基本用法如下：

@font-face { 
    font-family: <yourfontname>; 
    src: <url> [<format>],[<source> [<format>]], *; 
    [font-weight: <weight>]; 
    [font-style: <style>]; 
}</style></weight></format></source></format></url></yourfontname>

Copy after login

font-family：为载入的字体取名字。
src：[url]加载字体，可以是相对路径，可以是绝对路径，也可以是网络地址。[format]定义的字体的格式，用来帮助浏览器识别。主要取值为：【truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。
font-weight：定义加粗样式。
font-style：定义字体样式。

37. 分析比较 opacity:0、visibility:hidden、display:none 优势和使用场景

可以从以下三点进行分析

1. 结构

display: none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击
visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

2. 继承

display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显示。

3. 性能

display: none: 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
visibility: hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
opacity: 0:修改元素会造成重绘，性能消耗较少

38. CSS 中有哪些定位方式？（position有哪些属性值？）

static: 这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。

relative: 相对定位方式，相对于其原来的位置进行定位。会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。

absolute: 绝对定位方式，脱离文档流，不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位，如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位。

fixed: 绝对定位方式，直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。当父元素使用了transform的时候，会以父元素定位。

sticky: 粘性定位，可以简单理解为relative和fixed布局的混合。当粘性约束矩形在可视范围内为relative，反之，则为fixed粘性定位元素如果和它的父元素一样高，则垂直滚动的时候，粘性定位效果是不会出现的，它的定位效果完全受限于父级元素们。

39. flexbox(弹性盒布局模型)是什么，使用什么场景？

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局

采用Flex布局的元素，称为flex容器container

它的所有子元素自动成为容器成员，称为flex项目item

[Compilation and sharing] 75 high-frequency test points in CSS for front-end interviews

容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向。每根轴都有起点和终点，这对于元素的对齐非常重要

关于flex常用的属性，我们可以划分为容器属性和容器成员属性

容器属性有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

容器成员属性有： order、flex-grow、flex-shrink、flex-basis、flex、align-self

更多属性写法可前往 MDN-flex 查看

40. When will the z-index attribute become invalid?

Usually z-index is used when there are two overlapping labels. Under certain circumstances, one of them can be controlled to appear above or below the other. The larger the z-index value, the higher it is. The position attribute of the z-index element needs to be relative, absolute or fixed.

The z-index attribute will be invalid under the following circumstances:

When the position of the parent element is relative, the z-index of the child element will be invalid. Solution: Change the position of the parent element to absolute or static; the
element does not set the position attribute to a non-static attribute. Solution: Set the position attribute of the element to one of relative, absolute or fixed; the
element also sets float while setting z-index. Solution: Remove float and change to display: inline-block;

41. How to trigger BFC and what are the application scenarios of BFC?

Click to go to:BFC on front-end layout

42. Will CSS loading cause blocking?

Let me draw the conclusion first:

css loading will not block the parsing of the DOM tree
css loading will block the rendering of the DOM tree
css loading will block the execution of subsequent js statements

In order to avoid letting users see a long white screen time, we should improve the css loading speed as much as possible. For example, you can use the following methods :

Use CDN (because CDN will select the nearest node with cached content to provide you with resources based on your network conditions, so it can reduce loading time)
Compress css (you can use many packaging tools, such as webpack, gulp, etc., or you can enable gzip compression)
Use cache reasonably ( It is good to set cache-control, expires, and E-tag, but one thing to note is that after the file is updated, you need to avoid the impact of caching. One solution is to add a version number after the file name. )
Reduce the number of http requests, merge multiple css files, or simply write inline styles directly (one disadvantage of inline styles is that they cannot be cached)

43. Briefly talk about the process of browser rendering

The process of browser rendering is as follows:

HTML parsing file , generate DOM Tree, parse CSS files to generate CSSOM Tree
Combine Dom Tree and CSSOM Tree to generate Render Tree
Render and draw according to the Render Tree, rendering pixels to the screen.

We can see from the process:

DOM parsing and CSS parsing are two parallel processes, so this also explains why CSS Loading does not block DOM parsing.
However, since Render Tree depends on DOM Tree and CSSOM Tree, it must wait until the CSSOM Tree is built, that is, the CSS resource loading is completed (or the CSS resource loading fails) After that, rendering can start. Therefore, CSS loading will block Dom rendering.
Since js may operate on previous Dom nodes and css styles, the browser will maintain the order of css and js in html. Therefore, the style sheet will be loaded and executed before the subsequent js is executed. Therefore, css will block the execution of subsequent js.

44. How do js and css affect DOM tree construction?

Click to go to:How do js and css affect DOM tree construction?

45. How to understand reflow and redraw? Under what circumstances will it be triggered?

Click to go to:"Reflow Redraw" of the front-end page

##46. What is responsive design? What are the basic principles of responsive design? How to implement it?

What is: Responsive Web design is a web page design layout. The design and development of the page should be based on user behavior and device environment (system platform) , screen size, screen orientation, etc.) to respond and adjust accordingly

The most famous sentence describing the responsive interface is "Content is like water", and the vernacular is "If the screen is regarded as a container, then Content is like water”

Common features of responsive websites:

Tag navigation changes to when approaching a handheld terminal device Classic drawer navigation
The layout of the website will adjust the size and position of the module according to the viewport

Basic principle: The basic principle of responsive design is Detect different device screen sizes through media queries for processing Responsive design implementation usually considers the following aspects:

弹性盒子（包括图片、表格、视频）和媒体查询等技术
使用百分比布局创建流式布局的弹性UI，同时使用媒体查询限制元素的尺寸和内容变更范围
使用相对单位使得内容自适应调节
选择断点，针对不同断点实现不同布局和内容展示

总结：

响应式布局优点：

面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题

缺点：

仅适用布局、信息、框架并不复杂的部门类型网站
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

47. 说说对 CSS 预编语言的理解，主流的有哪些？

理解： 预处理语言扩充了css语言，增加了诸如变量、混合（mixin）、函数等功能，让 css 更易维护、方便。本质上，预处理是css的超集，包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 css 文件

有哪些： css预编译语言在前端里面有三大优秀的预编处理器，分别是：sass、less、stylus

48. CSS 中1像素问题是什么？有哪些解决方案？

1px边框问题由来：苹果 iPhone4 首次提出了 Retina Display（视网膜屏幕）的概念，在 iPhone4 使用的视网膜屏幕中，把 2x2 个像素当 1 个物理像素使用，即使用 2x2 个像素显示原来 1 个物理像素显示的内容，从而让 UI 显示更精致清晰，这 2x2 个像素叫做逻辑像素。

像这种像素比（像素比（即dpr）＝物理像素 / 逻辑像素）为 2 的视网膜屏幕也被称为二倍屏，目前市面上还有像素比更高的三倍屏、四倍屏。

而 CSS 中 1px 指的是物理像素，因此，设置为 1px 的边框在 dpr = 2 的视网膜屏幕中实际占用了 2 个逻辑像素的宽度，这就导致了界面边框变粗的视觉体验。

解决方案：使用 transform 解决

通过设置元素的 box-sizing 为 border-box，然后构建伪元素，再使用 CSS3 的 transform 缩放，这是目前市面上最受推崇的解决方法。这种方法可以满足所有的场景，而且修改灵活，唯一的缺陷是，对于已使用伪元素的元素要多嵌套一个无用元素。具体的实现如下：

.one-pixel-border {
  position: relative;
  box-sizing: border-box;
}

.one-pixel-border::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  border: 1px solid red;
  transform: translate(-50%, -50%) scale(0.5, 0.5);
}

Copy after login

这样就可以得到 0.5px 的边框。

还可以结合媒体查询（@media）解决不同 dpr 值屏幕的边框问题，如下：

@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  ...
}

@media screen and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  ...
}

Copy after login

当然还有不少其他的解决方案：border-image、background-image、viewport + rem + js、box-shadow等，但都有各自的缺点，不进行推荐，此处也不做详细介绍。

49. overflow:scroll 时不能平滑滚动的问题怎么处理？

以下代码可解决这种卡顿的问题：

-webkit-overflow-scrolling: touch;

Copy after login

是因为这行代码启用了硬件加速特性，所以滑动很流畅。

50. CSS 单位中 px、em 和 rem 的区别？

px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位
em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值
rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素

区别： IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。

51. How to use CSS to improve page performance?

Click to go to:How to use CSS to improve page performance?

52. What is the difference between letter-spacing and word-spacing?

letter-spacing works on all characters, but word-spacing only works on space characters. In other words, the role of word-spacing is to increase the gap width of spaces.

53. What is dependency-free absolute positioning?

Absolute positioning without setting the left/top/right/bottom attribute value is called "dependency-free absolute positioning". The position of dependency-free absolute positioning is related to the position when position:absolute is not set.

54. Cascading guidelines?

(1) Whoever is bigger is on top: When there is an obvious stacking level identifier, such as the effective z-index attribute value, in the same stacking context field, the one with the larger stacking level value Cover the smaller one.

(2) Coming from behind: When the stacking levels of elements are consistent and the stacking order is the same, the later elements in the DOM flow will overwrite the previous elements.

55. What are the special characteristics of font-weight?

If you use a numerical value as the font-weight attribute value, it must be an integer from 100 to 900. Because the numerical value here only looks like a numerical value, it is actually a keyword with a specific meaning, and there is a corresponding relationship between the numerical keyword and the letter keyword here.

56. What are the special features of text-indent?

(1) text-indent is only valid for the first line of inline box content.

(2) The text-indent value set for inline elements other than non-replaced elements whose display calculated value is inline is invalid. If the calculated value is inline-block/inline-table, it will take effect.

（3）<input>The label button text-indent value is invalid.

(4)<button></button>The label button text-indent value is valid.

(5) The percentage value of text-indent is calculated relative to the "containing block" of the current element, not the current element.

57. What are the advantages and disadvantages of using rem layout?

Advantages: In an era where screen resolutions vary widely, as long as rem is associated with the screen resolution, the overall scaling of the page can be achieved, so that the display on the device is unified. Woke up. Moreover, most browsers now support rem, and the compatibility is also very good.

Disadvantages:

(1) The performance is not very good on strange DPR devices. For example, some high-end models of Huawei will have confusing rem layouts.

(2) There will also be problems using iframe references.

(3) rem is inconsistent with the design philosophies of the current two major platforms in adapting to multiple screen sizes. That is, whether the emergence of large screens is to see bigger and clearer things, or to see more. question.

58. What is the preferred minimum width?

"Preferred minimum width" refers to the minimum width that the element is most suitable for. The minimum width for East Asian scripts (such as Chinese) is the width of each Chinese character. The minimum width of Western text is determined by a specific contiguous unit of English characters. Not all English characters form continuous units, and generally terminate with spaces (ordinary spaces), dashes, question marks, and other non-English characters.

If you want English characters to be the same as Chinese, and each character uses the minimum width unit, you can try using word-break:break-all in CSS.

59. Why is height:100% invalid?

For elements in ordinary document flow, for the percentage height value to work, its parent must have a height value that can take effect.

The reason is that if the height of the containing block is not explicitly specified (that is, the height is determined by the content), and the element is not absolutely positioned, the calculated value is auto. Because it is interpreted as auto, it cannot participate in the calculation.

Elements that use absolute positioning will have a calculated value, even if the height of the ancestor element is calculated as auto.

60. Override rules between min-width/max-width and min-height/max-height attributes?

(1) max-width will override width, even if width is a row style or !important is set.

(2) min-width will override max-width. This rule occurs when min-width and max-width conflict.

61. What is the inline box model?

(1) Content area. The content area refers to an invisible box surrounding the text. Its size is only controlled by the characteristics of the character itself. It is essentially a character box. (character box); but for some elements, such as replacement elements such as pictures, the content is obviously not text, and there is no such thing as a character box. Therefore, for these Element, the content area can be regarded as the element itself.

（2）内联盒子（inline box）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类。

（3）行框盒子（line box），每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。

（4）包含块（containing box），由一行一行的“行框盒子”组成。

62. content 与替换元素的关系？

content属性生成的对象称为“匿名替换元素”。

（1）我们使用content生成的文本是无法选中、无法复制的，好像设置了user select:none声明一般，但是普通元素的文本却可以被轻松选中。同时，content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是地把重要的文本信息使用content属性生成，因为这对可访问性和SEO都很不友好。

（2）content生成的内容不能左右:empty伪类。

（3）content动态生成值无法获取。

63. margin:auto 的填充规则？

margin的'auto'可不是摆设，是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。但是触发mar gin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。

（1）如果一侧定值，一侧auto，则auto为剩余空间大小。

（2）如果两侧均是auto，则平分剩余空间。

64. overflow 的特殊性？

（1）一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，则当子元素内容超出容器宽度高度限制的时候，剪裁的边界是border box的内边缘，而非padding box的内边缘。

（2）HTML中有两个标签是默认可以产生滚动条的，一个是根元素，另一个是文本域。

（3）滚动条会占用容器的可用宽度或高度。

（4）元素设置了overflow:hidden声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在！

代码篇

1. 下面代码中，p标签的背景色是什么？

<style>
     #parent p { background-color: red;  }
      div .a.b.c.d.e.f.g.h.i.j.k p{ background-color: green;  
</style>
......
<div>
     <div>
         <p>xxxx</p>
     </div>
</div>

Copy after login

大家需要注意，权重是按优先级进行比较的，而不是相加规则。

答案：red。

2. 假设下面样式都作用于同一个节点元素span，判断下面哪个样式会生效？

body#god div.dad span.son {
    width: 200px;
}
body#god span#test {
    width: 250px;
}

Copy after login

本题考察css的样式优先级权重，大家需要记住：

当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如权值 1,0,0,0 对应--> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000个数 + 100个数 + 10个数 + 1个数的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。所以本题的分析思路是：

先比较高权重位，即第一个样式的高权重为 #god = 100
第二个样式的高权重为 #god + #text = 200
100
所以最终计算结果是取 width: 250px;
若两个样式的高权重数量一样的话，则需要比较下一个高权重！

答案：width: 250px;

3. 第二个子元素的高度是多少？

<div>
    <div></div>
    <div></div>
</div>
<style>
    .container{
        display: flex;
    }
    .container > div {
        width: 100px;
    }
</style>

Copy after login

Flex 布局会默认：

把所有子项变成水平排列。
默认不自动换行。
让子项与其内容等宽，并把所有子项的高度变为最高子项的高度。

答案：100px

手写篇

1. 如何从 html 元素继承 box-sizing

html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
}

Copy after login

2. 如何使用css来实现禁止移动端页面的足有滑动手势？

最简单的方法：

html { 
    touch-action: none; 
    touch-action: pan-y; 
}

Copy after login

还可以直接指定对应元素的宽度和overflow：

html { 
    width: 100vw; 
    overflow-x: hidden; 
}

Copy after login

3. 如何使用 CSS 画一个三角形

.box {
   width: 0;
   height: 0;
   border-style:solid;
   border-width: 0 50px 50px;
   border-color: transparent transparent #d9534f;
}

Copy after login

4. 如何实现两栏布局，右侧自适应？三栏布局中间自适应？

两栏布局

浮动实现

  <style>
    .box{
       overflow: hidden; 
    }
    .left {
       float: left;
       width: 200px;
       background-color: gray;
       height: 400px;
    }
    .right {
       margin-left: 210px;
       background-color: lightgray;
       height: 200px;
    }
</style>
<div>
    <div>左边</div>
    <div>右边</div>
</div>

Copy after login

flex实现

  <style>
    .box{
       display: flex;
    }
    .left {
       width: 100px;
       background-color: skyblue;
       height: 400px;
    }
    .right {
       flex: 1;
       background-color: pink;
       height: 200px;
    }
  </style>
  <div>
    <div>左边</div>
    <div>右边</div>
  </div>

Copy after login

三栏布局

  <style>
    .wrap {
        display: flex;
        justify-content: space-between;
    }
    .left,
    .right,
    .middle {
        height: 500px;
    }
    .left {
        width: 200px;
        background: coral;
    }
    .right {
        width: 120px;
        background: lightblue;
    }
    .middle {
        background: #555;
        width: 100%;
        margin: 0 20px;
    }
  </style>
  <div>
    <div>左侧</div>
    <div>中间</div>
    <div>右侧</div>
  </div>

Copy after login

5. 单行文本如何实现两端对齐

方法一：添加一行

根据justify对最后一行无效，我们可以新增一行，使该行文本不是最后一行，实现如下：

<style>
//scss
  .item {
      height: 32px;
      line-height: 32px;
      margin-bottom: 8px;
      .label {
          display: inline-block;
          height: 100%;
          width: 100px;
          text-align: justify;
          vertical-align: top;
          &::after {
              display: inline-block;
              width: 100%;
              content: &#39;&#39;;
              height: 0;
          }
      }
      .value {
          padding-right: 10px;
      }
  }
</style>
  <div>
    <span>哈哈哈</span>：
    <span>哈哈哈</span>
  </div>

Copy after login

方法二： text-align-last

text-align-last，该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。

   //scss
  .item {
      margin-bottom: 8px;
      .label {
          display: inline-block;
          height: 100%;
          min-width: 100px;
          text-align: justify;
          text-align-last: justify;
      }
      .value {
          padding-right: 10px;
      }
  }

Copy after login

6. 使用 CSS 实现一个无限循环动画

  <style>
   .anima {
      width: 800px;
      height: 600px;
      animation-name: likes; 
      animation-direction: alternate; 
      animation-timing-function: linear;
      animation-delay: 0s;
      animation-iteration-count: infinite;
      animation-duration: 1s; 
    }

  @keyframes likes {
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(0.9);
    }
    50%{
        transform: scale(0.85);
    }
    75%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1);
    }
  }
  </style>
  <image></image>

Copy after login

7. 如何实现单行、多行文本溢出隐藏？

单行文本溢出隐藏

<style>
   div {
      width: 100px;
      height: 100px;
      /* 溢出隐藏 */
      overflow: hidden;           
      /* 溢出用省略号显示 */
      text-overflow: ellipsis;   
      /* 规定段落中的文本不进行换行   */
      white-space: nowrap;  
   }
  </style>
  <div>
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  </div>

Copy after login

多行文本溢出隐藏

<style>
   div {
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      /* 作为弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 显示的行数 */
      -webkit-line-clamp: 3;
      /* 设置伸缩盒子的子元素排列方式：从上到下垂直排列 */
      -webkit-box-orient: vertical;
   }
  </style>
  <div>
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  </div>

Copy after login

8. CSS 垂直居中有哪些实现方式？

我们在布局一个页面时，通常都会用到水平居中和垂直居中，处理水平居中很好处理，不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题就是「垂直居中」，以下将介绍几种单纯利用CSS垂直居中的方式，只需要理解背后的原理就可以轻松应用。

下面为公共代码：

<style>
.box {
  width: 300px;
  height: 300px;
  background: #ddd;
}
.small {
  background: red;
}
</style>


    <div>
        <div>small</div>
    </div>

Copy after login

1. absolute + margin实现

方法一：

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
  }

Copy after login

方法二：

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100px;
    height: 100px;
  }

Copy after login

2. absolute + calc 实现

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
  }

Copy after login

3. absolute + transform 实现

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 100px;
    height: 100px;
  }

Copy after login

4. 转行内元素

  .box {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
  }
  .small {
    padding: 6px 10px;
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: 16px;
  }

Copy after login

5. 使用flex

方法一：

  .box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

Copy after login

方法二：

  .box {
    display: flex;
    justify-content: center;
  }
  .small {
    align-self: center;
  }

Copy after login

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of [Compilation and sharing] 75 high-frequency test points in CSS for front-end interviews. For more information, please follow other related articles on the PHP Chinese website!