面试题——关于隐藏一个盒子模型，有多少种方法？

最新推荐文章于 2026-06-22 22:05:57 发布
原创 最新推荐文章于 2026-06-22 22:05:57 发布 · 91 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css #前端 #css3 #html #javascript
本文介绍了在不使用脚本的情况下，通过CSS隐藏元素的三种常见方法：display:none，visibility:hidden以及overflow:hidden。display:none将元素从页面布局中移除，不占用空间；visibility:hidden保持元素位置，但使其不可见；overflow:hidden则通过裁剪内容来隐藏部分元素。每种方法各有特点，适用于不同的场景需求。

给定一个 div 盒子，你有多少种隐藏的方法？不写脚本的情况下

方法一：display : none;

这是最常见的隐藏效果实现，通过让一个元素注释掉，从而做到隐藏起来，但是它存在于文本文档中，也不占用原来位置，也就是说可以被脚本调用，看看下面例子

```

Document

看看浏览器

可以看到浏览器已经没有这个盒子了，但是检查文档会看到该元素依然在，但是它不占位置了。

方法二：visibility : hidden

该方法可以将盒子通过 visibility : hidden 的方式将一个盒子隐藏起来，但是浏览器上依旧占着原来的位置。

看看下面例子

```

Document
小滴课堂
关注
十五道css面试题
m0_65450343的博客
04-25 7229
目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2.CSS 中哪些属性可以继承？ 3.CSS3 新增伪类有那些？ 4、请解释一下 CSS3 的 Flexbox（弹性盒布局模型），以及适用场景？ 5、浏览器是怎样解析 CSS 选择器的？ 6、在网页中应该使用奇数还是偶数的字体？为什么呢？ 7、抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题] 8、为什么不建议使用统配符初始化 css 样式。 9、如果需要手动写动画，你认为最小时间间隔是
前端面试题集合五（css）
热门推荐
前端金牌摸鱼达人
01-09 28万+
前端面试题集合五（css）
面试必考15道CSS3基础面试题（含答案）
weixin_45819386的博客
04-26 6553
文章目录前言1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？？2、box-sizing属性？3、CSS选择器有哪些？优先级顺序？哪些属性可以继承？4.垂直居中几种方式有哪些？总结 前言 随着CSS的不断的发展，现在出现了CSS3，CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块；CSS3的新特征有很多，例如圆角效果、图形化边界
css的盒子模型(1)
2401_84097996的博客
04-19 933
 border-width可以用来指定四个方向的边框的宽度值得情况：（顺时针） 四个值：上 右 下 左 三个值：上 左右 下 两个值：上下 左右 一个值：上下左右 border-xxx-width（用来单独指定某一边得宽度） xxx可以是top、rigth、left、buttom• 3.内边距–padding。
CSS 悬挂空白与选区溢出
luemeon的博客
06-16 432
在（或pre-line）模式下，浏览器被要求既要保留空格，又要自动换行。原则 A：空格必须保留（因为是pre-wrap原则 B：空格后面没有宽度了，必须换行。如果把这些行尾空格硬塞在当前行，气泡盒子就会被撑大；如果把它们带到下一行开头，下一行的文本又会无故缩进（这通常不是用户想要的）。这些行尾的空白字符不消失，而是“悬挂”在行末的边界之外。它们存在于这一行，但被当作“零零兵”，不占用整行盒子的实际布局宽度（Advance Width）。
04_CSS及案例开发
人生得意须尽欢
06-17 332
本文摘要介绍了网页布局的核心概念和CSS盒子模型的应用要点。主要内容包括：1）盒子模型的基本用法，重点讲解内边距(padding)的四种设置方式及其对布局的影响；2）外边距(margin)的概念及其在调整元素位置时的作用；3）块元素与行内元素的区别及转换方法；4）浮动和定位技术的应用场景与实际案例开发。学习目标要求掌握盒子模型居中设置、元素类型转换、浮动布局实现、定位技术等核心技能，并通过案例练习巩固这些布局技术在实际网页开发中的应用。课程强调通过div标签划分网页结构，使用边距属性精细控制元素位置，为后续
vue学习第一阶段扩展：关于原子化CSS，DevTools插件以及小练习
2303_80072254的博客
06-17 277
* 每个组件写自己的样式文件 */直接用预定义的 class 名组合，不写自定义 CSS。-- 不用写 CSS，直接用 class 名表达样式 --> < div class = " bg-white rounded-lg p-4 " > < h1 class = " text-lg font-bold " > 标题 </ h1 > </ div >
前端入门精讲｜18个CSS高频进阶知识
2602_95057108的博客
06-21 223
承接上一篇CSS基础核心知识点，本篇继续深挖CSS进阶高频考点，涵盖布局适配、样式初始化、文本溢出、文档流、盒模型、属性继承、宽度适配等重难点内容。这些知识点是解决页面布局错乱、适配bug、样式兼容问题的核心，也是期末考试、前端入门面试的高频考题。全文搭配原理解析、区别对比、实战代码、踩坑总结，细节拉满，轻松拿下高分。在网页开发中，底部导航、版权信息、悬浮按钮等模块，需要永久固定在页面底部，不受页面滚动影响，最优解决方案为fixed固定定位组合样式。八、元素固定在网页底部的实现方案。
CSS 3D 硬核解析：四个属性手写旋转立方体
2503_93701293的博客
06-16 320
本文纯 CSS 实现 3D 旋转立方体，拆解 perspective、transform-style、transform、animation 四大核心属性，理清透视、3D 空间、变换执行顺序与动画要点，附完整可运行代码，同时讲解 GPU 渲染优化技巧，零基础也能吃透 CSS 3D 原理。
初级打字母练习游戏，让学习有点乐趣
shisongyuan的专栏
06-22 555
给自己家孩子编写的分享出来，希望你帮助给多孩子完成高考后，熟悉电脑。
Cesium CSS 元素教程
2201_75964656的博客
06-21 205
详解 Cesium.js CSS 元素：基于 WebGL 实现「CSS 元素」可视化效果，附完整可运行源码，涵盖 Cesium 等关键实现，附完整源码与在线 Demo，适合 Cesium 基础 学习与二次开发。
vue实现三角抽象思维计算矩形面积
cf8833的博客
06-20 277
这篇文章摘要： Vue组件实现了一个可交互的直角三角形与内嵌矩形绘图工具。用户可通过控件调整直角三角形的两条直角边长度(AB和AC)以及内嵌矩形的宽度和高度比例。组件实时计算并显示三角形面积、矩形面积及其占比、斜边长度等几何数据。绘图功能使用Canvas API实现，包含网格背景、三角形和矩形的绘制、顶点标注和尺寸标注。关键特性包括：响应式数据绑定、实时图形更新、面积计算和百分比显示。当矩形顶点F位于斜边BC上时，满足宽度比例+高度比例=1的关系。
使用HTML写一个悬浮摄像头，可拖拽、放大、缩小
weixin_52803316的博客
06-13 804
这段代码实现了一个可拖拽、可调整大小的悬浮摄像头窗口。主要功能包括：1) 通过浏览器API调用用户摄像头并显示实时画面；2) 窗口可自由拖动位置；3) 提供8个方向的调整手柄，支持窗口大小调整并设置最小尺寸限制（160×120px）；4) 采用固定定位，始终悬浮在其他页面内容之上。界面为黑色圆角矩形，带有阴影效果，光标会根据操作区域自动变化形状，提供直观的交互体验。
基于java Web 训练管理系统设计与实现 源码 论文
qq_251836457的博客
06-17 2016
用户信息实体，主要包括 用户编号,用户名,密码,姓名,性别,出生日期,证件号,民族,政治面貌,单位,入伍时间,照片,班级,排 等信息实体。1 用户( 用户编号,用户名,密码,姓名,性别,出生日期,证件号,民族,政治面貌,单位,入伍时间,照片,班级,排 )讨论信息实体，主要包括 讨论编号,疑问,说明,发布人,发布时间,状态,回答 等信息实体。系统主要用户实体,班级实体,排实体,科目实体,成绩实体,教学视频实体,教学理论实体,讨论实体，如图所示。班级信息实体，主要包括 班级编号,班级 等信息实体。
Node.js + Express 入门实战笔记-03-CORS
weixin_47138303的博客
06-18 263
浏览器会发请求，但若响应里没有合适的 CORS 头，浏览器会拦截 JS 读取响应，控制台才报 CORS 错。允许跨域请求携带 Cookie、 TLS 客户端证书（很少见）、HTTP 基本认证（浏览器弹窗那种，很少见）等凭证。预检通过后，浏览器才发真正的 POST（带 Authorization）是服务器通过响应头告诉浏览器「这个跨域请求我允许」的机制。所以 React（10086）请求 API（8080）属于。预检时声明客户端（浏览器）可以带哪些非简单请求头。浏览器缓存预检结果，减少重复 OPTIONS。
Unity PICO4 学习记录8： WebRTC
最新发布
m0_63485455的博客
06-22 262
这一篇和PICO本身没什么关系，只是记录一下开发过程我们要做一个“从超声设备采集影像数据，一对多地传给XR眼镜终端以及其他可能的设备”应用。发送端是Jetson，由同事负责；接收端XR眼镜端由我负责。同事说视频采集卡例程里给了两种通信协议：RSTP和WebRTC.一开始我尝试用HoloLens2，因为老师和医生们似乎更喜欢OST而不是VST；但是UWP ARM64 媒体栈对 RTSP 支持弱、MixedReality-WebRTC 停更，所以 HL2 不适合当主验证平台。
Vue2 + flv.js 对接海康威视摄像头实现数据大屏实时视频监控（完整方案）
pony君的博客
06-18 393
本文介绍了在Vue2数据大屏中对接海康威视摄像头的完整方案，解决浏览器无法直接播放RTSP流的问题。通过对比HTTP-FLV、HLS、WebRTC等技术方案，最终采用HTTP-FLV为主+HLS为备选的策略，利用flv.js和hls.js实现低延迟视频监控。文章详细说明了整体架构设计、前端实现代码（包括分屏布局、播放器初始化等关键代码），并分享了实际项目中的技术选型经验和解决方案。该方案适用于工业MES系统、仓储管理等需要实时监控的场景，支持2x2/4x4分屏切换，已在淀粉厂MES系统中成功应用。
AI+时代的前端开发：框架演进、职业重构与未来十年展望
心有猛虎细嗅蔷薇
06-18 422
前端开发并未"死亡"，而是在 AI 的催化下经历一场深刻的范式转移。从"页面组装工"到"体验架构师"，从"技术执行者"到"AI 协作者"——这场变革淘汰的是固守旧范式的从业者，奖励的是拥抱变化、持续进化的学习者。未来十年，大前端的边界将被彻底打破，而站在技术与产品交汇点的全栈工程师，将成为最稀缺的资源。对于 Vue 生态的开发者而言，2026 年是一个关键节点：Vapor Mode 的成熟标志着 Vue 进入"易用且极致"的新时代，Nuxt 4 的全栈能力让 Vue 开发者可以触达更广阔的技术领域。
WhatsApp Cloud API 踩坑：webhook 验证成功，消息却收不到
weixin_38680881的博客
06-22 325
先查——返回空就是它，POST补上立刻通。（90% 的情况到这一步就解决了）别假设"测试号自动、生产号才要配"——订阅是 WABA 级关系，不会跨环境自动延续，也可能是别人替你配过却没记录。直接对生产 WABA 跑自查，缺了就POST补。用验的type和expires_at（生产要0看日志而非状态码判断验签——验签失败也返回 200。别被"支付方式"告警带偏——客服窗口内回复免费，不需要支付。号码"未注册"走 Cloud API/register（设好 PIN）。
当 Agent 接管操作系统：鸿蒙 PC“第二操作系统”架构解析
qq_36863796的博客
06-17 4558
文章摘要： 随着AI时代的到来，传统操作系统（如Windows、HarmonyOS等）聚焦的“资源管理”模式正面临挑战。未来软件系统的核心需求转向“目标管理”，催生了运行于操作系统之上的“第二操作系统”——Agent Runtime。它承担任务规划、上下文管理、工具调度等新职责，形成“目标驱动”的新架构。HarmonyOS PC可能率先实现双层Runtime架构：底层HarmonyOS Kernel管理硬件资源，上层Agent Runtime与Workspace Runtime协同处理任务、上下文及工具调度
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值