MARGIN在发射端什么意思(Margin什么意思)

http://www.itjxue.com  2023-01-30 09:48  来源:未知  点击次数: 

margin和padding

ps:如果想要深入了解css盒模型,可以去 w3cSchool 找到关于盒模型的详细概述,这里只会简单的介绍部分盒模型相关的知识

这是一个元素的盒模型展示,几乎所有元素都是使用这种盒模型构成的,盒模型分四个部分,从里到外分别为 element(元素) 、 padding(内边距) 、 border(边框) , margin(外边距)

写在双闭合标签里面的内容通常会显示在元素的element部分,也就是内容区。

页面中的显示效果为:

如果我在div内部再加一个图片,则div的内容区域被继续撑开:

呈现效果为:

padding不会占据元素的内容区域,但是它会扩展一个元素的内部区域,可以打一个比方,我们每个人本身就好比是一个元素的element,而你身上穿的衣服就好比是元素的padding部分,你的衣服既是你又不是你本身,别人在找你的时候如果碰到你的衣服你可以感觉到是有人触碰了你,但是你的身体本身并不会延伸到衣服的内部

还是使用上面的那个div,我们现在给这个div加上一个padding,在这之前为了方便观察,我们先给这个div加上一个背景颜色和宽度,

现在呈现出来的效果:

我们可以看到,现在文字和图片还是在这个元素的底部的,我们现在给他加上一个50px的padding

其中蓝色部分是element,也就是元素的内容区,400 * 125代表了我们设置了400px的宽度,里面的图片高度是125px,内容区被撑开,所以此时元素的内容区是400 * 125像素的大小,然后往外看,padding有4个50,这是代表了这个元素在上下左右四个方向上的padding都是50像素,此时我们整个元素的占位宽度就是400+50+50=500px,高度则是125+50+50=225像素,所以但是由于元素内容的部分不能延伸到padding区域,所以上面的文字和图片还是都在元素本身的内容区,不会随着元素尺寸被padding撑大而向外扩展。

再回到这张图片

现在我们有一个a标签构成的超级链接,点击这个a标签可以跳转到对应的页面,但是有的时候在页面中文字可能比较小,如果只有在点击到文字上时才能跳转的话会影响用户体验,所以我们要让a标签的点击区域变大,有两种方式可以解决这个问题:

为了方便观察,我们同时给他一个背景色

这时,我们由于扩大了a标签的宽度和高度,所以整个绿色的区域都是a标签的范围,自然都可以实现点击效果。

上面那种方式可以实现大多数需求,但是现在还有一个问题,就是当a标签的可点击范围不固定时,或者由于种种问题我们不能给a标签转成块级元素时,上面那种方法就不生效,比如下面这种场景:

这是一个通常网页中常见的菜单栏,现在我有一个需求,就是需要给被点击超级链接加大尺寸方便点击,同时加一个统一的背景颜色,以便于让用户区分哪些是可以被点击的区域。

按照上面的那种方式,我们可以这样设置

呈现的效果是

这时如果我们想要给文字居中还需要设置两个样式:

然后出来的效果是这样的:

这时我们已经达到了我们所需要的效果,但是还有一种情况,就是当列表内的文字长短不一时,这种方式就会出现问题:

边框的使用没有什么好说的,只有几个主要注意的地方:

其中1、2比较容易理解,下面解释一下第3点。

我们在做页面的时候,有的时候会使用这样的特效:

这两种效果最大的区别在于2比1多了一个过渡的效果。

按照没有过渡效果的border(以下简称效果1)的思路,转变成有过渡效果的border(简称效果2)应该只需要加一个 transition 作过渡动画就可以了,但实际上如果我们只是在效果1的基础上加了一个 transition 的话则会出现这样的效果:

在初学css时,margin和padding最容易混淆,实际上我们只需要注意两者最大的区别就可以,那就是 padding 可以延伸 background 的属性,主要是 background-color 和 backgound-image ,而 margin 不会延伸这些属性。

我在这里写了两个div,给他们加了同样的宽度并分别加了背景颜色,同时给div1加了几个文字内容,由于块级元素的特性,他们分别处于两排。

现在我给div1设置50px的padding

可以看到,现在div1的元素本身被撑大了,现在div1的高应该是50 + 200 + 50 = 300px

同样,由于上面提到的padding的特性,所以文字依然是在内容区,没有进入padding的部分。

此时我们可以看到,div1的整体尺寸被放大了,同时背景颜色延伸到padding的范围。

现在我再给div1设置5px的border

这时div1的整体高度应该是5 + 50 + 200 + 50 + 5 = 310px

然后再设置20px的margin:

我们先不用管其他方向,先看下面,也就是div1和div2交接的地方。

在这里我们可以看到div1和div2之间有20px的间距,这一部分就是div1的margin,而且和padding最大的区别是这一部分没有延伸div1的背景色和内容区域,同时也没有让div的元素尺寸发生改变

因此我们可以这样理解

这里看完了,我们现在再回头看margin右侧的问题

我们可以发现,Chrome在审核元素时会自动将对应部位改变颜色,在右侧鼠标放在对应的位置时,左侧的元素也会实时响应出对应位置,如图所示,在element、padding、border时显示均正常,margin时上、左、下三个方向也没有问题,唯独右侧会比我设置的margin要大得多( margin:20px ),这是因为块级元素独占一行的特性,让他在自己元素本身同行的位置会有默认的 margin:auto; ,即 同行下所有元素没有占的位置均为这个元素的margin ,这也是块级元素不能和其他元素同行的原因。

元素的盒模型会有各种各样特殊的问题,下面举几个常见的例子以及经常出现的问题和解决方式:

我们在布局时,由于元素的高度通常为后台提供,所以前端页面的部分通常不会给固定的高度以免结构混乱,所以我们在布局时需要灵活运用padding和清浮动。

上面一个div内部有一个ul无序列表,div上下均距离ul有一定的距离。

在我们写静态页面时无序列表的数量可能是固定的(4个),但是js加载时通常数量不固定,可能少于4个也有可能更多,这时如果我们给一个固定的高度则会出现内容溢出的问题

所以这里我们需要给div设置上下相等的padding,而不是固定高度。

在HTML中,一个元素内部的第一个子元素如果有margin-top的话即会将子元素的margin-top赋给父元素:

如图所示,我在元素中给h1设置了margin-top,但是h1的margin-top并没有生效,而是传递给了它的父元素div,导致div整个被拉了下来,布局错乱。

请教前端排版技巧,margin 和position的区别

margin是外边距,就好比你家的房子与周围其他房子之间的距离,也就是说margin是受周围其他元素影响的。

position则是定位,根据参数的不同会有不同的定位方式。position:relative 是相对定位,是以元素的当前位置来作为定位的参照物,比如left:10px; top:-5px,就是把元素往左挪10像素,往上挪5像素。position:absolute 则是绝对定位,是以整个文档窗口来作为定位的坐标系(原点在左上角),比如left:200px; top:100px,就是把元素移到距离窗口左边200像素,上边100像素的位置。定位是不受周围其他元素影响的。

谁能告诉我margin和padding的用法以及区别

margin\padding在网页中是css样式

代码如下?a{margin:5px;padding:5px}

其实是有上下左右4个参数的,上边的写法是简写,实际上等价于

a{margin:5px?5px?5px?5px;padding:5px?5px?5px?5px;}

先解释下4个数字代表什么,?代表距离上、右、下、左的距离

margin?是标签距离周围标签的距离

padding?是标间内容和边框间的距离

图中红色表示元素,2个灰色框表示padding和margin

margin在web前端里是什么意思

margin和padding是在html中的盒模型的基础上出现的,margin是盒子的外边距,即盒子与盒子之间的距离,而pdding是内边距,是盒子的边与盒子内部元素的距离。

请问,margin穿透是为什么

2个盒子,当上面的盒子设置margin-bottom:50px

而下面的盒子设置了margin-top:80px

2个盒子之间的距离本来应该130px;然后并没有,浏览器会按照最外边的那一条边。80px

CSS理解之margin

margin重叠通常特性:

margin重叠三种情况:

demo 1:

1.相邻兄弟元素margin重叠

兄弟元素的上下margin发生了重叠

2.父级和第一个/最后一个子元素

demo 1:

inline元素(内联元素,像图片、文字这样的东西)

块状格式化上下文元素(BFC元素)

同样可以利用父子margin重叠条件来去除margin重叠:

demo 2:

demo 2 :

demo 2:

去掉margin-bottom重叠与上面类似。

3.空的block元素margin重叠:

空的block元素发生margin重叠,也需要一些条件限制:

去掉空的block元素的margin重叠也是利用上面的条件:

3.margin重叠的计算规则:

1、正正取大值:

2、正负值相加:

3、负负最负值(取绝对值大的):

首先理解margin atuo的作用机制 ,先看一些事实例子:

1.元素有时候,就算没有设置width或height,也会自动填充外部容器

例1:

例2:

以上两个例子是比较常见的,没有设置宽高也会自动填充所在容器。

若刚才的两个例子,如果设置了width或heigth,自动填充特性就会被覆盖。

总之一句话,auto就是用来分配。

通过以上的例子,很多事情就很好理解了,比方说:

1.为什么图片设置了 margin:0 auto 不水平居中?

如上图,设置了 margin auto ,图片为什么还是不居中呢?

因为图片是inline水平的,它占据的空间并没有撑满整个容器,如果没有设置宽度值。所以它就不满足 margin auto 用来填充剩余空间的条件,因为他根本就没有剩余空间。要想让它居中也很简单:

2.为什么明明容器定高,子元素也定高了, margin auto 0 无法垂直居中?

上图水平方向剧中了,但是垂直方向不剧中,父级元素高度有了,子元素高度也有了,为什么还是不垂直居中呢?

因为他不满足占满整个容器这个条件,想一下,如果,没有为.son设置高度值,它之前满足占满整个容器这个条件吗?很显然不满足,也就没有剩余空间,所以设置 height:100px margin auto 不会垂直居中。

还需要注意一点:用 margin:auto 来实现居中,它计算后的值必须是正直,比如说你的父容器宽度1000px,子元素宽度2000px,这时设置 margin:auto 它是不居中的。

那么如何实现垂直方向上的剧中呢,方法很多不止一种:

1.writing-mode与垂直居中:

更改流为垂直居中之后,内容会自动撑满垂直方向的高度。这时宽度不会自动撑满容器,所以宽度的水平居中就失效了。

2.绝对定位元素实现垂直居中:

子元素设置了 top:0;right:0;bottom:0;left:0; 之后,没有设置宽高,absolute元素也自动填满了容器。

1.margin负值下的两端对齐(主要利用了margin可以改变元素尺寸这一特性:正直变小,负值变大)

由于 div class="ul"/div 没有设置宽度,所以设置了 margin-right:-20px; 后,改变了它的宽度,增大了20px,变为1220px。这时我们再把 li 的宽度设置为计算好的386.66666px,就可以实现没有间隙的两端对齐。 主要利用了margin负值增加它的空间 。

demo:

可以看出它的垂直方向是没有margin的,是无效的。

2.第二种常见的无效是margin重叠,比如你设置了margin-top当发现没有效果,这就是margin重叠带来的影响。

3.display:table-cell与margin

demo:

可以看出设置的margin是无效的。

但是对替换元素设置table-cell是可以发生作用的,但平时我们不会给替换元素设置table-cell,这是没有任何意义的,所以记住这点就行。

4.position:absolute与margin,绝对定位元素非定位方向的margin值 “无效” ,定位方向的margin值是有效的。

(责任编辑:IT教学网)

更多

推荐通讯数据软件文章