CSS深入理解之margin

2024-04-30 07:59:38

前言

改变容器尺寸

margin改变容器尺寸有以下两个限制条件:

使用于没有设置宽高的普通block元素
float/absolute/fixed元素以及 inlines水平 table-cell元素.
只试用于水平方向

margin百分比

1.普通元素的百分比margin值是相对于容器宽度计算的
2.绝对定位元素的百分比margin值是相对于第一个定位祖先元素的宽度计算

也就是说margin的宽度都是相对于其祖先元素计算的.

margin重叠

1.block水平元素(不包括float和absolute)
2.只发生在垂直方向(如果修改了writting-mode)

父子元素margin重叠条件

父元素非块状格式化上下文元素
父元素没有border值;
父元素没有padding值;
父元素与第一个子元素之间没有inline父元素分隔
父元素没有高度限制

我们可以通过设置;(添加overflow:hidden).设置border/padding/添加一个inline元素/添加高度等方法来解决margin重叠的问题;

margin重叠的规则,简而言之就是取两个值的和

margin auto属性

有时候,就算没有给元素设置宽高,他也会自动填满容器,那么如果我们设置宽高以及margin:auto后,就可以有自动margin填充了
图片是默认inlie的,所以不会自动居中,需要修改它的block值;
垂直居中绝对定位元素在拉伸的情况下,设置一个宽高度,然后margin :auto,那么就可以实现自动居中了,也就是时候margin填充了拉伸后这只宽高留下的空白.

margin 无效的情形

1.inline水平元素垂直margin无效
2.display:table-cell/table-row等声明的margin无效

转载于:https://www.cnblogs.com/heyuqing/p/6185668.html

CSS深入理解之margin相关推荐

学习笔记之CSS深入理解（慕课网张鑫旭主讲）
一.CSS深入理解之border 1. border-width不支持百分比受语义和使用场景决定的,不会因为设备大而边框变大的 2. border-style属性 border-style:dott ...
CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)
BFC的理解与应用首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧 ...
html css 深入理解float
html css 深入理解float 首先,我们来看一段权威的关于float的解释: "浮动会让元素脱离文档流,不再影响不浮动的元素.实际上,并不完全如此.如果浮动的元素后面有一个文档流中的 ...
css盒模型中margin很牛逼
css盒子模型,说简单也简单,用的时候也有不简单的. 其中margin的值可以为负值,并且为了实现margin,忽略父级的padding.border.甚至定位.这在布局上很有用,要注意. ----- ...
[css] css中padding和margin是相对于父元素还是子元素呢？
[css] css中padding和margin是相对于父元素还是子元素呢? padding就是往自己身体里塞东西(盒子里面),margin就是穿衣服(盒子外面). ==>padding相对于子 ...
[css] 你所理解的css高级技巧有哪些？
[css] 你所理解的css高级技巧有哪些? 各种动画效果,能用css的都可以不去用js写的,对我来说就很高级个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...
CSS：理解:Before和:After伪元素
CSS样式表的主要作用是修饰Web页面上的HTML标记,但有时候,为了实现某个效果而往页面里反复添加某个HTML标记很繁琐,或者是显得多余,或者是由于某种原因而做不到.这就是CSS伪元素(Pseudo ...
CSS深入理解之line-height
以下文字整理自慕课网--张鑫旭的<CSS深入理解之line-height>. 一.line-height的定义 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这 ...
css margin padding 0,CSS 彻底理解margin与padding
我们在刚开始接触CSS的时候总是被margin和padding闹的晕头转向,什么时候设置margin,什么时候设置padding,不是太清楚,设置了以后在界面上看到的效果也差不多呀. 如何理解marg ...

最新文章

热门文章