本文共 1530 字，大约阅读时间需要 5 分钟。

CSS盒子模型是现代CSS布局的核心原理，它决定了如何将HTML内容转换为可见的页面布局。盒子模型通过将每个HTML元素渲染为一个矩形盒子，并通过盒子的高度、宽度、内边距、外边距等属性来控制布局。盒子模型的理解对于网页设计和开发至关重要。

CSS选择符是用来定位HTML元素的工具，通过选择符可以精确地 targeting元素。CSS3中新增的伪类包括：:active（表示元素被激活）、:checked（表示单选框或复选框被选中）、:default（表示未被修改的元素状态）、:invalid（表示输入错误的元素）、:placeholder-shown（表示占位符显示）、:read-only（表示只读的元素）、:required（表示必填字段）、:visited（表示链接已访问）。

一些属性可以继承，比如颜色（color）、字体（font）、字号（font-size）、文本颜色（background-color等。不可继承的属性包括display、position、top、bottom、left、right、width、height等。

CSS样式优先级遵循规则：内联样式（！）> 选项卡内样式（）> 读取样式（）> 嗅合样式（）> 默认样式（）。权重计算则基于层级和重要性。

当元素设置浮动（float）后，其display属性会被自动变为block。

初始化CSS样式的目的是确保不同浏览器在缺少用户自定义样式时，元素的显示效果一致，为统一的视觉呈现提供基础。

为让div垂直居中和水平居中，可以使用Flexbox布局。具体方法是将父容器设置为display:flex，且align-items和justify-content属性为center。

清除浮动（float）后，可以通过清除（clear: both）或使用Flexbox布局来处理。

CSS3的Flexbox布局模型（flexbox）提供了更灵活的盒子布局控制，支持主轴（主方向）和交叉轴（副方向）的排列方式，允许元素根据需求在不同方向上排列。

使用CSS实现一个三角形，可以通过设置多个边的透明度和宽度来达到效果。例如，可以设置一个元素的左边和右边为透明的边，底部为红色。

块级格式化上下文（BFC）是CSS中的一种重要的布局模型，它决定了块级元素如何在页面上呈现。BFC的特点是元素的盒子不会与父盒子边缘重叠，且内部的空白会被排除在外。

隐藏元素的方法有多种。display:none会完全隐藏元素，不占用任何空间。visibility:hidden只隐藏元素，但保留空位，元素仍然占据父容器的位置。opacity:0则隐藏元素的可见性，但元素仍然占用空间。visibility属性还支持collapse值，与display:none效果相同。

在CSS中，竖向的百分比通常是相对于容器的总高度计算的。例如，padding-top和padding-bottom的百分比是基于父容器的宽度，而不是高度，这与水平方向的处理方式一致。

在Chrome中支持小于12px的字体，可以通过设置font-size为10px，并在Webkit前置器中添加缩放变换。例如：

p { font-size:10px; -webkit-transform:scale(0.8); }

rgba()和opacity的主要区别在于作用范围。opacity影响整个元素，包括子元素的透明度，而rgba()只影响直接设置的元素颜色或背景色。需要注意的是，rgba()的透明度在IE中可能有所不同。

通过以上方法，可以有效地解决HTML和CSS中的各种布局和显示问题。掌握这些知识有助于提升网页设计和开发的效率。