css margin属性兼容性分析

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 15:54 我要评论(0)

margin,是透明的,在它设置的值的范围内,父元素的背景色或背景图片均不受影响,能够完整的呈现给用户看到。margin属性通过单独的属性对其上、右、下、左依次进行赋值,我们常见的有margin:10px; OR margin:10px 20px; OR margin:10px 20px 10px 20px;但是你知道:margin:10px 15px 3px;什么意思吗?你以为它的表达意思是:margin:10px 15px 3px 0px;吗??那我来告诉你,错误:它的表达意思是margin:10px 15px 3px 15x;呵呵!great。这个才是正确的。在实际应用中,或者阅读别人代码的时候不要理解错误或者,没有看到过这个,就随便猜测作者的想法。

注释:允许使用负值。

例子 1

margin:10px 5px 15px 20px;上外边距是 10px

右外边距是 5px

下外边距是 15px

左外边距是 20px

例子 2

margin:10px 5px 15px;上外边距是 10px

右外边距和左外边距是 5px

下外边距是 15px

例子 3

margin:10px 5px;上外边距和下外边距是 10px

右外边距和左外边距是 5px

margin垂直外边距不兼容标准?

实际工作中,垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距,而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题,IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”,标准浏览器下查看出现“bug”)有代码有真相:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>垂直外边距合并</title>

<style>

.top{width:160px; height:50px; background:#ccf;}

.middle{width:160px; background:#cfc;}

.middle .firstChild{margin-top:20px;}

</style>

</head>

<body>

<div class="top"></div>

<div class="middle">

<div class="firstChild">我其实只是想和我的父元素隔开点距离。</div>

<div class="secondChild"></div>

</div>

</body>

</html>

你来运行一下是不是感觉,这个在IE中显示正常?而在其他对css教程2高度兼容的firefox下显示异常??我来告诉你,这是因为IEIE的hasLayout渲染导致了这个“表现良好”的外观。而其他标准浏览器则会表现出“有问题”的外观。如果按照css规范来说,IE的表现是错误的,而FirfFox、Chrome、Opera、Sarfi等主流浏览器则解析的符合css规范。

举个例子来说:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素,祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级,假传圣旨,把自己的margin当领导的margin执行(虽然它的值比“真龙”的值大)。

用Margin还是用Padding

对于这个问题,很多人问过我,他们说,padding和margin为什么要分开用,它们的区别也不大,达到的效果也不差,为什么它们是两种定义?很多人会容易弄混淆,特别是新手,一般都是新手问我这个问题。

下面我们来说下,为什么要区别来用,padding和margin:

当我们想要在子元素使用背景,而父元素不适应背景,达到图片“顶妆,文字“不顶妆间隔一段距离的时候要用padding;

当我们让子元素边框要顶住父元素,而覆盖父元素背景图片或背景色的时候使用padding;

当我们希望让子元素和父元素有点距离,但不影响父元素背景图片展示的时候用margin;

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...