Front-end interview questions HTML: https://my.oschina.net/u/3674939/blog/1637883
Front-end interview questions JavaScript: https://my.oschina.net/u/3674939/blog/1640595
Other front-end interview questions (security, performance, loading, etc.): https://my.oschina.net/u/3674939/blog/1643029
Text does not wrap
/*单行文本*/
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
CSS style priority
!important > Inline Styles > ID Selector > Class Selector > Tags > Wildcards > Inherit > Browser Default Properties
- Weight calculation
- Write last first
The role of sprite
- Reduce the number of HTTP requests and improve loading performance
- reduce image size
Display:inline-block spacing problem
due to whitespace characters
Solution: font-size: 0
How to clear float
- overflow:hidden
- ::after{clear:both}
- .clear{clear:both}
How to adapt to the mobile terminal
viewport rem media query
Responsive design: hide, wrap, adapt
three-column layout
- floating layout
- positioning layout
- flexbox layout
- table layout
- grid layout
Center the box vertically and horizontally
- Positioning + margin:
position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;
- Position + transform:
position: relative / absolute;left: 50%; top: 50%;transform: translate(-50%, -50%);
- Table layout:
父级 display: table-cell; vertical-align: middle; 子级 margin: 0 auto;
- flex layout:
父级 display: flex;align-items: center;justify-content: center;
- grid layout
Reference: https://github.com/Sweet-KK/css-layout
CSS box model
Standard model: width and height = content
IE model: width and height = border+padding+content
Margin overlap problem
The upper and lower divs are set with margin-bottom and margin-top respectively, and the margin values are combined to take the maximum value. The parent div nests the child div and sets the child div width and height margin-top, the parent div=the child div width and height and the margin value is merged to take the maximum value.
解决：overflow：hidden
BFC
block-level formatting context
Principle: The vertical margins of the BFC elements will overlap; the BFC area will not overlap with the floating elements; the BFC is an independent container that does not affect each other inside and outside; the floating elements will also participate in the calculation when calculating the height of the BFC
How to create: overflow, float, postion (relative does not count), dispay (only inline-box and table related)
Attachment: 55 CSS interview questions: https://segmentfault.com/a/1190000013325778