首页 > 作文

margin能做什么(css前端编程margin详细分析)

更新时间:2023-04-03 19:19:24 阅读: 评论:0

这篇文章详细讲下margin,经常有小伙伴把我跟我的兄弟padding搞混,下面我就详细的说一下我的主要工作,让大家能够明白我到底是做什么的。

通常情况下,我会帮助一些元素让他们之间产生距离,先来看一段代码:

<!-- HTML结构 --> <div class="boxA">a</div> <div class="boxB"&g读书笔记读后感t;b</div> <style> /* css修饰 */ div{width: 200px;height: 200px;} .boxA{background: palevioletred;} .boxB{background: royalblue;} </style> 

两个写好的DIV元素会从上到下显示,就是上图的效果,在这里我们会发现a的下方和b的上方紧紧挨在一起的,如果想让他们分开一些,可以给a添加一个margin

<style> /* css修饰 */ div{width: 200px;height: 200px;} .boxA{backg灵魂的共鸣歌词round: palevioletred;margin:20px;} .boxB{background: royalblue;} </style> 

为什么会变成这个样子了呢,我们本来只想让下方有距离就可以了,但是怎么感觉不一样呢?这是因为我的写法是有很多种的,可以先来研究一下有哪几种写法。

首先,刚刚写的是margin:20px,在这里如果后面写一个值的话,代表了上下左右四个方向上都会添加20像素的距离

如果你写了两个值,那么第一个值代表上下距离,第二个值代表左右;
写三个值,第一个值代表上,第二个值代表左右,第三个值代表下;
写四个值,就分别代表上、右、下、左四个方向

参考下面的图例:

其实关于我的写法,还可以写单个方向的,使用margin-top、margin-left、margin-right、margin-bottom都可以实现。

div{width: 60px;height: 60px;} .boxA{background: palevioletred;margin-left:10px;} /*左*/ .boxB{background: royalblue; margin-right:10px;} /*右*/ .boxC{background: green; margin-bottom:10px;} /*下*/ .boxD{background: orange;margin-top:10px;} /*上*/ 

如上图所示

元素A,在左边有10像素的距离,

元素B,在右侧有10像素距离(不过由于浏览器默认靠左排列,这里看不出效果)

元素C,在下方有10像素距离

元素D,在上方有10像素距离

等等?! 好像哪里不对?

C和D之间好像只有10像素的距离,而不是我们期望的20像素。

好吧,我承认,这是我的问题。

当元素在垂直方向上(水平方向是正常的),两个元素,分别设置了margin-top和margin-bottom,我不会叠加这两段距离,而是把它们重叠在一起了。

这有可能会造成跟你的预期不符。以后写的时候要注意哦

通常情况下,我们只需要给一个元素设置距离就好了,例如:

<style> /* css修饰 */ div{width: 200px;教育部考试中心综合查询网height: 200px;} .boxA{background: palevioletred;margin-bottom:20px;} .boxB{background: royalblue;} </style> 

这样就实现了a和b之间四年级上册作文的距离,如果要想缩短他们的距离该怎么做呢?

你只要写负值,就能实现,就像下面这样

<style> /* css修饰 */ div{width: 200px;height: 200px;} .boxA{background: palevioletred;margin-bottom:-50px;} .boxB{background: royalblue;} </style> 

看,我是不是很强大!但同时我还有一个小bug,那就是两个元素嵌套的时候

比如:这里有一个元素,里面又放了一个元素,如果给里面的小元素写了margin-top会发现没有效果,我们来试验一下。

<!-- HTML结构 --> <div class="wrap"> <div class="box"></div> </div> <style> /* css修饰 */ .wrap{width:200px;height: 200px;background: #ccc;} .box{width: 100px;height: 100px;background: pink;} </style> 

上面是没有加margin-top的效果,在看一下给粉色块加margin-top的效果

<style> /* css修饰 */ .wrap{width:200px;height: 200px;background: #ccc;} .box{width: 100px;height: 100px;background: pink;margin-top:20px;} </style> 

这个问题的解决方式有:

1)给父元素添加overflow:hidden;
2)给父元素添加border、padding属性
3)给其中一肠炎的早期症状个元素浮动

我们可以加overflow:hidden来看一下效果

<style> /* css修饰 */ .wrap{width:200px;height: 200px;background: #ccc;overflow:hidden;} .box{width: 100px;height: 100px;background: pink;margin-top:20px;} </style> 

好了,这样就完美解决了这个小bug。

总结一下

大家通常喜欢叫我外边距,我觉得这个名字挺恰当,我的主要作用就是控制元素之间的距离,大家注意下与padding的区别!

本文地址:/d/file/titlepic/107865516

本文发布于:2023-04-03 19:19:21,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/7ad910b277292d57fc6eb068b1d1a755.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:margin能做什么(css前端编程margin详细分析).doc

本文 PDF 下载地址:margin能做什么(css前端编程margin详细分析).pdf

标签:元素   距离   像素   效果
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图