玛珍，玛珍，margin！

最近在整理巩固面试相关的资料，又看到了熟悉的老朋友：margin，当时觉得其读起来很亲切，现在又发现很多遗忘的知识点。

了解margin

margin，译为“外边缘”，在CSS作为属性定义元素周围的空间，从以下盒模型中能更好的理解margin。

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

margin属性可以有一到四个值。

margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
margin:25px;
- 所有的4个边距都是25px

margin负值

margin-top、left负值：元素向上、向左移动
margin-right负值：右侧元素左移，自身不收影响；当右边无元素，其实就是缩小自身宽度。
margin-bottom负值：下方元素上移，自身不受影响

margin塌陷

margin塌陷（又称margin重叠）指文档流内，块级元素与块级元素垂直方向上的 margin 合并（塌陷）为单个 margin，且只发生在垂直方向。行内元素不存在margin 塌陷，因为行内元素不占有外边距，同样道理float元素也不存在margin合并。

总结为：

相邻元素的margin-top和margin-bottom会发生重叠
空白内容的标签也会重叠

解决方案：

1.BFC块级格式化上下文，创建隔离的容器

<body>

    <style>

        .aa {

            display: flex;

            flex-direction: column;

            width: 300px;

        }

        .bb {

            width: 200px;

            height: 200px;

            border: 1px solid #333;

            margin-top: 10px;

        }

    </style>

    <div class="aa">

        <div class="bb" style="margin-bottom: 10px;"></div>

        <div class="bb" style="margin-top: 10px;"></div>

    </div>

</body>

2.子元素浮动定位，父元素清除浮动

<body>

    <style>

        .aa {

            border: 1px solid red;

        }

        .bb {

            width: 200px;

            height: 200px;

            border: 1px solid #333;

        }

        .clearfix:after {

			content:'';

   			display: table;

    		clear:both;

		}

    </style>

    <div class="aa clearfix">

        <div class="bb" style="margin-bottom: 10px;"></div>

        <div class="bb" style="margin-top: 10px;float:left;"></div>

    </div>

</body>

3.修改代码，添加空div，设置为flex布局

<body>

    <style>

        .aa {

            border: 1px solid red;

        }

        .bb {

            width: 200px;

            height: 200px;

            border: 1px solid #333;

        }

    </style>

    <div class="aa">

        <div class="bb" style="margin-bottom: 10px;"></div>

        <div style="display: flex;"></div>

        <div class="bb" style="margin-top: 10px;"></div>

    </div>

</body>

玛珍，玛珍，margin！的更多相关文章

天气预报API(一)：全国城市代码列表（“旧编码”）
说明 2016-12-09 补充 (后来)偶然发现中国天气网已经有城市ID列表的网页... 还发现城市编码有两种,暂且称中国天气网这些编码为旧标准 "旧编码"的特征是 9个字符长度 ...
画面渲染：实时渲染(Real-time Rendering)、离线渲染(Offline Rendering)[转]
实时渲染(Real-time Rendering) 实时渲染的本质就是图形数据的实时计算和输出.最典型的图形数据源是顶点.顶点包括了位置.法向.颜色.纹理坐标.顶点的权重等.在第一代渲染技术中(198 ...
React 省市区三级联动
省市区所对应的数据来自:http://www.zgguan.com/zsfx/jsjc/6541.html react中的代码是: export default class AddReceive ex ...
记一次node爬虫经历，手把手教你爬虫
今天业务突然来了个爬虫业务,爬出来的数据以Excel的形式导出,下班前一个小时开始做,加班一个小时就做好了.因为太久没做爬虫了!做这个需求都是很兴奋! 需求说明访问网站 (循环)获取页面指定数据源 ...
unity 编辑器扩展简单入门
unity 编辑器扩展简单入门通过使用编辑器扩展,我们可以对一些机械的操作实现自动化,而不用使用额外的环境,将工具与开发环境融为一体:并且,编辑器扩展也提供GUI库,来实现可视化操作:编辑器扩展甚至 ...
金融量化分析【day112】：因子选股
一.因子选股基础二.因子选股策略实现代码 # 导入函数库 import jqdata import psutil #初始化函数,设定基准等等 def initialize(context): set ...
codevs 1021 玛丽卡（spfa）
题目描述 Description 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们 ...
codevs1021 玛丽卡
题目描述 Description 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们 ...
Codevs 1021 （玛丽卡）
题目描述 Description 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们 ...
Code[VS]1021 玛丽卡题解
Code[VS]1021 玛丽卡题解 SPFA Algorithm 题目传送门:http://codevs.cn/problem/1021/ 题目描述 Description 麦克找了个新女朋友,玛丽 ...

随机推荐

如何利用烛龙和谷歌插件优化CLS(累积布局偏移)
简介 CLS 衡量的是页面的整个生命周期内发生的每次意外布局偏移的最大突发性_布局偏移分数_.布局变化的发生是因为浏览器倾向于异步加载页面元素.更重要的是,您的页面上可能存在一些初始尺寸未知的媒体元素 ...
Celery周期性任务定义beat
通过celery beat可以使用周期性任务的定义. https://docs.celeryq.dev/en/stable/userguide/periodic-tasks.html 周期性任务bea ...
AutoGPT实战
1.概述人工智能(AI)的能力持续在全球范围内引起轰动,并对我们日常生活和职业生涯带来重大变革.随着像ChatGPT这样的先进生成型AI模型以及从GPT-3到GPT-4的加速,我们在高级推理.理解更 ...
《Span-Based Joint Entity and Relation Extraction with Transformer Pre-Training》阅读笔记
代码原文地址预备知识: 1.什么是束搜索算法(beam search)? beam search是一种用于许多自然语言处理和语音识别模型的算法,作为最终决策层,用于在给定目标变量(如最大概 ...
PB从入坑到放弃（七）PBer们的福音来了
写在前面也许现在的你需要用PB完成毕业设计.需要维护远古时代的代码,又或者是你呆的公司就是要求要用PB开发项目. 不管你是出于什么原因还在使用PB,不可否认PB在数据窗口非常优秀,熟练使用之后开发数 ...
零代码搭建一个微信小程序
本文分享自华为云社区<[新手指引]体验通过Astro Zero零代码快速搭建微信小程序>,作者:华为云Astro . 您将学会如何基于Astro零代码能力,DIY开发,完成问卷.投票.信息 ...
连Python都不熟也能跑通AI人脸识别？“隐藏Boss”竟是它！
摘要:先把AI人脸识别跑起来,然后研究它是如何实现的,整个过程中确实收获不少.所谓先跟着做,再跟着学,实践与理论结合,自己感觉有理解了一些基础概念入个门,在此分享一下自己的捣鼓经验. 1.买台小&qu ...
开心档之MySQL 数据类型
MySQL 数据类型 MySQL 中定义数据字段的类型对你数据库的优化是非常重要的. MySQL 支持多种类型,大致可以分为三类:数值.日期/时间和字符串(字符)类型. 数值类型 MySQL 支持所有 ...
智能电视APP鲜时光，如何应用AB测试打造极致的用户观看体验？
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群数字技术的发展让智能电视普及率大幅提升,2023年智能电视的市场渗透率已超90%,与智能电视相匹配的各类应用 ...
Axure 标记元件
快照:可以用来表示控件的截图功能箭头:有了连线,基本很少用它便签:相关于便利贴,写些说明.备注, 标记:标记好数字,对应数字的标记做解释说明