成长是一辈子的事儿!大家好!我是时问新。分享前端、Python等技术,以及个人成长路上的那些事儿。
margin属性
margin是盒子的外边距,是盒子和其他盒子之间的距离。
margin也有四个方向。
![cb29a66c75db44665c8c9c1e719cf2c4.png](https://i-blog.csdnimg.cn/blog_migrate/c7f8be1498307f7e1161b59eb0101a47.jpeg)
以margin开头,接着跟一个小短横,然后跟表示方向的单词,就是margin的四个方向的小属性。
margin的塌陷
所谓的margin的塌陷,就是竖直方向的margin,有塌陷现象。
这个现象是:小的margin会塌陷到大的margin中,而margin不叠加,以大值为准。
比如下图:
![f17b52c9a5e811ee378eb46e87277b19.png](https://i-blog.csdnimg.cn/blog_migrate/8f06e242d3dd1a7ef488316a43d24100.jpeg)
上面的盒子,把下面的盒子向下"踹"了30像素,下面的盒子,把上面的盒子向上"踹"了40像素。而最终在页面上显示的时候,这两个盒子之间的距离是40像素,而并不是70像素。这就是margin的塌陷现象。
而margin在水平方向并不具有塌陷现象,是可以叠加的。
接下来,我创建一个叫"margin属性详解.html"的文件,在vscode和浏览器中进行演示。
margin属性详解欲为诸佛龙象先做众生牛马
我创建了两个span标签和两个div标签。
span标签是行内元素,可以并排显示,div标签是块级元素,不能并排显示。
关于行内元素和块级元素,后面会介绍。这里先知道就行。
两个span标签,我设置了左右方向的margin,两个div标签,我设置了竖直方向的margin。
在浏览器中,效果如下:
![0929e58b8c123fee3f069e5ff7cda6ba.png](https://i-blog.csdnimg.cn/blog_migrate/cd2ad5c3b298f330c8ce2b25b98b3219.jpeg)
现在我在页面的span上右键点击"检查",打开浏览器调试窗口,把鼠标滑到代码区域的span1上,用肉眼就能很明显的看到,页面渲染区域的span1和span2之间的水平方向距离,肯定是超过10像素的,也就是说在水平方向上,margin不塌陷,会叠加。它们之间的距离是10+20=30像素。
![9314a1830b678933a00a797f96138330.png](https://i-blog.csdnimg.cn/blog_migrate/b18e20f58242b8ea9db3db1e3a3084e2.jpeg)
我把鼠标滑到box2上,就能看到box2和box1之间竖直方向的距离就是20像素,取的是20这个大值,而不是进行叠加。也就是说,在竖直方向上,是有margin塌陷现象的。
一些元素有默认的margin
一些元素,比如body、ul、p等标签,在我们什么样式都没有给它们设置的时候,浏览器就会给它们设置默认的margin,这些默认的margin,会影响我们开发精准的网页。
因此,在我们开始编写一个网页的时候,就要把这些具有默认margin的元素的默认margin清除掉。
如何清除呢?可以这样写:
![bf15510b7568bba503e2ac4473c1398d.png](https://i-blog.csdnimg.cn/blog_migrate/2bb2830d8341a7816863524661a95835.jpeg)
这里的*号,是通配符选择器。通配符选择器表示选择页面上所有的元素。
同样的,一些元素也具有默认的padding,所以我们一开始,就把所有的元素的margin和padding都设为0。
但是通配符选择器有效率问题(并不是所有的元素都有默认的margin和padding,只是一部分),所以我们使用并集选择器,把经常要用到的元素设置一下就行了。
![976d99b13157efe03d8480b9431b5b14.png](https://i-blog.csdnimg.cn/blog_migrate/1d826dac7861a62967e90eaef3f266b7.jpeg)
关于一些元素具有默认的margin和padding,我在浏览器中演示一下。我还是在"margin属性详解.html"这个文件中,写一个ul,再写一个p。
margin属性详解欲为诸佛龙象先做众生牛马
他是平原跑出来的第一轮太阳 闭着眼都能感觉到阳光 我被燃烧过劲氧化发黄 枯燥风化 且时光还长
任何瞬间的心动都不容易,不要怠慢了它。
在浏览器中,效果如下:
![dc7c3e27a015567d26e68351d31d6c02.png](https://i-blog.csdnimg.cn/blog_migrate/6c88b6a1d3cd3ca89531c11fdd2554e1.jpeg)
我们看到,我在代码中只是新添加了一个ul,一个p,并没有给body、ul、p设置margin,span标签只设置了左右方向的margin,并没有设置上下方向的margin,但是在浏览器中,"欲为诸佛龙象先做众生牛马"所在的span和浏览器的窗口上边框之间是有一定的缝隙的。
由此,我们就能看出,body和浏览器上边框有一个向上的margin,我们并没有给body设置margin,那么就说明body具有默认的margin。
根据代码,第二个div,我们并没有设置下margin,但是ul和第二个div,以及下面的p之间,都有距离,这就说明ul和p标签都具有默认的margin。
我们还可以右键--检查,打开调试面板,把鼠标滑到代码区域,点击body,并把鼠标悬停到body上,会看到页面的显示区域,body默认就有上下左右方向的margin,
![92e6d7ec1ecb618d81f8a0fee67c44ed.png](https://i-blog.csdnimg.cn/blog_migrate/be6722e0ba143307b0d5111aaf4c9dda.jpeg)
再看看body的盒子模型图,就能看到body上下左右四个方向,默认的margin是8像素,
![1e351f99d06fb225d8713229305fb9d6.png](https://i-blog.csdnimg.cn/blog_migrate/a83e195b067359bdc5e6a64881ecbd1e.jpeg)
同样的,我们点击代码中的ul,把鼠标悬停到ul上,会看到ul的盒子模型图上,显示ul默认具有上下方向的margin是16像素,左右方向margin为0,
![ece2e7e8ea0be1bb785ff6d1d3813995.png](https://i-blog.csdnimg.cn/blog_migrate/d213db8c4fbb2634570787fc4b0b8d30.jpeg)
ul的盒子模型图如下,
![9e8a7bcfa6e9383c4849f2e58d14e045.png](https://i-blog.csdnimg.cn/blog_migrate/08b2f9e299ab683f2c2eacd357a30c88.jpeg)
同样的,在代码区点击p,鼠标停在p上,就能看到p元素也有默认上下方向的margin,
![bfcde916dd2067385cf9d781e4dbc5c0.png](https://i-blog.csdnimg.cn/blog_migrate/2ba347f44a7cc611e98dad79d34733e8.jpeg)
p元素的盒子模型图上,上下方向margin为16像素,左右没有,如下:
![bd21f40f675db4d611d92670566a371d.png](https://i-blog.csdnimg.cn/blog_migrate/0bca4ab16689245e3121d159463181e7.jpeg)
一些元素具有默认的margin,也有默认的padding,我们都可以通过盒子模型图来看到。
现在,我们为了页面更精准,就要去掉这些元素默认的margin和padding,在css中加上去掉这些元素默认margin和padding的代码:
margin属性详解欲为诸佛龙象先做众生牛马
他是平原跑出来的第一轮太阳 闭着眼都能感觉到阳光 我被燃烧过劲氧化发黄 枯燥风化 且时光还长
任何瞬间的心动都不容易,不要怠慢了它。
现在,浏览器中效果就是这样:
![2ed1929748e3bc453a75eca3c01518f4.png](https://i-blog.csdnimg.cn/blog_migrate/7b1cccc9f2031e58a94ce98dc4b9c9a9.jpeg)
我们看到,body和浏览器窗口之间、ul和第二个地之间,ul和最下面的p元素之间,都没有缝隙了,都是紧贴着的了。这就是去掉他们的默认margin的效果。
实际开发中,去掉元素默认margin和padding的代码,我们用交集选择器去写,不要用通配符去写,当然自己练习的话,怎么写无所谓。
盒子水平居中
一个盒子,默认是位于页面的最左边,或者位于父元素的最左边开会显示的,怎么样才能让盒子在水平方向上居中呢?
把盒子左右两边的margin设置为auto,盒子就在水平方向上居中了。
![ada36051b35d1f0e3a064731e711dd20.png](https://i-blog.csdnimg.cn/blog_migrate/1d9347d46a45f50b3b36754495c5a637.jpeg)
我们知道,padding写两个值的时候,第一个值表示上下方向,第二个值表示左右方向,同样的,margin也一样。
margin写两个值,第一个值写为0,就表示上下方向为0,第二个值写auto,auto就是自动的意思。左右方向自动,它自然就居中了。
因此,想要让任何一个盒子水平方向居中,就写margin:0 auto。
注意:文本水平居中是text-align:center,和盒子的水平居中不是一个概念。
盒子的垂直方向居中,需要使用绝对定位技术。绝对定位,后面我们会接触到。
感谢阅读!知识总结不易,请点个赞或转发鼓励一下呗!想系统性学习前端的小伙伴可以关注我!
温馨提示:我在头条关于前端的图文,都是成体系的,如果是没接触过前端,对前端感兴趣、想要学习前端的小伙伴,要按顺序从第一节去看,更重要的是要动手实践。