谈谈CSS的边距合并之我的理解
发布时间:2013-09-27 16:49:36 作者:佚名 我要评论
通过交流发现师弟们对外边距合并不是很理解,如果想要深入了解margin这个神奇的属性,那可得费一番功夫了,下面与大家分享下我对外边距合并的理解
今天通过和一些师弟的交流,发现他们对外边距合并不是很理解。
其实浅析CSS的外边距合并的话,是很容易明白是怎么一回事儿的。但是如果想要深入了解margin这个神奇的属性,那可得费一番功夫了。
我是一个菜鸟,在这里当然不会解释得太复杂,在这里我只是想谈谈我对外边距合并的理解。
其实要理解清楚什么是外边距合并,最简单的方法就是自己动手试试。我认为,理解外边距合并的关键就在于理解这句话:“只要接触,就合并”。
什么叫“只要接触,就合并”呢?其实理解起来就是:当两个元素的外边距相接触,它们就融合了。什么时候就能接触呢?就是当两个元素都没有边框属性和内边距属性。
还是听不懂?那就不是我所力所能及的范畴了。因为你没有理解什么是盒模型了。
其实CSS的外边距合并就是这么一点点东西。我拿出来讲是因为,看了好多人的代码,都喜欢把margin和padding混在一起。不管用的是padding还是margin,只要最终显示效果和自己想象的一致,他们觉得就达到目的了。有时候用margin,遇到了边距合并却不知道怎么回事,或者说不知道怎么解决,然后就想出各种法子“制造”自己想要的效果(例如加多一个空元素撑开留白)。但是其实我想说,这样使用margin和padding,根本就不是W3C制定padding和margin时候的本意。
好吧,小小地吐槽了一下,也不想说多什么东西,因为别人写的比我更深入更细致。这里给几篇文章的地址,有助于大家加深对margin和padding使用的理解。
https://www.jb51.net/w3school/css/css_margin_collapsing.htm
https://www.jb51.net/css/37633.html
https://www.jb51.net/css/55475.html
其实浅析CSS的外边距合并的话,是很容易明白是怎么一回事儿的。但是如果想要深入了解margin这个神奇的属性,那可得费一番功夫了。
我是一个菜鸟,在这里当然不会解释得太复杂,在这里我只是想谈谈我对外边距合并的理解。
其实要理解清楚什么是外边距合并,最简单的方法就是自己动手试试。我认为,理解外边距合并的关键就在于理解这句话:“只要接触,就合并”。
什么叫“只要接触,就合并”呢?其实理解起来就是:当两个元素的外边距相接触,它们就融合了。什么时候就能接触呢?就是当两个元素都没有边框属性和内边距属性。
还是听不懂?那就不是我所力所能及的范畴了。因为你没有理解什么是盒模型了。
其实CSS的外边距合并就是这么一点点东西。我拿出来讲是因为,看了好多人的代码,都喜欢把margin和padding混在一起。不管用的是padding还是margin,只要最终显示效果和自己想象的一致,他们觉得就达到目的了。有时候用margin,遇到了边距合并却不知道怎么回事,或者说不知道怎么解决,然后就想出各种法子“制造”自己想要的效果(例如加多一个空元素撑开留白)。但是其实我想说,这样使用margin和padding,根本就不是W3C制定padding和margin时候的本意。
好吧,小小地吐槽了一下,也不想说多什么东西,因为别人写的比我更深入更细致。这里给几篇文章的地址,有助于大家加深对margin和padding使用的理解。
https://www.jb51.net/w3school/css/css_margin_collapsing.htm
https://www.jb51.net/css/37633.html
https://www.jb51.net/css/55475.html
相关文章
- 这篇文章主要介绍了简单的CSS叠加外边距示例,是文档样式编写中一个需要注意的地方,需要的朋友可以参考下2015-07-21
- 今天就先说说CSS的外边距吧。 围绕在元素边框的空白区域是外边距。这是W3CSchool给我们的解释。这句话看起来很模糊,说的不是那么明确2012-05-27
- 空白双边距是一个极容易误解的CSS特性.它不是CSS的bug,但如果我们一旦误解,将会给你带来很多麻烦.2010-07-04
- 网页制作Webjx文章简介:今天谈谈CSS外边距叠加的问题,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。 在进行CSS网页布局时会遇到2009-04-02
- 本篇文章主要介绍了详解css边距重叠的几种解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-09-06
最新评论