The most comprehensive CSS interview questions (including answers)

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

display:none; disappears completely to free up space. Can trigger reflow (rearrangement) of the page.

visibility:hidden; is hidden, but the position is not released. For example, opacity:0; does not cause page reflow.

2. How to calculate CSS priority and weight values

Embedded styles>Internal styles>External styles>Imported styles

! important > embedded 1000 >Id 100 > class=[]=pseudo-class 10 > tag=pseudo-element 1 > ( * + > ~) 0

3. How to trigger BFC and the role of BFC

BFC: block formatting context block formatting context, is an independent rendering area. It specifies how the internal box is laid out and has nothing to do with the outside of this area.

Trigger: The value of float is not none; the value of position is not static or relative; the value of display is inline-block, block, table-cell, flex, table-caption or inline-flex; the value of overflow is not visible.

Function: avoid margin overlap; adapt to two-column layout; clear floating.

4. CSS box model

The box model consists of four parts: margin, border, padding, and content.

Standard box model size=border+padding+content

Weird box model size=content

Convert weird box model: box-sizing:border-box;

Convert to standard box model: box-sizing:content-box;

5. How to center an element horizontally and vertically

5.1. Flexible box

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

5.2. Positioning

.box{ 
  position: relative; 
} 
.box .sub{ 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  /*margin-left: negative width half*/ 
  /*margin-top: half of the negative height*/ 
}

6. CSS implements a triangle

.triangle{
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-left-color: red;
}

7. How to achieve fixed width on the left and adaptive layout on the right

7.1. Holy Grail Layout

<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
#container {
  padding-left: 200px; 
  padding-right: 150px;
}
#container .column {
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}
#right {
  width: 150px; 
  margin-right: -150px; 
}

7.2. Double flying wing layout

  <div id="container" class="column">
    <div id="center"></div>
  </div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
  #container {
    width: 100%;
  }

.column {
  float: left;
}
        
#center {
  margin-left: 200px;
  margin-right: 150px;
}
        
#left {
  width: 200px; 
  margin-left: -100%;
}
        
#right {
  width: 150px; 
  margin-left: -150px;
}

7.3. Contour layout (false equal height) complementary inner and outer margins

.parent{
  overflow: hidden;
}
.left, .right{
  margin-bottom: -10000px;
  padding-bottom: 10000px;
}

7.4. Equal height layout (true equal height) flexible box

.parent{
  display: flex;
}
.child{
  flex: 1;
}

7.5、calc

  <div id="left" class="column"></div>
  <div id="center" class="column"></div>
  <div id="right" class="column"></div>
  .column{
    float: left;
  }
  #left{
    width: 100px;
  }
  #right{
    width: 200px;
  }
  #center{
    width: calc(100% - 100px - 200px);
  }

7.6. Floating

  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
  <div id="center"></div>
  #left{
    float: left;
    width: 100px;
  }
  #right{
    float: right;
    width: 200px;
  }
  #center{
    margin-left: 100px;
    margin-right: 200px;
  }

8. How to implement 6px font

.font{
  font-size: 12px;
  transform: scale(.5);
}

9. How to set 1px border on mobile terminal

/* Method 1 */ 
.border{ 
  width: 100%; 
  height: 1px; 
  background: red; 
} 
/* Method 2 */ 
.border{ 
  border-image: url(border.png) 
} 
/* Method 3 */ 
. border{ 
  box-shadow: 0 0 0 1px #000; 
}

10. What are px, em, rem, vh and vw respectively?

px physical pixel, absolute unit; em is relative to its own font size. If it has no size, it is relative to the parent font size. If the parent does not have one, it searches upward layer by layer until html is found. Relative unit; rem is relative to The font size of html, relative units; the size of vh, relative to screen height, relative units; the size of vw, relative to screen width, relative units.

11. What are the inheritable properties of CSS?

Inheritable attributes: Text class: text-indent, text-align, line-height, word-spacing, letter-spacing, text-transform, direction, color;

字体类：font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust；

其它类：visibility、caption-side、border-collapse、border-spacing、empty-cells、table-layout、list-style-type、list-style-image、list-style-position、list-style、quotes、cursor、page、page-break-inside、windows、orphans等

The most comprehensive CSS interview questions (including answers)

Guess you like