再说margin

原创 2013年12月05日 19:38:20

       以为简单的东西其实里面学问大着呢!这两天看了一个大牛写的margin系列,真是感觉自己弱爆了。里面竟然还有些词汇我都看了解释都还不懂。所以今天试着仔细看下,但是和人家大牛的比肯定是小巫见大巫了。

 这里我遇到什么就提什么,着重一些我以前没有太注意的东西。

      margin属性适用于所有元素。but ,   竖直方向(margin-top , margin-bottom)的属性对“非替换行内元素”(non-replaced inline elements)无效.

问题一:什么是“非替换行内元素”(non-replaced inline elements)?

      先来看看replaced element:

      An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet.     

     这里有标准:

http://www.w3.org/TR/CSS21/conform.html#replaced-element

http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced    

        所以replace element就有 a,img, button, textarea, input, select。

        解释完了,就知道竖直方向是对如 span, a等无效了,并且我们知道了height,width,line-height属性对他们无效。保证把上面第二个链接往下读会收获很多,譬如margin: 0 auto;为什么会左右居中不会上下居中。


    再说下 collapsing margins(注意是 margins ,而不是margin.好多人都认为只有 margin-bottom 才会折叠),以前觉得这是个很简单的东西,现在看来也不是那么容易,来说下我以前认为的 collapsing margins.

    1) 只有竖直方向的才会 collapsing 

    wrong !!!!! 这和 writing-mode 有关 ,虽然 w3c 标准有这么一句话 "Horizontal margins never collapse." ,但也是有前提的.

    2) 两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠

     Ringht !!!!!! 以前认为只有两个相邻(兄弟关系)才会折叠,囧......  毗邻: 不能有 border, padding, clear, 等隔断 ( 这也就解释了为什么外围 div 加上 border [或者 overflow:hidden; 但这跟 BFC 有关系,加上他后就不符合 collapsing 的条件了] 后,里面的 p 元素的 margin-top 会显示正常了,如果你也遇到过这种情况的话,就知道在说什么了 ).

    margin-top 和 margin-bottom 的 collapsing 计算方式也是不同的. 其中 margin-bottom 和 width 的属性是具体值还是 auto 有关.这点希望大家知道.

    最都别还是认为 只有 上一个的 margin-bottom 和下一个 marign-top 才会 collapsing , 太 low 了.


相关文章推荐

padding和margin区别

  • 2017年10月10日 16:27
  • 63B
  • 下载

Css padding和margin区别

  • 2013年12月08日 00:21
  • 3KB
  • 下载

我知道你不知道的负Margin

HiCSS — 海玉’s Blog 理论为辅,实战为主,关注前端开发,注重用户体验。 Home About Me Grab the RSS feed ...

margin实现下拉刷新

  • 2016年04月08日 12:24
  • 2.41MB
  • 下载

flexbox(四)伸缩布局中的margin&伸缩性&主轴对齐方式

伸缩布局中的margin: 当使用flex属性计算伸缩项目的宽度的时候,为auto的margin会值为0 在主轴(main axis)方向 如剩余空间为正数,则剩余空间会被平...
  • wmaoshu
  • wmaoshu
  • 2016年11月19日 17:30
  • 1760

Div使用margin居中常见问题

  • 2014年04月30日 16:07
  • 2KB
  • 下载

Alignment、Margin 和 Padding 概述

  • 2014年10月17日 12:43
  • 556KB
  • 下载

CSS中 Padding和Margin两个属性的详细介绍和举例说明

本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键. 注: 为...

JavaScript设置Div的margin参数

  • 2014年09月13日 18:07
  • 13KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:再说margin
举报原因:
原因补充:

(最多只允许输入30个字)