10 high-frequency interview questions about css in web front-end interviews

1. What is the BFC mechanism

BFC (Block Formatting Context), Block-level formatting Context is an independent rendering area that isolates elements inside the BFC from external elements so that the positioning of internal and external elements will not affect each other.

• Trigger condition (any one of the following)
  • The value of float is not none
  • The value of overflow is not visible
  • The value of display is One of table-cell, table-caption and inline-block
  • The value of position is not any one of static or releative

Under IE, Layout can be triggered through zoom:1

• The difference between BFC layout and ordinary document flow layout: BFC layout rules:
  1. Floating elements will have their height calculated by their parent (the parent element triggers BFC)
  2. Non-floating elements will not cover the position of floating elements (non-floating elements trigger BFC) )
  3. Margin will not be passed to the parent (the parent triggers BFC)
  4. The upper and lower margins of two adjacent elements belonging to the same BFC will overlap
  5. Normal document flow layout : The height of floating elements will not be calculated by the parent
  6. Non-floating elements will cover the position of floating elements
  7. margin will be passed to the parent element
  8. Two adjacent The margins above and below the element will overlap
• Application under development
  • Prevent margin overlap
  • You can include floating elements - clear internal floats (clear floating ones The principle is that both p's are located in the same BFC area)
  • Adaptive two-column layout

  • can prevent elements from being covered by floating elements

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

##2. The new selectors and attributes in CSS3

are just listed here. For specific usage, please check my article about new selectors and attributes in CSS3

Attributes Selector

##Attribute Selector

Meaning description

#E[att^="val"]

The element whose attribute att value starts with "val"

E[att$="val"]

The element whose attribute att value ends with "val"

##E[att*="val"]

The value of the attribute att contains the "val" string element

• Structure pseudo-class selector

##Similar to :nth-child() , but only matches elements using the same tag #E:nth-last-of-type(n)E:last-child##matches an element that does not contain any child elements. Note that text nodes are also considered child elements

##Selector

Meaning Description

##E :root

matches the root element of the document, which for HTML documents is the HTML element

##E:nth-child(n)

Matches the nth child of its parent element Element, the first number is 1

##E:nth-last-child(n)

Matches the nth child element from the bottom of its parent element, the first number is 1

E:nth-of-type(n)

Similar to :nth-last-child(), but only matches elements using the same tag

## Matches the last element of the parent element Child element, equivalent to:nth-last-child(1)

##E:first-of-type

Matches the first child element using the same tag under the parent element, which is equivalent to: nth-of-type(1)

##E:last-of-type

## Matches the last child element using the same tag under the parent element, which is equivalent to: nth-last-of-type(1)

E:only-child

Matches the only child element under the parent element, which is equivalent to: first-child:last- child or:nth-child(1):nth-last-child(1)

##E:only-of -type

matches the only child element using the same tag under the parent element, which is equivalent to: first-of-type:last-of- type or:nth-of-type(1):nth-last-of-type(1)

##E :empty

• css3 new attributes

##Animation effect##box-shadow##text-shadow##FF 3.5, Safari 4, Chrome 3Text truncationIE6 , Safari4, Chrome3, Opera10Automatic line wrappingFF3 , safari 4, chrome 3, opera 10 ##safari 4, chrome 3, opera 10

##Attributes	Meaning Description	Compatible
transition	##Set transition effect
##transform	Transformation effects (move, scale, rotate, stretch or stretch)
##animation
Shadow Effect	FF3.5, Safari 4, Chrome 3
##Text-shadow	FF 3.5, Opera 10, Safari 4, Chrome 3	##border -colors
##Set multiple colors for the border	## FF3	boder-image
Picture Border		text-overflow
		##word-wrap
##IE6, FF 3.5, Safari 4, Chrome 3	##border-radius	circle Corner Border
##FF 3, Safari 4, Chrome 3	opacity	##opacity
all	##box-sizing	Control box model composition mode
FF3, Opera 10, Safari 4, Chrome 3	outline	##Outer border
	# #background-size	Do not specify the size of the background image
##background-origin	Specify where to start displaying the background image	##safari 4, chrome 3, FF 3
background-clip	Specify background Where to start cropping the picture	safari 4, chrome 3
rgba	Set the color value based on the three color channels of r, g, and b, through a Set transparency	safari 4, chrome 3, FF3, opera 10

3. Centered layout

• Horizontal centering
  1. Inline elements: text-align:center
  2. Block-level elements: margin:0 auto
  3. Absolute positioning and movement: absolute transform
  4. Absolute positioning and negative margins: absolute margin
  5. flex layout: flex justify-content:center
• Vertical centering
  1. The child element is a single line of text : line-height:height
  2. ##absolute transform
  ##flex align-items:center
  3. table:
  display:table-cell; vertical-align: middle
  4. Use position and top and negative margin
  Horizontal and vertical centering

1. Known element width and height: absolute positioning margin:auto:

   p{
      width: 200px;
      height: 200px;
      background: green;

      position:absolute;
      left:0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
  }

2. Known element Width and height: Absolute positioning negative margin

   p{
      width: 200px;
      height: 200px;
      background: green;

      position:absolute;
      left:0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
  }

3. absolute transform

   p{
     width: 200px;
     height: 200px;
     background: green;

     position:absolute;
     left:50%;    /* 定位父级的50% */
     top:50%;
     transform: translate(-50%,-50%); /*自己的50% */
   }

4.flex justify-content align-items

<pre class="brush:css;toolbar:false;">.box{ height:600px; display:flex; justify-content:center; //子元素水平居中 align-items:center; //子元素垂直居中 /* aa只要三句话就可以实现不定宽高水平垂直居中。 */ } .box&gt;p{ background: green; width: 200px; height: 200px; }</pre>

4. What are the methods for clearing floats, and what are the advantages and disadvantages of each?

Use an empty element with the clear attribute and use an empty element after the floating element, such as

17c44092bca90a023c157929f44501ae94b3e26ee717c64999d7867364b1b4a3
• , and assign .clear{clear:both;} attribute in CSS to clear the float. You can also use 9bd35d0ab1399652577f51221b5af246 or 9e9608c45e9340a126bcb009bcb97e71 for cleaning.

Advantages: Simple, write a small amount of code, good compatibility Disadvantages: Adding unsemantic html elements is not conducive to code semantics, and the later maintenance cost is high

Use the overflow attribute of css to add

overflow:hidden;
• or overflow:auto; to the container of the floating element to clear the float. In addition, hasLayout needs to be triggered in IE6, for example Set the container width and height for the parent element or set zoom:1. After adding the overflow attribute, the floating element returns to the container layer, raising the height of the container, achieving the effect of cleaning up the floating elements.

Advantages: simple, less code, good browser support Disadvantages: cannot be used with position, because the excess size will be hidden

overflow:hidden

Using CSS's :after pseudo-element combined with the :after pseudo-element (note that this is not a pseudo-class, but a pseudo-element, representing the nearest element after an element) and IEhack, it is perfectly compatible with the current mainstream For major browsers, IEhack here refers to triggering hasLayout. Add a

clearfix
• class to the container of the floating element, and then add an :after pseudo-element to this class to add an invisible block element (Block element) to the end of the element to clear the float. An invisible space "020" or dot "." is added to the end of the internal element of the container through CSS pseudo-elements, and the clear attribute is assigned to clear the float. It should be noted that for IE6 and IE7 browsers, a zoom:1; must be added to the clearfix class to trigger haslayout.

Advantages: Good browser support, not prone to strange problems (currently: used by large websites, such as: Tengxun, NetEase, Sina, etc.) Disadvantages: A lot of code, requiring Only by combining the two lines of code can mainstream browsers support

Set the height of the parent element

Simple, less code, easy to master Disadvantages: Only suitable for fixed-height layouts

5. What is the principle of creating a triangle using pure CSS

When writing triangles before, they were written directly. I was stuck in code and didn’t explore the reasons. It wasn’t until I had an interview that the interviewer asked me to talk about the principle of creating triangles with css. I just... came back and quickly looked through the information. Next, I explained what I understood at the time. The process is listed:

1. Write a border application we are most familiar with

.box{
	width:100px;
	height:100px;
	border: 3px solid;
	border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

The effect is as follows:

2. Next, we increase the border value

.box{
	width:100px;
	height:100px;
	border: 50px solid;
	border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

很容易发现, border渲染并不是正方形, 而是梯形的.

3. 在增大border的基础下, 此时我们将盒子宽高变成0,会产生什么效果呢!

.box{
	width:0px;
	height:0px;
	border: 50px solid;
	border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

四个三角形拼合成的矩形呈现在我们眼前,那如如果我们只想要一个三角形, 我们是不是可以设想将其他三个设为不可见;

4. 设置透明, 隐藏其中三个三角形

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

三角形这样就出来, 有木有很简单, 当然我们也可以采用逆向思维来写这个效果, 就是先将所有边框设为透明, 然后需要哪边再对其设置颜色, 效果是一样的

.box{
	width:0px;
	height:0px;
	border: 50px solid transparent;
	border-left:50px solid #ef4848;
}

这样给面试你的人讲,讲明白应该不是问题., 重点就是要理解border的应用

6. 实现三栏布局有哪些方法, 分别描述一下

三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，那么什么是三栏布局？ 即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终效果如下图所示：

下面列出四种实现方式, 在开发中可以根据实际需求选择适合自己的方法进行编码:

• Flex 布局

<style>
.container{
  display:flex;
  justify-content: center;
  height: 200px;
  background: #eee;
}
.left {
   width: 200px;
   background-color: red;
   height: 100%;
 }
.main {
    background-color: yellow;
    flex: 1;
}
.right {
    width: 200px;
    background-color: green;
}
</style>
<p class="container">
  <p class="left">1</p>
  <p class="main">2</p>
  <p class="right">3</p>
</p>

简单实用，现在比较流行的方案，但是需要考虑浏览器的兼容性。

• 绝对定位布局

<style>
.container {
  position: relative;
  background:#eee;
  height:200px;
	}
.main {
  height: 200px;
  margin: 0 120px;
  background-color: yellow;
	}
.left {
  position: absolute;
  width: 100px;
  height: 200px;
  left: 0;
  top: 0;
  background-color: red;
	}
.right {
  position: absolute;
  width: 100px;
  height: 200px;
  background-color: green;
  right: 0;
  top: 0;
}
</style>

<p class="container">
  <p class="left">1</p>
  <p class="main">2</p>
  <p class="right">3</p>
</p>

这种方案也简单实用, 并且可以将 19c136f7655d60e76c6f77589880575894b3e26ee717c64999d7867364b1b4a3元素放到第一位,使得主要内容优先加载!

• 双飞翼布局

<style>
.content {
  float: left;
  width: 100%;
}
.main {
  height: 200px;
  margin-left: 110px;
  margin-right: 220px;
  background-color: yellow;
}
.left {
  float: left;
  height: 200px;
  width: 100px;
  margin-left: -100%;
  background-color: red;
}
.right {
  width: 200px;
  height: 200px;
  float: right;
  margin-left: -200px;
  background-color: green;
}	

</style>
<p class="content">
  <p class="main"></p>
</p>
<p class="left"></p>
<p class="right"></p>

• 圣杯布局

<style>
.container {
  margin-left: 120px;
  margin-right: 220px;
}
.main {
  float: left;
  width: 100%;
  height: 300px;
  background-color: yellow;
}
.left {
  float: left;
  width: 100px;
  height: 300px;
  margin-left: -100%;
  position: relative;
  left: -120px;
  background-color: blue;
}
.right {
  float: left;
  width: 200px;
  height: 300px;
  margin-left: -200px;
  position: relative;
  right: -220px;
  background-color: green;
}
</style>
<p class="container">
  <p class="main"></p>
  <p class="left"></p>
  <p class="right"></p>
</p>

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏p并排，以形成三栏布局。

7. css3实现0.5px的细线

<style>
.line {
    position: relative;
}
.line:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: #000000;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}
</style>

<p class="line"></p>

8. link 与 @import 的区别

1. 从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等

1. 加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

1. 兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

1. DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

css部分就整理到这里, 小伙伴们面试还有什么经常遇到的,可以在评论区给我留言, 我有时间就整理出来, IT(挨踢)都是一大家, 方便你我他

9. 开发中为什么要初始化css样式

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

10. What are the ways to optimize CSS and improve performance?

• Try to write the style in a separate css file, reference it in the head element and write the code in a separate CSS files have several advantages:
  1. Separation of content and style, easy management and maintenance
  2. Reduce page size
  3. CSS files can be cached and reused, reducing maintenance costs
• Do not use @import
• Avoid using complex selectors. The fewer levels, the better. It is recommended that the nesting of selectors should not exceed three levels, such as:
• Streamline the style files of the page and remove unused styles
• Use CSS inheritance to reduce the amount of code
• Avoid! important, you can choose other selectors

Recommended related tutorials: CSS video tutorial

The above is the detailed content of 10 high-frequency interview questions about css in web front-end interviews. For more information, please follow other related articles on the PHP Chinese website!