首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 英语文章 > 正文

    浏览器兼容性问题_css margin属性兼容性分析

    时间：2020-04-27来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

    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="/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/div

    div

    div我其实只是想和我的父元素隔开点距离。

    div/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；

    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文浏览器兼容性问题_css margin属性兼容性分析由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.