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 CSS3Reference 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.
2. RGBA
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> <div> <h3>Novice on the road</h3> <p>Novice zone consumption warning transaction security 24-hour online help free store</p> </div> <div> <h3>payment method</h3> <p>Quick payment credit card yu'e Bao ant Hua Bai cash on delivery</p> </div> <div> <h3>Taobao features</h3> <p>Mobile Taobao Wangxin public review B Grid Guide</p> </div> </div>
.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
- 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 */
- Box size
CSS3 box sizing property
- Media query
CSS3 @media query
- CSS3 animation
@keyframes
@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 */
- Gradient effect
background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#2a8bbe), to(#fe280e));
- 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.
- CSS3 transition
div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari And Chrome */ -o-transition: width 2s; /* Opera */ }
- CSS3 transformation
- Rotate
- Translate
- Scale
- Skew
- Transform base point
- 3d conversion
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
Resolution:
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)
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:
GIF:
- 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
JPEG:
- 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.
PNG:
-
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.
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