css margin、css margin 0 auto 收藏 0

MarginNote for Mac(电子阅读笔记工具) 中文

MarginNote是一款Mac和iOS平台上的学习笔记和知识管理工具，可以帮助用户更加高效地阅读、学习和管理知识。

以下是MarginNote的主要特点：

1. 支持多种导入格式：MarginNote支持多种格式的导入，包括PDF、EPUB、Markdown等，可以帮助用户快速导入和整理学习资料。

2. 多种笔记方式：MarginNote支持多种笔记方式，包括划重点、标注、摘录、评论等，可以帮助用户快速记录和整理知识点。

3. 关联笔记功能：MarginNote支持关联笔记功能，可以将不同知识点之间的关系进行连接和整理。

4. 智能提醒和复习功能：MarginNote具有智能提醒和复习功能，可以帮助用户按时复习和掌握知识点。

https://www.macz.com/mac/1282.html?id=ODY0NzM0Jl8mMjcuMTg2LjEyNi4xMjU%3D

5. 多种导出方式：MarginNote支持多种导出方式，包括文本、MindMap、Anki、Markdown等，可以方便地与其他工具进行协作。

6. 多平台同步：MarginNote支持多平台同步，包括Mac、iOS等，可以让用户在不同设备之间进行无缝切换。

总之，MarginNote是一款功能强大、易于使用的学习笔记和知识管理工具。它具有多种导入格式、多种笔记方式、关联笔记功能、智能提醒和复习功能等，可以帮助用户高效地阅读、学习和管理知识。同时，MarginNote还支持多种导出方式和多平台同步，可以方便地与其他工具进行协作。

CSS Margin中5个经典布局解决方案，重难点知识，记得收藏复习

前几天我在面试前端开发同学的时候，有问到关于margin基础布局相关内容的过程中，发现很多同学基本解释不清楚，今天刚好有点时间就整理了一篇笔记出来。就以下5点在CSS布局经常会用到的经典布局解决方案。

1. css中margin外边距（重叠）合并现象
2. css中margin外边距穿透现象
3. css中margin设置负值时的特性
4. css经典3列自适应布局：圣杯布局
5. css经典3列自适应布局：双飞翼布局

可以尝试动手试一试，有什么疑问 ！可随时交流，有问必答 。

margin 纵向重叠（合并）问题

元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并，合并后的间距就是两者中最大的那个值。

答案：

解析：item1 与 item4 之间的间距为 3个下外边距大小+2个盒子高度=20*3+20*2=100px

答案： item1与item4之间间距为 20px

解析：因为中间两个box中没有内容也没有边框线，所以外边距会一直重叠合并，所以最后item1和item4之间距离只有一个下外边距的大小

margin 穿透问题

当一个元素包含在另一个元素中时,如果父元素没有设置内边距或边框把外边距分隔开，它们的上或下外边距也会发生合并。

答案： 100px 、155px、155px

解析：

.container与浏览器顶部距离是100px，

.item与浏览器顶部距离100px + 5px+50px=155px

.box与浏览器顶部距离：100px+5px+50px=155px

margin-left 设置负值，元素向左移动

margin-right 设置负值，自身不受影响，右边元素向左移动

margin-top设置负值，元素向上移动

margin-bottom 设置负值，自身不受影响，下方元素向上移动

当.container .box1中margin-left:-100px;时，如：图1

当.container .box1中 margin-right:-100px;时，如：图2

当.container .box1设置margin-left:-100px;和margin-right:-100px时，如：图3

当.container .box1中margin-top:-100px时，如：图 1

当.container .box1中margin-bottom:-100px时，如：图 2

当.container .box1中同时设置margin-top:-100px; 和margin-bottom:-100px;时，如：图 3

这种布局的优点：

中间一栏内容最重要，最先加载和渲染，同时对搜索引擎优化最利。

两边内容固定，中间内容自适应

这种布局的优点：

中间一栏内容最重要，最先加载和渲染，同时对搜索引擎优化最利。

两边内容固定，中间内容自适应

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通

• PC端项目开发（1个）
• 移动WebApp开发（2个）
• 多端响应式开发（1个）

共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范

从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发

• 真机调试，云服务部署上线；
• Linux环境下 的 Nginx 部署，Nginx 性能优化；
• Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
• 企业项目域名跳转的终极解决方案，多网站、多系统部署；
• 使用 使用 Git 在线项目部署；

这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！

过程中【不涉及】任何费用和利益，非诚勿扰 。

如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自头条号！老师会邀请你进入学习，并给你发放相关资料

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com