CSS interview question summary

Previous points here: ↓
CSS interview question summary (I)
CSS interview question summary (II)
CSS interview question summary (III)

31. What is FOUC? How to avoid

Reference answer:

1. What is fouc?

In the process of referencing css, if the method is improper or the location reference is wrong, some strange phenomena will appear in the ie of some pages under windows, and the page content will flash instantaneously without style. This phenomenon is called short-term failure of document style, which is called focus for short.

2. The reasons are as follows:

  • Use the import method to import style sheets
  • Place the style sheet at the bottom of the page
  • There are several style sheets placed in different locations in the html structure.

3. In fact, the principle is very clear: when the style sheet is loaded later than the structural html, when the style sheet is loaded, the page will stop the previous rendering. After this style sheet is downloaded and parsed, the page will be re rendered, resulting in a brief splash screen phenomenon.

4. Solution:

Use the link tag to place the style sheet in the document head.

32. What are the new features of CSS3

Reference answer:

1. Selector

  • E: Last child matches the last child element E of the parent element.
  • E: Nth child (n) matches the nth child element E of the parent element.
  • E: Nth last child (n) CSS3 matches the penultimate child element E of the parent element.


To answer this question, the interviewer is likely to continue to ask: what is the difference between the transparency effect of rgba() and opacity?

3. Multi column layout

<div class="mul-col">
        <h3>Novice on the road</h3>
        <p>Novice zone consumption warning transaction security 24-hour online help free store</p>
        <h3>payment method</h3>
        <p>Quick payment credit card yu'e Bao ant Hua Bai cash on delivery</p>
        <h3>Taobao features</h3>
        <p>Mobile Taobao Wangxin public review B Grid Guide</p>
.mul-col {
    column-count: 3;
    column-gap: 5px;
    column-rule: 1px solid gray;
    border-radius: 5px;
    border: 1px solid gray;
    padding: 10px;

4. Multi background map

/* backgroundimage:url('1.jpg),url('2.jpg') */

5. CSS3 word wrap attribute

p.test {
    word-wrap: break-word;

6. Text shadow

text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5);

7. @ font face attribute

Font face can be used to load font styles, and it can also load server-side font files to let the client display fonts that are not installed by the client.

@font-face {
    font-family: BorderWeb;
    src: url(BORDERW0.eot);

@font-face {
    font-family: Runic;
    src: url(RUNICMT0.eot);

.border {
    font-size: 35px;
    color: black;
    font-family: "BorderWeb";

.event {
    font-size: 110px;
    color: black;
    font-family: "Runic";

/* Taobao font usage */

@font-face {
    font-family: iconfont;
    src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);

8. Fillet

border-radius: 15px;

9. Border picture

CSS3 border image property

  1. Box shadow
/* box-shadow: Offset in the horizontal direction offset in the vertical direction blur degree extension degree does the color have an inner shadow */
  1. Box size

CSS3 box sizing property

  1. Media query

CSS3 @media query

  1. CSS3 animation


@keyframes abc {
    from {
        transform: rotate(0);

    50% {
        transform: rotate(90deg);

    to {
        transform: rotate(360deg);

animation properties

/* animation :  name duration timing-function delay interation-count direction play-state */
  1. Gradient effect
background-image: -webkit-gradient(linear,
    0% 0%,
    100% 0%,
  1. CSS3 elastic box model
  • Elastic box is a new layout mode of CSS3.
  • CSS3 elastic box (Flexible Box or flexbox) is a layout method to ensure that elements have appropriate behavior when pages need to adapt to different screen sizes and device types.
  • The purpose of introducing elastic box layout model is to provide a more effective way to arrange, align and allocate blank space for sub elements in a container.
  1. CSS3 transition
div {
    transition: width 2s;
    -moz-transition: width 2s;
    /* Firefox 4 */
    -webkit-transition: width 2s;
    /* Safari And Chrome */
    -o-transition: width 2s;
    /* Opera */
  1. CSS3 transformation
  • Rotate
  • Translate
  • Scale
  • Skew
  • Transform base point
  • 3d conversion

reference resources

33. What are the values of display? Explain their role

Reference answer:

display: none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex


Default: inline

none:  Hide objects. And visibility Attribute hidden Values differ, which do not reserve their physical space for hidden objects
inline:  Specifies that the object is an inline element.
block:  Specifies that the object is a block element.
list-item:  Specifies that the object is a list item.
inline-block:  Specifies that the object is an inline block element. ( CSS2)
table:  Specifies that the object is a table at the block element level html label<table>(CSS2)
inline-table:  Specifies the object as a table at the inline element level html label<table>(CSS2)
table-caption:  Specifies the object as the table title. Similar to html label<caption>(CSS2)
table-cell:  Specifies the object as a table cell. Similar to html label<td>(CSS2)
table-row:  Specifies an object as a table row. Similar to html label<tr>(CSS2)
table-row-group:  Specifies the object as a table row group. Similar to html label<tbody>(CSS2)
table-column:  Specifies the object as a table column. Similar to html label<col>(CSS2)
table-column-group:  Specifies that the object is displayed as a table column group. Similar to html label<colgroup>(CSS2)
table-header-group:  Specifies the object as the table header group. Similar to html label<thead>(CSS2)
table-footer-group:  Specifies the object as a table footnote group. Similar to html label<tfoot>(CSS2)
run-in:  Determines whether an object is inline or block level based on the context( CSS3)
box:  Displays the object as a flex box. (the oldest version of the flex box)( CSS3)
inline-box:  Displays the object as an inline block level flex box. (the oldest version of the flex box)( CSS3)
flexbox:  Displays the object as a flex box. (Flex box transition version)( CSS3)
inline-flexbox:  Displays the object as an inline block level flex box. (Flex box transition version)( CSS3)
flex:  Displays the object as a flex box. (latest version of the flex box)( CSS3)
inline-flex:  Displays the object as an inline block level flex box. (latest version of flex box)( CSS3)

reference resources

34. Display: when will the gap not be displayed in the inline block? (Ctrip)

Reference answer:

The elements of the inline block layout are written on the same line in the editor

35. Differences between PNG, GIF and JPG and how to select them

Reference answer:


  • 1: 256 colors
  • 2: Lossless, no loss when editing and saving.
  • 3: Support simple animation.
  • 4: Support boolean transparency, that is, either completely transparent or opaque


  • 1: millions of colors
  • 2: Lossy compression means that every edit loses quality.
  • 3: Transparency is not supported.
  • 4: Suitable for photos. In fact, many cameras use this format.


  • 1: Lossless. In fact, PNG has several formats, which are generally divided into two categories: PNG8 and truecolor PNGs;

  • Compared with GIF:

    • It usually produces smaller file sizes.
    • It supports alpha (variable) transparency.
    • No animation support
  • Compared with JPEG:

    • Larger file
    • Undamaged
    • Therefore, it can be used as a transfer format for intermediate editing of JPEG pictures.
  • Conclusion:

    • JPEG fits photos
    • GIF is suitable for animation
    • PNG is suitable for any other kind - charts, buttons, backgrounds, charts, etc.

reference resources

36. Does the inline element become a block level element after float:left?

Reference answer:

  • When an inline element is set to float, it becomes more like an inline block
  • In line block level element. The element set to this attribute will have both in line and block level characteristics. The most obvious difference is that its default width is not 100%. In line elements occupy one line by default
  • At this time, it is effective to set padding top and padding bottom or width and height for inline elements

37. Should we use odd or even fonts in web pages? Why?

Reference answer: even fonts should be used

1. Proportional relationship

Relatively speaking, even font size is easy to form a proportional relationship with the font size of other parts of the page. If I use 14px font as the body font size, then other parts of the font (such as the title) can use 14 × 1. 5 =21px font, or 14 in some places × 0.5 = 7px padding or margin. If you are writing css with sass or less, the usefulness will be highlighted.

2. For the sake of UI Designer

Most designers use software such as ps. the font size provided is even. Naturally, even numbers are used at the front end.

3. Browser

One is that the lower version of browser ie6 will forcibly convert odd fonts to even ones, that is, 13px will be rendered to 14px.
The second is to divide the font equally. For even width Chinese characters, such as 12px men, remove the font spacing of 1 pixel, and the filled font pixel width is actually 11px. In such Chinese characters, the vertical line is evenly divided on the left and right. For example, the "middle" sub is 5px on the left and right.

4. System differences

The dot matrix Song typeface (Zhongyi Song typeface) of Windows only provides 12, 14 and 16 px dot matrices from Vista, while the smaller dot matrix is used for 13, 15 and 17 px (that is, the space occupied by each word is 1 px larger, but the dot matrix has not changed), so it is slightly sparse.

On Linux and other handheld devices, the rendering effects of odd and even numbers are not much different.

Resolution: reference resources

38. CSS consolidation method

Reference answer:

@import url(css file address)

39. List the attributes you know that can change the page layout

Reference answer:

width, height, float, position, etc

40. CSS practice in performance optimization

Reference answer:

1. Inline first screen Critical CSS

Inline CSS can advance the time when the browser starts page rendering, and only the key CSS required to render the first screen content can be inline into HTML

2. Load CSS asynchronously

3. File compression

4. Remove useless CSS

Resolution: reference resources

Tags: Javascript Front-end css3 css Interview

Posted on Sat, 20 Nov 2021 17:13:40 -0500 by ThaSpY