前端面试必备：CSS基础篇重点解析

"前端知识点面试题CSS基础篇1" 在前端面试中，CSS基础是不可或缺的部分。以下是一些关键的CSS知识点： 1. **盒模型**：标准的CSS盒模型包括内容区域(content)、内边距(padding)、边框(border)和外边距(margin)。在低版本的IE中，盒模型将边框和内边距算在了内容区域的宽度之内，而标准盒模型则是将它们独立于内容区域之外。 2. **设置盒模型**：可以通过`box-sizing`属性来设置盒模型，`box-sizing: content-box`是标准盒模型，`box-sizing: border-box`是IE盒模型。 3. **BFC（Block Formatting Context）**：BFC是一个独立的布局环境，元素内部的布局不受外部元素影响。创建BFC的方式包括：根元素、浮动元素(`float`不是`none`)、绝对定位元素(`position`为`absolute`或`fixed`)、`display`值为`inline-block`、`table-cell`、`flow-root`或`flex`的元素、`overflow`值不为`visible`的元素。 4. **CSS margin上下重叠问题**：当两个垂直相邻的块级元素的`margin`相遇时，可能会发生margin重叠现象，只显示其中较大的一个`margin`。 5. **CSS选择器**：包括标签选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。可继承的属性包括颜色、字体大小、行高、文本对齐等，而位置相关的属性如`margin`、`padding`、`border`等不能被继承。 6. **CSS3新增伪类**：如`:nth-child(n)`、`:nth-of-type(n)`、`:checked`、`:focus-within`、`:not()`等，提供了更丰富的元素状态选择。 7. **display属性**：`block`表示块级元素，`inline`表示内联元素，`inline-block`结合两者特性，`none`表示不显示元素，`flex`和`grid`用于创建弹性布局和网格布局。 8. **居中技术**：水平垂直居中可以通过`position`定位、`flexbox`或`grid`布局实现。对于不定宽高的元素，可以使用`transform: translate(-50%, -50%)`，对于固定宽高的元素，可以设置`margin: auto`，`display: table-cell`配合`vertical-align: middle`或`position`定位。 9. **创建三角形**：利用边框的透明性，通过设置特定的边框宽度和颜色，可以创建纯CSS的三角形。 10. **初始化CSS样式**：为了消除浏览器间默认样式差异，通常会写一个全局的CSS reset，但要注意这可能影响SEO。 11. **display:none与visibility:hidden**：`display:none`隐藏元素并释放其占用的空间，`visibility:hidden`则隐藏元素但保留其空间。 12. **position与display、overflow、float交互**：`position`设定元素的定位模式，`display`控制元素的布局方式，`overflow`管理内容溢出时的行为。这些属性组合使用能实现复杂布局，例如`position: absolute`和`relative`常用于相对定位，`overflow: hidden`用于清除浮动。 13. **浮动与清除浮动**：浮动主要用于创建多列布局，当元素浮动后，可能导致父元素高度塌陷。需要清除浮动是为了恢复父元素的高度，常用方法包括：`clear:both`，`clearfix`类，和使用`overflow:auto`或`display: flow-root`。 以上是CSS基础面试题中的一些常见问题和解答，理解并掌握这些知识点对于前端开发者来说至关重要。