HTML+CSS学习：盒子模型、定位与BFC/IFC解析

“HTML+CSS知识（4）：包含盒子模型、BFC与IFC、浮动、定位、文字对齐、超出省略号、定位层级等内容的复习笔记。” HTML和CSS是构建网页的基础，本笔记主要涵盖了以下几个核心知识点： 1. **盒子模型**：盒子模型描述了HTML元素占据空间的方式，由content、padding、border和margin四部分组成。Content区域包含实际内容，如文本或图像。Padding是内容与边框之间的距离，Border则是围绕内容和内边距的边框，而Margin则是元素与其他元素之间的间距。在CSS中，可以分别设置这些属性来调整元素的大小和位置。 2. **BFC（Block Formatting Context，块级格式化上下文）**：BFC是块级元素渲染的一种规则，当一个元素满足特定条件（如浮动、绝对定位、display为flex或grid等）时，会创建一个新的BFC。在BFC中，元素按照从上至下、从左至右的顺序排列，并且不会与其他BFC重叠。 3. **IFC（Inline Formatting Context，行内格式化上下文）**：与BFC相对，IFC是处理行内元素的规则。行内元素在同一行内显示，直到行宽不足以容纳它们时才会换行。IFC中的元素无法设置宽度和高度，但可以设置内边距的左右值。 4. **溢出（Overflow）**：当元素内容超出其容器边界时，可以通过设置`overflow`属性来控制如何处理溢出内容，如隐藏、滚动或可见。 5. **水平和垂直对齐**：`text-align`用于控制元素内的文本水平对齐，可设置为`left`、`center`或`right`。对于块级元素的居中对齐，可以使用`margin: 0 auto;`。至于文字的垂直对齐，可以利用`line-height`、`vertical-align`等属性。 6. **单行和多行文字超出省略号**：通过`text-overflow: ellipsis;`和`white-space: nowrap;`组合，可以实现单行文字超出部分用省略号表示。对于多行文本，可以使用`-webkit-line-clamp`和`-webkit-box-orient`属性限制显示的行数。 7. **浮动（Float）**：`float`属性允许元素在页面上浮动，常用于创建布局。但浮动会导致文档流问题，如父元素无法识别浮动元素的高度。解决方法包括使用`clear:both;`、`overflow:hidden;`或`display:table;`等。 8. **定位（Positioning）**：CSS提供了相对定位（`position: relative;`）、绝对定位（`position: absolute;`）和固定定位（`position: fixed;`）。相对定位是在原始位置基础上偏移，不影响其他元素；绝对定位使元素脱离正常文档流，相对于最近的非静态定位祖先元素定位；固定定位则相对于浏览器窗口定位。 9. **层级关系**：通过`z-index`属性，可以设定元素的堆叠顺序，数值越大，元素越靠前，越能覆盖其他元素。 此外，笔记还提到了一些Photoshop的快捷键，这在设计网页时也会有所帮助。掌握这些HTML和CSS知识，将有助于更高效地创建和控制网页布局和样式。