前端面试必备：HTML，CSS与BFC解析

"前端面试秘籍.pdf" 前端面试中，HTML和CSS部分是考察的重点，以下将详细解析其中的关键知识点： 1. CSS 盒子模型： 盒子模型是CSS布局的基础，它定义了元素如何占据空间。标准的盒子模型（W3C盒子模型）包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。元素的总宽度等于内容宽度加上左右边框和内边距。而在低版本的IE浏览器中，盒子模型的宽度则包括内容、内边距和边框。理解这一差异对于精确布局至关重要。 2. BFC（Block Formatting Context）： BFC是一种渲染规则，用于确定元素如何在块级上下文中布局。当一个元素满足以下任一条件时，会形成BFC：浮动元素（除了none）、绝对或固定定位元素、display属性设置为inline-block、table-cell、table-caption以及overflow值非visible的元素。BFC的特点包括：内部元素按垂直方向排列，间距由margin决定，与浮动元素不重叠，并且在计算BFC高度时会包含浮动元素的高度。掌握BFC可以帮助解决布局问题，如防止内容溢出和解决高度塌陷。 3. 清除浮动： 浮动元素会导致父元素高度塌陷，即父元素无法自动扩展以包含浮动子元素。有多种方法可以清除浮动，如： - 添加空div并应用`clear:both`，`height:0`和`overflow:hidden`； - 给父元素设定固定高度； - 父元素自身浮动，但可能影响其他同级元素； - 将父元素设为`inline-block`，但可能影响居中对齐； - 应用`overflow:hidden`，这是常见且实用的方法； - 使用`:after`伪元素，这种方法目前较为主流，推荐使用。 4. 创建纯CSS三角形的原理： 利用CSS的边框（border）属性可以创建一个三角形。通过设置不同边框的宽度和颜色，然后隐藏不需要的边框，可以生成特定方向的三角形。例如，一个元素可以有四个边框，通过让顶部边框透明，左右边框设置为非零宽度，底部边框为零宽度，然后隐藏元素的背景，即可得到一个向下的三角形。 这些是前端面试中关于HTML和CSS的常见问题，理解并熟练掌握这些知识点对于面试和实际工作都非常关键。除此之外，面试中还可能涉及CSS选择器、响应式设计、Flexbox和Grid布局、CSS动画、性能优化等相关内容，都需要进行深入学习和实践。