CSS 盒模型是网页布局的核心，所有元素都可看作矩形盒子，由内容区 content、内边距 padding、边框 border、外边距 margin四部分组成。content 是盒子核心，存放文本、图片等实际内容，宽高默认作用于此；padding 是内容与边框的间距，用于撑开内部空间，不影响外部元素；border 是盒子的边框，分隔元素与外界；margin 是盒子与外部其他元素的距离，控制元素间距。盒模型分标准和 IE 两种：标准盒模型总宽 =content+padding+border+margin，IE 盒模型 width 直接包含 content、padding、border，两种模式适配不同布局需求，是页面排版的基础。
BFC 即块级格式化上下文，是 CSS 中独立的块级渲染区域，内部元素的布局完全不影响外部，外部也无法干扰内部，相当于一个封闭的布局隔离容器。触发 BFC 的方式很简单：设置元素浮动、overflow 为非 visible 值、绝对 / 固定定位、display 为 flex/grid 等。它的工作机制：内部块级元素垂直排列，上下外边距不会塌陷；浮动元素会被 BFC 包含，能清除浮动带来的高度塌陷问题；还能阻止元素被浮动元素覆盖。BFC 是解决布局常见问题的神器，无需额外代码就能修复浮动、边距塌陷等 bug。
层叠上下文是 CSS 中元素的三维堆叠层级空间，默认由根元素 html 创建，定位元素、设置 z-index、transform 等属性会新建独立层叠上下文。z-index 仅对开启定位的元素生效，用于控制堆叠顺序，数值越大越靠上。堆叠规则遵循固定顺序：从下到上依次为元素背景 / 边框、负 z-index 元素、标准块级元素、行内元素、浮动元素、定位元素、正 z-index 元素。关键特点：子元素的 z-index 仅在父级层叠上下文中生效，无法突破父级层级，这是避免层级混乱的核心规则。
选择器特异性（优先级）是 CSS 判断样式生效顺序的权重规则，权重高的样式会覆盖权重低的。计算方式采用四位数权重模型（无进位），从高到低依次为：行内样式（1000）> ID 选择器（100）> 类选择器、属性选择器、伪类（10）> 标签选择器、伪元素（1）。通用选择器 * 权重为 0，!important 优先级最高，会覆盖所有样式。同级权重下，后写的样式覆盖先写的。比如#box .item权重是 100+10=110，高于div .item的 1+10=11，精准计算权重能避免样式冲突，是编写 CSS 的必备基础。
三者是 CSS 最基础的元素显示类型，核心区别在排列方式、尺寸设置。block 块级元素独占一行，可设置宽高、内外边距，默认宽度占满父元素，div、p、h1 都属于此类；inline 行内元素不换行，和其他行内元素并排，无法设置宽高，上下内外边距无效，span、a、strong 是典型代表；inline-block 行内块元素结合前两者优点，不换行并排显示，同时支持设置宽高和所有内外边距，按钮、图片默认为此类型。日常布局中，根据排列和尺寸需求选择对应类型，是基础布局的关键。
box-sizing 是 CSS 控制盒模型尺寸计算方式的核心属性，解决布局中元素宽高计算混乱的问题。它有两个关键值：content-box 是默认值（标准盒模型），元素的宽高仅作用于内容区，padding 和边框会额外撑开元素，容易导致布局溢出；border-box 是开发首选（IE 盒模型），元素的宽高直接包含内容区、padding 和边框，总尺寸固定不变。使用 border-box 后，布局时无需手动计算内边距和边框的尺寸，大幅简化响应式、弹性布局的编写，是现代 CSS 重置样式的必备属性。
