前端面试必备：CSS核心知识点与技巧汇总

前端大厂最新的面试题聚焦于CSS领域的深入理解，涵盖了多个关键知识点，旨在考察应聘者的专业技能和理论掌握程度。以下是对部分问题的详细解析： 1. **盒模型属性**：`box-sizing`属性能够控制元素的盒模型，包括标准盒模型（content-box，默认值）和弹性盒模型（border-box），后者会将边框和内填充计算在元素的总尺寸之内。 2. **关系选择器**：相邻兄弟选择器是`+`，它只匹配紧跟在前面指定元素后的兄弟元素。 3. **继承属性**：一些CSS属性如`color`, `font-family`, 和 `line-height`等可以被子元素继承，而`border`, `margin`, 和 `padding`等通常不会被继承。 4. **角度单位**：与角度相关的单位有`deg`（度）、`rad`（弧度）、`grad`（格林）以及CSS3引入的`turn`（完整圆周）。 5. **CSS定位**：CSS定位包括`static`, `relative`, `absolute`, 和 `fixed`四种方式，用于控制元素在页面中的定位方式，如定位元素的偏移量、层叠顺序等。 6. **z-index**：这个属性用于控制元素的堆叠顺序，用于处理层叠上下文中的元素显示层级。 7. **强制换行**：使用`white-space`属性的`nowrap`关键字可以阻止文本换行，`pre`则保留空白字符，`break-word`会在单词边界处换行。 8. **波浪线效果**：通过设置`text-decoration`属性为`underline`可以为文本添加下划线，不是波浪线，但可以通过伪元素`::before`和`::after`配合`content`属性自定义样式实现。 9. **white-space的关键字**：`pre-wrap`保留HTML文档中的空格、换行和Tab制表符，`pre`则完全保留，`normal`或默认行为将根据需要折行。 10. **vertical-align`默认值**：默认情况下，`vertical-align`的值是`baseline`，表示元素的基线对齐。 11. **背景缩放**：`background-size`属性可以设置背景图的缩放，`cover`值保持原始比例缩放至容器大小，`contain`则保持原始比例缩放，不超出容器。 12. **背景附件**：`background-attachment`的`scroll`值使背景随内容滚动，`fixed`使背景固定。 13. **CSS动画循环**：使用`animation-iteration-count`属性，值`infinite`表示动画无限循环。 14. **transform属性**：包含多种变形函数，如`translate`, `rotate`, `scale`, `skew`, 和 `matrix`等，用于转换元素。 15. **IE前缀**：IE早期版本需要特定的前缀，如`-ms-`、`-moz-`、`-webkit-`等，现在大部分现代浏览器已经弃用这些前缀。 16. **多列布局**：`column-width`和`column-count`分别控制每列宽度和列数，`column-gap`设置列间间距。 17. **伸缩容器**：`flex-wrap`属性决定子元素是否换行，`align-items`控制主轴方向上的对齐。 18. **Bootstrap**：一个流行的前端开发框架，提供响应式设计、组件和网格系统，易于快速构建网站。 19. **屏幕类**：`.col-xs-`是Bootstrap针对小屏幕设备（小于768px）的类名。 20. **CSS3新特性**：包括`@keyframes`动画、变量（`var()`）、伪元素、多列布局、阴影、渐变、圆角、动画、媒体查询等。 21. **CSS3新增属性**：如`box-shadow`, `border-radius`, `transition`, `transform`, 和 `filter`等。 22. **伪元素`::before`和`::after`**：用于在元素前后添加内容，`content`属性用于设置其内容。 23. **文本颜色设置**：使用`color`属性直接设置，或者利用伪元素和`content`实现更复杂的效果。 24. **浮动的缺陷**：破坏正常的文档流、可能导致父元素高度塌陷、需要额外的清除浮动技巧。 25. **清除浮动方法**：常见的有`clearfix`类、伪元素`::after`加`clear:both`，以及使用`flexbox`或`grid`布局。 26. **定位关键字**：`static`（默认）、`relative`、`absolute`和`fixed`，其中`static`和`relative`保持文档流，`absolute`脱离文档流，`fixed`相对于视口定位。 27. **转换圆形**：使用`border-radius`属性设置元素圆角，或利用伪元素和`clip-path`创建复杂的形状。 28. **`border:none`和`border:0`**：前者表示删除边框，后者则是边框宽度为0，两者效果相同，但`border:0`可能会引发IE兼容性问题。 29. **通用字体系列**：`serif`（衬线）、`sans-serif`（无衬线）、`monospace`（等宽）等。 30. **过渡的子属性**：`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`。 31. **媒体查询媒体特性**：如`width`, `height`, `orientation`, `color`, `resolution`, `aspect-ratio`等。 32. **媒体查询操作符**：包括`and`, `not`, `only`等，用于组合和限制条件。 33. **内容属性**：`content`, `counter-increment`, 和 `counter-reset`用于插入内容或控制计数器。 34. **CSS特殊性**：指不同类型的CSS选择器的重要性，如ID选择器、类选择器、属性选择器等。 35. **!important`的作用**：当一个样式具有`!important`时，它的优先级高于其他所有样式，强制应用该样式。 36. **相对长度单位`vm`, `vh`, `vmax`, `vmin`**：分别表示视口高度、宽度、最大高度和最小高度的百分比，用于响应式设计中的高度计算。 37. **百分比计算**：当属性值为百分比时，会基于元素的父元素或视口的尺寸进行计算。 38. **setTimeout间隔**：动画时间间隔应根据具体需求设置，一般来说，100-300ms是一个较为合理的范围，但也要考虑到性能和用户体验。 39. **ul元素默认样式**：默认情况下，`list-style`属性会显示项目符号，`list-style-type`、`list-style-image`和`list-style-position`控制项目符号类型、图片和位置。 这些知识点覆盖了CSS的基础理论、高级特性和实践经验，有助于应聘者在面试中展示他们的前端技术深度。