再说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 了.


不再说永远

不再说永远
  • shinerpipul
  • shinerpipul
  • 2005年01月06日 21:19
  • 925

软件工程读书思想笔记

第一章软件工程的三个基本策略是本章的重点学习内容。软件工程的主要环节有:人员管理、项目管理、可行性与需求分析、系统设计、程序设计、测试、维护等。质量第一,生产率第二。高质量对所有用户都有价值,而生产率...
  • upcwyc
  • upcwyc
  • 2006年08月23日 23:43
  • 668

有效准备演讲的几小招

        给客户做个方案讲解、项目阶段报告、介绍个新产品或新技术,公司内部做个正式发言,部分人会觉得不容易,经常不能表达清楚自己的意思。这时不妨问自己几个问题,下次也许就不那么难了。      ...
  • shuangtixi
  • shuangtixi
  • 2007年09月17日 08:52
  • 13403

margin详解和使用

一、margin表示元素的外边距,兼容性不用多说,老牌子了,全兼容。 二、用法说明 1、语法: margin:auto | length | % inherit; 值 描述 auto...
  • ar31477
  • ar31477
  • 2016年01月06日 22:47
  • 1215

一碗馄饨

这天,白云酒楼里来了两位客人,一男一女,四十岁上下,穿着不俗,男的还拎着一个旅行包,看样子是一对出来旅游的夫妻。服务员笑吟吟地送上菜单。男的接过菜单直接递女的,说:“你点吧,想吃什么点什么。”女的连看...
  • singyea
  • singyea
  • 2009年01月19日 13:13
  • 581

关于margin的IE6的兼容问题。

关于margin的IE6的兼容问题。(双倍margin的问题)
  • fuxiaomi2016
  • fuxiaomi2016
  • 2016年10月12日 18:39
  • 473

CSS中margin-top对父级元素产生作用的问题

CSS中margin-top对父级元素产生作用的问题在页面重构中,利用margin进行定位非常常见,然而margin-top这个属性经常会给我们带来一定的困扰,有时候不起作用,还把父层“拉”了下来,如...
  • hnxieyi
  • hnxieyi
  • 2016年10月14日 18:56
  • 3850

margin属性的四个方向的顺序

margin-top ,margin-right ,margin-bottom ,margin-left 。值可以是: 百分比(基于父对象总高度或宽度的百分比) 长度值(定义一个固定的边...
  • tykw163
  • tykw163
  • 2008年05月10日 11:23
  • 4535

margin 参数 与 位置(1个上下左右;2个:上下+左右;3个:上+左右+下;)

~
  • kungfu_panda
  • kungfu_panda
  • 2014年08月11日 16:58
  • 2282

Android,View设置margin

android的view中有setPadding,但是没有直接的setMargin方法。如果要在代码中设置该怎么做呢? 可以通过设置view里面的 LayoutParams 设置,而这个La...
  • yunxiaoxiaoyun
  • yunxiaoxiaoyun
  • 2014年03月27日 20:03
  • 33986
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:再说margin
举报原因:
原因补充:

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