20 basic CSS interview questions

This article mainly shares a basic CSS interview question with you, which has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to have a look.

1 Introduce the standard CSS box model? How is it different from the box model of lower versions of IE?

Standard box model: width = content width (content) + border + padding + margin
Low version IE box model: width = content width (content + border +padding) + margin

Special recommendation:Summary of CSS interview questions in 2020 (latest)

Used to control the parsing mode of the element's box model, the default is content-box
context-box: W3C's standard box model, setting the height/width attribute of the element refers to the height/width of the content part
border-box: IE traditional box model. Setting the height/width attributes of an element refers to the height/width of the border + padding + content part

3 What are the CSS selectors? What properties can be inherited?

CSS selectors: id selector (#myid), class selector (.myclassname), tag selector (p, h1, p), adjacent selector (h1 + p), child selector (ul > li), descendant selector (li a), wildcard selector (*), attribute selector (a[rel="external"]), pseudo-class selector ( a:hover, li:nth-child)

Inheritable properties: font-size, font-family, color

Not inheritable Style: border, padding, margin, width, height

Priority (proximity principle): !important > [ id > class > tag ]
!important than within High connection priority

#4 How is the CSS priority algorithm calculated?

Element selector: 1
class selector: 10
id selector: 100
Element tag: 1000

1. !important The style declared has the highest priority. If there is a conflict, it will be calculated again.

2. #If the priorities are the same, the style that appears last is selected.

3. #The inherited style has the lowest priority.

5 What are the new pseudo-classes in CSS3?

p:first-of -type selects the first element that belongs to its parent element
p:last-of-type selects the last element that belongs to its parent element
p:only-of-type selects the only element that belongs to its parent element
p:only-child selects the only child element that belongs to its parent element
p:nth-child(2) selects the second child element that belongs to its parent element
:enabled :disabled The disabled state of the form control.
:checked The radio button or check box is selected.

6 How to center p? How to center a floated element? How to center an absolutely positioned p?

p：

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

Center the top, bottom, left and right of floating elements:

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

Absolute positioning left and right center:

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

还有更加优雅的居中方式就是用flexbox，以后会做整理。

7 display有哪些值？说明他们的作用?

inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block

8 position的值？

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

9 CSS3有哪些新特性？

1. RGBA和透明度

2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

3. word-wrap（对长的不可分割单词换行）word-wrap：break-word

4. 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）

5. font-face属性：定义自己的字体

6. 圆角（边框半径）：border-radius 属性用于创建圆角

7. 边框图片：border-image: url(border.png) 30 30 round

8. 盒阴影：box-shadow: 10px 10px 5px #888888

9. 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

10 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

11 用纯CSS创建一个三角形的原理是什么？

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

12 一个满屏品字布局如何设计?

第一种真正的品字：

1. 三块高宽是确定的；

2. 上面那块用margin: 0 auto;居中；

3. 下面两块用float或者inline-block不换行；

4. 用margin调整位置使他们居中。

第二种全屏的品字布局:

上面的p设置成100%，下面的p分别宽50%，然后使用float或者inline使其不换行。

13 常见的兼容性问题？

1. 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}

2. IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。

3. 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

4. {
   background-color:#f1ee18;/*所有识别*/
   .background-color:#00deff\9; /*IE6、7、8识别*/
   +background-color:#a200ff;/*IE6、7识别*/
   _background-color:#1e0bd1;/*IE6识别*/
   }

5. 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

6. IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

7. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

8. 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

14 为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

15 absolute的containing block计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

1. 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；

2. 否则,则由这个祖先元素的 padding box 构成。

如果都找不到，则为 initial containing block。

补充：

1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）

2. absolute: 向上找最近的定位为absolute/relative的元素

3. fixed: 它的containing block一律为根元素(html/body)

16 CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

1. chrome中，使用collapse值和使用hidden没有区别。

2. firefox, opera and IE, there is no difference between using collapse value and display:none.

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

display: none does not display the corresponding element and no longer allocates space in the document layout (reflow + redraw)
visibility: hidden hides the corresponding element in the document The original space is still retained in the layout (redrawing)

18 What will happen when position, display, overflow, and float are superimposed on each other?

The display attribute specifies the type of box that the element should generate; the position attribute specifies the positioning type of the element; the float attribute is a layout method that defines in which direction the element floats.
Similar to the priority mechanism: position: absolute/fixed has the highest priority. When they are present, float does not work and the display value needs to be adjusted. Elements positioned by float or absolute can only be block elements or tables.

#19 Understanding the BFC specification (block formatting context)?

#BFC specifies how the internal Block Box is laid out.
Positioning scheme:

1. The internal Boxes will be placed one after another in the vertical direction.

2. The vertical distance of the Box is determined by the margin. The margins of two adjacent Boxes belonging to the same BFC will overlap.

3. The left side of the margin box of each element touches the left side of the containing block border box.

4. The BFC area will not overlap with the float box.

5. BFC is an isolated independent container on the page. The sub-elements inside the container will not affect the elements outside.

6. #When calculating the height of BFC, floating elements will also participate in the calculation.

BFC can be triggered if one of the following conditions is met

1. The root element is html

2. The value of float is not none (default)

3. The value of overflow is not visible (default)

4. The value of display is inline-block, table-cell, table-caption

5. The value of position is absolute or fixed

20 Why do floats appear and when do they need to be cleared? Way to clear float?

#The floating element stays when it encounters the border containing it or the border of the floating element. Because the floated element is not in the document flow, the document flow block box behaves as if the floated box does not exist. Floated elements float above the block box in the document flow.
Problems caused by floating:

1. The height of the parent element cannot be expanded, affecting elements at the same level as the parent element

2. Non-floating elements (inline elements) at the same level as the floating element will follow it

3. If it is not the first If an element is floated, the elements before it also need to be floated, otherwise it will affect the structure of the page display.

How to clear floats:

1. Parent p defines height

2. Add an empty p tag after the last floating element and add the style clear:both.

3. #Add the style overflow to hidden or auto to the parent tag containing the floating element.

4. Parent p definition zoom

Related tutorial recommendations: CSS video tutorial

The above is the detailed content of 20 basic CSS interview questions. For more information, please follow other related articles on the PHP Chinese website!