前端大厂面试常见css题目|解决垂直方向margin合并，解决垂直方向margin溢出，float浮动定位的问题:容器的属性：flex,grow,shrink,wrap,align-items,

最新推荐文章于 2024-07-28 09:00:00 发布
最新推荐文章于 2024-07-28 09:00:00 发布
阅读量35 收藏 1
点赞数
分类专栏： 前端八股文 文章标签： 前端 面试 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43428283/article/details/137655396
版权
本文详细介绍了前端面试中常见的CSS问题，包括如何防止高度坍塌，解决垂直方向margin合并，以及float浮动定位的问题。通过四种方案防止高度坍塌，如设置`overflow:hidden`，添加空元素`clear:both`，父元素也浮动等。同时，文章深入探讨了BFC（Block Formatting Context）概念及其在解决这些问题中的应用。最后，讲解了弹性布局的相关属性，如`flex-direction`，`flex-wrap`，`justify-content`，`align-items`等，帮助理解现代Web布局的灵活性。
摘要由CSDN通过智能技术生成

防止高度坍塌 4种方案

父元素的高度：都是由内部未浮动子元素的高度撑起的
在这里插入图片描述
子元素浮动：还会对父元素造成影响
如果子元素浮动起来，就不占用普通文档流的位置，父元素高度就会失去支撑，也成为高度坍塌
在这里插入图片描述
俯视高度塌陷的效果
在这里插入图片描述
即使有部分元素留在普通文档流布局当中支撑着父元素，如果浮动起来的元素高度高于留下的元素，那么浮动元素的高度会超出父元素边框，用户体验同样不好
在这里插入图片描述
不好的解决
• 给父元素设置固定高度。
• 缺点: 多数情况下，父元素高度由内

了解本专栏 订阅专栏 解锁全文 超级会员免费看
学习记录wanxiaowan
关注
专栏目录
订阅专栏
2023大厂高频面试题之CSS篇
zag666的博客
05-18 1724
css的position属性取值 css选择器优先级和权重 box-sizing属性 CSS 盒子模型 CSS实现三角形 CSS布局 弹性布局display:flex 实现一个垂直水平居中 隐藏页面元素的方法 style-components HTML脱离文档流的方法 block，inline和inlinke-block transition与animation区别...
前端开发--css--盒模型margin使用技巧、margin-top塌陷、元素溢出、
sundanping_123的博客
07-04 228
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>盒子模型</title> <style type="text/css"> .box1{ width: 202px; height: 156px; ...
垂直方向margin重叠和margin坍塌问题
zmjのblog
07-05 501
垂直方向margin重叠是兄弟元素之间 <div class="container"> <div class="A">A</div> <div class="B">B</div> </div> .A, .B { width: 100px; height: 100px; backgrou...
margin水平和垂直方向方向上的不同
weixin_42187676的博客
07-22 585
在水平方向上则会叠加  
CSS 外边距(margin)重叠及防止方法
前端岚枫
12-08 3581
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。 两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。 但是边界的重叠也有例
CSS查缺补漏之《如何优雅解决margin垂直方向塌陷与合并问题？》
一只努力搬砖的打工妹纸
06-15 1424
解释margin垂直方向上塌陷与合并现象，并提出简单易行的解决方案~
【Web前端面试】葵花宝典（2022版本）—— CSS篇
qq_49002903的博客
06-08 4684
你还在担心面试不过嘛？面试题找不到，小编特意整理了30+道高频前端面试题，送给大家，希望大家都能顺利通过面试，拿下高薪，也可持续关注本面试题专栏。本篇文章主要写的是面试题中的CSS篇，之后会更新前端其他方面相关面试题。.....................
前端面试宝典【CSS篇】【1】
最新发布
BDawn的专栏
07-28 44
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。 在CSS（层叠样式表）中，浮动（float）是一种布局机制，允许元素在其容器内向左或向右移动，同时允许其他内容围绕它流动。 清除浮动是Web开发中常见的需求，特别是在使用CSS布局时，以确保父元素能够正确包裹其浮动的子元素。
前端css大厂面试题目|清除浮动的方式，，clear 属性清除浮动， 元素的层叠顺序，display、float、position的关系，解决 1px 问题， sticky 定位，bfc
VAN
04-13 216
问题描述：两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。计算原则：折叠合并后外边距的计算原则如下：●如果两者都是正数，那么就去最大者●如果是一正一负，就会正值减去负值的绝对值●两个都是负值时，用0减去两个中绝对值大的那个解决办法：对于折叠的情况，主要有两种：兄弟之间重叠和父子之间重叠（1）兄弟之间重叠。
不要告诉我你懂margin
dgk62408的博客
06-27 1160
你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？…… 写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。介于...
css：垂直方向外边距margin塌陷问题及解决
彭世瑜的博客
04-08 1976
margin塌陷现象： 在垂直方向如果有两个元素的外边距有相遇，在浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值比较大的，边距小的塌陷到了边距值大的值内部。 统一用到的的样式 * { margin: 0; padding: 0; } .box { width: 100px; height: 100px; text-align: center; line-height: 100px; } 一、水平方向margin不会塌陷 横向排列（水平方向）边距不会被合并 <
垂直方向margin重叠原因与解决方法
weixin_33743661的博客
09-30 1593
我们经常写样式的时候会遇到垂直方向margin重叠的问题，如下代码： <style> .container1 { color: #fff; } .first { margin-bottom: 20px; padding-left: 10px; ...
如何解决垂直方向的margin重叠
yuqin的博客
08-06 451
两个或多个块级盒子的垂直相邻边界会重合。 就是这样： <style> .container { margin: 30px auto; width: 600px; height: 300px; } .p { border: solid 3px #a33; } .c { width: 100px; ...
前端八股文（3）53-84
VAN
09-12 1526
前端八股文
javascript常见100问|前端基础知识|offsetHeight-scrollHeight-clientHeight-区别，HTMLCollection-NodeList-区别，vue-com
VAN
04-01 1324
适用于兄弟组件，或者“距离”较远的组件。常用 API● 绑定事件 event.on(key, fn) 或 event.once(key, fn)● 触发事件 event.emit(key, data)● 解绑事件 event.off(key, fn)Vue 版本的区别● Vue 2.x 可以使用 Vue 实例作为自定义事件● Vue 3.x 需要使用第三方的自定义事件，例如 https://www.npmjs.com/package/event-emitter。
前端八股文-Nodejs介绍，组成，架构和依赖，特点，运行环境安装，包和NPM,NPM包的版本管理，V8 引擎 和 libuv 库，BFF 中间层，服务端渲染，
VAN
11-05 1188
前端学习
JavaScript教程|导出导入，import*,export default,
VAN
01-07 998
这是我们在本节和前面章节中介绍的所有 export 类型：你可以阅读并回忆它们的含义来进行自查：在声明一个 class/function/… 之前：独立的导出：重新导出：export * from “module”（不会重新导出默认的导出）。export {default [as y]} from “module”（重新导出默认的导出）。
JavaScript教程| 私有的和受保护的属性和方法，内部接口和外部接口受保护的 “waterAmount”
VAN
01-02 972
面向对象编程最重要的原则之一 —— 将内部接口与外部接口分隔开来。在开发比 “hello world” 应用程序更复杂的东西时，这是“必须”遵守的做法。为了理解这一点，让我们脱离开发过程，把目光转向现实世界。通常，我们使用的设备都非常复杂。但是，将内部接口与外部接口分隔开来可以让我们使用它们且没有任何问题。
前端面试题：一道CSS问题揭示你的专业水平
通过这些题目，作者旨在帮助读者巩固CSS知识，理解和掌握大厂面试中可能出现的问题。" 在前端开发中，CSS是构建网页样式的重要工具，而了解并熟练运用CSS是成为一名优秀前端工程师的关键。本资源特别强调了以下CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学习记录wanxiaowan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值