谈谈对css特性margin的了解

日期:2021-01-20 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码

1.margin是甚么?
margin用于操纵元素周边室内空间的间距,从视觉效果上做到室内空间间距的目地。相对前1个元素有相应的外边距。用于分隔元素与元素的。自始至终是全透明的。

2.外边距的合拼难题(参照w3school)---前提条件:元素出于文本文档流中
2.1 两个竖直外边距相遇时,在竖直方位上会产生外边距的叠加,最后的外边距等于2者的较大值;
2.2 当1个元素(沒有边框和内边距)包括此外1个元素时,将在竖直方位上产生叠加;
2.3 当1个元素为空元素时(且沒有外边距和),本身会产生外边距的叠加

3.margin在块元素和行内元素中的差别
margin在块元素中会危害块元素的左右上下,能够随便操纵;而在内联元素中则只会对水平方位上的元素起到上下。
备注:可换置的内联元素,比如img、input、textarea、select、button、label等,能够操纵其width、height,变现为display:inline-block。因此margin还可以完成左右上下的操纵。

4.跟margin相关的普遍bug
4.1 IE6 双边距难题
难题叙述:当父元素中包括的第1个元素为波动元素,会出現双边距的难题;
处理方法: display:inline
4.2 iIE6波动元素3px间距
难题叙述:1个波动元素,此外1个为非波动元素,则非波动元素与波动元素之间存在3px的间距

5.padding与margin的差别
padding坐落于边框的內部,具备情况的色调,关键用于分隔內容与元素;而margin坐落于边框的外界,不具备情况色调,关键用于区别元素与元素,起到防护的功效。

6.margin的负边距难题(待续)
应用margin的负边距能够处理许多难题。

参照材料
http://www.hicss.net/do-not-tell-me-you-understand-margin/
http://www.planabc.net/2007/03/18/css_attribute_margin/