排序
面试题:display:inline-block 什么时候会显示间隙?
display: inline-block 元素之间出现空白间隙是一个经典的 CSS 布局问题。这个间隙并非由 margin 引起,而是由于 HTML 中的空白字符(空格、换行、制表符)在渲染时被当作“空白符”处理所导致...
面试题:说说你对盒模型的理解
说说你对盒模型的理解 盒模型(Box Model) 是 CSS 布局的核心概念,它定义了每个 HTML 元素在页面上所占据的空间结构。理解盒模型是掌握网页布局的基础。 一、盒模型的组成 每一个元素都被视为...
面试题:如何用 CSS 实现一个宽高自适应的正方形?
要使用 CSS 实现一个宽高自适应的正方形,可以利用多种方法。这里介绍几种常见的实现方式: 方法一:使用 padding-top 或 padding-bottom 这种方法利用了 padding 百分比值是相对于包含块的宽度...
面试题:说说你对媒体查询的理解?
媒体查询(Media Queries) 是 CSS3 中的一项核心技术,它允许开发者根据设备的特性(如屏幕宽度、高度、分辨率、方向、颜色等)来有条件地应用 CSS 样式。 它是实现响应式设计(Responsive Des...
面试题:什么是 margin 重叠问题?如何解决?
Margin 重叠问题(Margin Collapse)是 CSS 布局中的一个重要特性,尤其在使用块级元素时经常遇到。理解它对于精确控制页面布局至关重要。 一、什么是 margin 重叠(Margin Collapse)? 在 标...
面试题:说说网页元素的层叠顺序
在网页开发中,层叠顺序(Stacking Order) 指的是当多个元素在页面上发生重叠时,浏览器如何决定哪个元素显示在上方,哪个元素显示在下方。这个顺序由 CSS 的 z-index 属性、元素的定位方式 以...
面试题:display:none 与 visibility:hidden 的区别
display: none 和 visibility: hidden 都可以隐藏 HTML 元素,但它们在行为、对布局的影响以及性能上有着本质的区别。理解这些差异对于精确控制页面显示和布局至关重要。 一、核心区别对比 特性...
面试题:如何用 CSS 实现一个三角形?
这是一个非常经典的 CSS 面试题,考察对 CSS 盒模型和 border 属性的深入理解。 核心原理 实现三角形的关键在于理解 CSS border 的渲染机制: 当一个元素的 width 和 height 都为 0 时,它的四...
面试题:利用 CSS 隐藏元素的方法有哪些?
在 CSS 中,有多种方法可以隐藏元素,每种方法的行为、对布局的影响、性能和可访问性都不同。选择合适的方法取决于具体需求。 一、主要的隐藏方法 以下是常用的 CSS 隐藏元素的方式,按行为分类...
面试题:说说你对 sticky 定位的理解
position: sticky 是 CSS 中一种非常实用的定位方式,结合了 relative 和 fixed 定位的特点。 它允许元素在滚动到特定阈值之前表现得像相对定位(relative),一旦达到该阈值,则表现得像固定定...
