HTML5如何解决margin-top的塌陷问题（附代码）
不言
发布： 2018-08-09 15:46:39
原创
4144人浏览过
这篇文章给大家介绍的内容是关于HTML5如何解决margin-top的塌陷问题（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
/* 解决margin-top塌陷问题 */
/* 1.设置border padding */
/* border: 1px solid green; */
/* padding: 1px; */
/* 2.设置overflow */
overflow: hidden;
}
/* 3.通过伪类
实际开发使用
*/
.clearfix:before{
content: "";
display: table;
}
.box1{
width: 100px;
height: 100px;
background-color: green;
margin-top: 50px;
}
</style>
</head>
<body>
<p class="box clearfix">
<p class="box1"></p>
</p>
</body>
</html>登录后复制
运行效果如下：
相关推荐：
Html5中video标签的用法：如何自动填充满父div标签
立即学习“前端免费学习笔记（深入）”；
以上就是HTML5如何解决margin-top的塌陷问题（附代码）的详细内容，更多请关注php中文网其它相关文章！
相关标签：
HTML速学教程(入门课程)
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
来源：php中文网
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
-
2019-04-16 16:04:28
-
2020-09-15 11:26:00
-
2020-09-10 14:26:14
-
2020-09-08 11:06:15
-
2020-09-09 09:46:36
-
2020-10-12 14:51:04
-
2020-09-10 14:40:02
-
2019-04-24 16:20:55
-
2020-10-13 11:40:03
-
2019-04-15 14:06:21
最新问题
441
H5页面如何实现动态内容加载效果 3种动态加载技术让你的H5页面活起来
实现H5页面动态内容加载的核心技术有三种：1.使用Ajax异步请求更新内容，通过XMLHttpRequest或fetchAPI向服务器获取数据并用JavaScript插入页面，适合点击加载更多等场景，优点是兼容性好但需注意网络压力；2.利用Vue/React框架的响应式数据绑定，只需更新数据即可自动渲染视图，适合结构复杂的交互页面，同时需优化性能；3.使用WebSocket建立持久连接实现服务器主动推送，适用于聊天室、直播弹幕等实时性需求高的场景，也可选用长轮询作为替代方案。根据项目需求选择合适
2025-07-24 13:28:01
H5页面制作中如何提升页面安全性 H5安全防护的10个必备措施
H5页面安全性可通过10项措施提升：1.防止XSS攻击，对用户输入转义处理并使用CSP；2.设置CSP策略限制脚本加载来源；3.防止CSRF攻击，启用Token验证机制；4.合理管理Cookie与Storage，敏感信息加密存储；5.使用HTTPS协议保障数据传输安全；6.图片与资源防盗链，设置Referer检查或CDN鉴权；7.接口请求防刷限流，设置频率限制并增加验证机制；8.移动端安全适配，检测调试模式并识别异常行为；9.谨慎引入第三方脚本，使用SRI校验完整性；10.定期做安全扫描与测试，
2025-07-22 16:44:01
H5页面制作中如何设计高点击率按钮 提升按钮点击率的7个技巧
设计H5页面高点击率按钮的关键在于清晰传达意图和提供顺手操作体验。1.明确按钮文案，使用动词开头并加入利益点，如“立即领取优惠券”；2.突出主按钮、弱化次要操作，主按钮用对比色并置于视觉焦点区域；3.按钮尺寸适中，建议44px×44px以上，并保持间距与合理布局；4.适度使用动效提升交互体验，如点击反馈与加载提示；5.颜色对比强烈且符合品牌调性，引导用户视线聚焦；6.结合场景设置按钮位置，减少用户思考成本，如表单页按钮置底、卡片式布局右下角放置；7.通过A/B测试持续优化按钮文案、颜色、位置等要
2025-07-19 10:16:02
H5页面制作中如何适配不同分辨率屏幕 多分辨率适配终极方案
H5页面适配不同分辨率的核心在于设置viewport、使用rem弹性布局、图片响应式处理和媒体查询微调。1.设置viewport元标签，通过width=device-width、initial-scale=1.0等属性确保页面正确识别设备宽度并禁用缩放；2.使用rem单位动态计算html字体大小，实现整体布局按比例缩放；3.图片采用srcset、sizes属性及background-size等技术适配多分辨率屏幕，建议提供@2x/@3x高清资源；4.通过媒体查询对极端分辨率做细节调整，如按钮字体
2025-07-15 14:37:01
收藏
