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](https://img.php.cn/upload/article/000/000/024/635bc3ba4703e774.jpg)
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 】
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.
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
1. Common inline elements
<span>, <a>, <lable>, <strong>, <b>, < ;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 | 不支持 | 支持 | 支持 |
| 子元素可复原 | 不能 | 能 | 不能 |
| 被遮挡的元素可触发事件 | 能 | 能 | 不能 |
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.
Performance
Performance
##Selectors: Universal sibling selector, pseudo-class selector, pseudo-element selector, negative selector, state pseudo-class selector
New style: border, box-shadow, background, text, color
background-clip, background-origin, background-size and background-break
: transition
Transition：transform
animation：animation
Other：gradient, flexFlexible layout, GridGrid layout, media queries, blending modes, etc...
and transition smoother.
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.
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
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)
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.
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.
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
As you can see from the picture above ：
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](https://img.php.cn/upload/image/590/447/875/1666887581602320.png "1666887581602320.png")
from above As you can see from the picture:
That is, width /height contains padding and border values
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名
float：使用 float 脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。
absolute：absolute 称为绝对定位，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。
fixed: 固定定位，完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）
浏览器会下载 HTML 解析页面生成 DOM 树，遇到 CSS 标签就开始解析 CSS，这个过程不会阻塞，但是如果遇到了 JS 脚本，此时假如 CSSOM 还没有构建完，需要等待 CSSOM 构建完，再去执行 JS 脚本，然后再执行 DOM 解析，此时会阻塞。
CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。
优点：
缺点：
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。
而style的width和height是canvas在浏览器中被渲染的高度和宽度。
如果canvas的width和height没指定或值不正确，就被设置成默认值。
真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：
<input> <input>
我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题
这种表现是符合规范的应该有的表现。
元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。
不过，这类间距有时会对我们布局，或是兼容性处理产生影响，以下展示几种方法去掉
移除空格：元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了
使用margin负值
![[Compilation and sharing] 75 high-frequency test points in CSS for front-end interviews](https://img.php.cn/upload/image/687/914/248/166688757353801%5BCompilation%20and%20sharing%5D%2075%20high-frequency%20test%20points%20in%20CSS%20for%20front-end%20interviews "166688757353801[Compilation and sharing] 75 high-frequency test points in CSS for front-end interviews")
![[Compilation and sharing] 75 high-frequency test points in CSS for front-end interviews](https://img.php.cn/upload/image/520/985/572/166688759654604%5BCompilation%20and%20sharing%5D%2075%20high-frequency%20test%20points%20in%20CSS%20for%20front-end%20interviews "166688759654604[Compilation and sharing] 75 high-frequency test points in CSS for front-end interviews")
.space a {
display: inline-block;
margin-right: -3px;
}使用font-size:0
.space { font-size: 0; }
.space a { font-size: 12px; }使用letter-spacing
.space { letter-spacing: -3px; }
.space a { letter-spacing: 0; }使用word-spacing
.space { word-spacing: -6px; }
.space a { word-spacing: 0; }他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。
它们的优点？
结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理， 减少无意义的机械劳动。
可以轻松实现多重继承。 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。
1. CSS动画
优点
CSS3可以做到自然降级，而JS则需要撰写额外代码缺点
CSS实现稍微复杂一点动画,最后CSS代码都会变得非常笨重2. JS 动画
优点
css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成CSS3有兼容性问题，而JS大多时候没有兼容性问题缺点
CSS动画JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况什么是浮动：浮动（float）最初是为了让文字环绕图片排布，就想报纸上面的图文混排模式。但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法。
什么时候需要清除浮动：
清除浮动的方式：
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>可以从以下三点进行分析
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:修改元素会造成重绘，性能消耗较少static:
这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。
relative: 相对定位方式，相对于其原来的位置进行定位。会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。
absolute: 绝对定位方式，脱离文档流，不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位，如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位。
fixed: 绝对定位方式，直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。
当父元素使用了transform的时候，会以父元素定位。
sticky: 粘性定位，可以简单理解为relative和fixed布局的混合。当粘性约束矩形在可视范围内为relative，反之，则为fixed粘性定位元素如果和它的父元素一样高，则垂直滚动的时候，粘性定位效果是不会出现的，它的定位效果完全受限于父级元素们。
Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局
采用Flex布局的元素，称为flex容器container
它的所有子元素自动成为容器成员，称为flex项目item
![[Compilation and sharing] 75 high-frequency test points in CSS for front-end interviews](https://img.php.cn/upload/image/895/778/594/1666887663567370.png "1666887663567370.png")
容器中默认存在两条轴，主轴和交叉轴，呈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 查看
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;
Click to go to:BFC on front-end layout
Let me draw the conclusion first:
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)
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.
Click to go to:How do js and css affect DOM tree construction?
Click to go to:"Reflow Redraw" of the front-end page
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: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:
总结：
响应式布局优点：
缺点：
理解： 预处理语言扩充了css语言，增加了诸如变量、混合（mixin）、函数等功能，让 css 更易维护、方便。本质上，预处理是css的超集，包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 css 文件
有哪些： css预编译语言在前端里面有三大优秀的预编处理器，分别是：sass、less、stylus
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);
}这样就可以得到 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) {
...
}当然还有不少其他的解决方案：border-image、background-image、viewport + rem + js、box-shadow等，但都有各自的缺点，不进行推荐，此处也不做详细介绍。
以下代码可解决这种卡顿的问题：
-webkit-overflow-scrolling: touch;
是因为这行代码启用了硬件加速特性，所以滑动很流畅。
px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一 个虚拟长度单位，是计算机系统的数字化图像长度单位
em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字 体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大 小，因此并不是一个固定的值
rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字 体大小时，仍然是相对大小，但相对的只是 HTML 根元素
区别： IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐 层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。
Click to go to:How to use CSS to improve page performance?
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.
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.
(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.
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.
(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.
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.
"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.
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.
(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.
(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），由一行一行的“行框盒子”组成。
content属性生成的对象称为“匿名替换元素”。
（1）我们使用content生成的文本是无法选中、无法复制的，好像设置了user select:none声明一般，但是普通元素的文本却可以被轻松选中。同时，content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是地把重要的文本信息使用content属性生成，因为这对可访问性和SEO都很不友好。
（2）content生成的内容不能左右:empty伪类。
（3）content动态生成值无法获取。
margin的'auto'可不是摆设，是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。但是触发mar gin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。
（1）如果一侧定值，一侧auto，则auto为剩余空间大小。
（2）如果两侧均是auto，则平分剩余空间。
（1）一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，则当子元素内容超出容器宽度 高度限制的时候，剪裁的边界是border box的内边缘，而非padding box的内边缘。
（2）HTML中有两个标签是默认可以产生滚动条的，一个是根元素，另一个是文本域。
（3）滚动条会占用容器的可用宽度或高度。
（4）元素设置了overflow:hidden声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在！
<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>大家需要注意，权重是按优先级进行比较的，而不是相加规则。
答案：red。
body#god div.dad span.son {
width: 200px;
}
body#god span#test {
width: 250px;
}本题考察css的样式优先级权重，大家需要记住：
当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如 权值 1,0,0,0 对应--> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000个数 + 100个数 + 10个数 + 1个数 的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。 所以本题的分析思路是：
#god = 100#god + #text = 200width: 250px;
答案：width: 250px;
<div>
<div></div>
<div></div>
</div>
<style>
.container{
display: flex;
}
.container > div {
width: 100px;
}
</style>Flex 布局会默认：
答案：100px
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}最简单的方法：
html {
touch-action: none;
touch-action: pan-y;
}还可以直接指定对应元素的宽度和overflow：
html {
width: 100vw;
overflow-x: hidden;
}.box {
width: 0;
height: 0;
border-style:solid;
border-width: 0 50px 50px;
border-color: transparent transparent #d9534f;
}两栏布局
浮动实现
<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>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>三栏布局
<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>方法一：添加一行
根据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: '';
height: 0;
}
}
.value {
padding-right: 10px;
}
}
</style>
<div>
<span>哈哈哈</span>：
<span>哈哈哈</span>
</div>方法二： 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;
}
} <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>单行文本溢出隐藏
<style>
div {
width: 100px;
height: 100px;
/* 溢出隐藏 */
overflow: hidden;
/* 溢出用省略号显示 */
text-overflow: ellipsis;
/* 规定段落中的文本不进行换行 */
white-space: nowrap;
}
</style>
<div>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>多行文本溢出隐藏
<style>
div {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
/* 作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 显示的行数 */
-webkit-line-clamp: 3;
/* 设置伸缩盒子的子元素排列方式：从上到下垂直排列 */
-webkit-box-orient: vertical;
}
</style>
<div>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>我们在布局一个页面时，通常都会用到水平居中和垂直居中，处理水平居中很好处理，不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题就是「垂直居中」，以下将介绍几种单纯利用CSS垂直居中的方式，只需要理解背后的原理就可以轻松应用。
下面为公共代码：
<style>
.box {
width: 300px;
height: 300px;
background: #ddd;
}
.small {
background: red;
}
</style>
<div>
<div>small</div>
</div>
1. absolute + margin实现
方法一：
.box {
position: relative;
}
.small {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
width: 100px;
height: 100px;
}方法二：
.box {
position: relative;
}
.small {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100px;
height: 100px;
}2. absolute + calc 实现
.box {
position: relative;
}
.small {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
width: 100px;
height: 100px;
}3. absolute + transform 实现
.box {
position: relative;
}
.small {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 100px;
height: 100px;
}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;
}5. 使用flex
方法一：
.box {
display: flex;
justify-content: center;
align-items: center;
}方法二：
.box {
display: flex;
justify-content: center;
}
.small {
align-self: center;
}更多编程相关知识，请访问：编程视频！！
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!
![The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
