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

##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

## Matches the last element of the parent element Child element, equivalent to:nth-last-child(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)

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

##E :empty

• css3 new attributes

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

   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% */
   }

<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>

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

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.

overflow:hidden

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.

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:

.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