1.margin的百分比值

  普通元素的百分比maigin相对于容器元素的宽度(width) 进行计算的。

  这里我们在图片外面设置一个宽高分别为800 * 600的容器。设置img{ margin: 10%; }

  结果如下

   

     结果margin值都是 800 * 10% = 80px; 所以这里都是相对于容器的宽度计算的 容器的宽度计算 容器的宽度计算。说三遍

2.绝对定位的百分比maigin值

   

  相对于第一个定位的祖先元素的 width值计算的。就是 parent 的 width = 1000px. 所以 margin = 100px;

3.可以使用margin 实现 2 : 1 的自适应

  比如 有两个容器

     

  这里 box的高度没有指定。 由于设置 margin 50% 。他的高度就是父容器的一半  所以高宽比就是 1 : 2;

  

4. margin 的重叠 为什么重叠

  A) margin 重叠的两个特性

     只会发生在block的水平元素上。 (不包括 float 和 absolute元素)

    不考虑 wirte-mode(就是书写格式)  只发生在 垂直方向(margin-top margin-bottom)

  B) 发生的情况

    1> 相邻的兄弟元素

    2> 父级的第一个 和 最后一个子元素

    3> 空的 block。

例子一 相邻的兄弟元素

       

    这里就是两个兄弟元素 。

   这里的 两个p 之间只有一个em 没有两个em。 因为第一个margin-bottom 和 第二个的 margin-top 发生了重叠。

  例子二 父元素和最后一个子元素 重叠

   

  按照常规理论 son 和 父元素的 father 之间会 留出 80px的 margin-top值。但是实际上没有。son的背景元素没有变化 没有留出80px;

  这里只是 给 父元素设置了 80px;

  

  父子 margin重叠的 条件

  

    那么怎么干掉margin-top 重叠呢?

    只要不让它满足那些条件就可以了。

       父元素添加 overflow: hidden;  border-top  padding-top (在他们之间加个空格);

例子三 空block元素的 margin 重叠。

       

  

  注意 里面没有任何内容的空元素 。空元素发生margin重叠的条件

  

 4 margin重叠的计算规则。

  A) 正正取大值

  B) 正负值相加

  C) 负负取最负。

5. margin 重叠的意义

  A)  连续段落或列表之类 如果没有margin重叠 收尾出现 1 : 2 就会显得不协调

  B) web 中任何地方嵌套或直接放div 都不会影响原来的布局

  C) 遗落的空的任意 多个p元素 不要影响原来阅读的排版

实际应用

  制作列表 的时候控制每个列表的距离里面的

  

  .list{

    margin-top : 15px;

    margin-bottom: 15px;

  }

  更具有健壮性 即使最后一个 移除了 亦不会影响布局

CSS 之 margin知识点的更多相关文章

  1. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  2. CSS中margin边界叠加问题及解决方案

    你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加. CSS的margin边界叠加深度剖析 边界叠加简 ...

  3. css及HTML知识点

    html : 180°  输出为 css:    margin: 0 auto;会在页面水平居中显示  box-shadow: 0 0 5px #f61818; 设置投影的位置大小颜色 outline ...

  4. CSS中margin边界叠加问题及解决方案(转)

    边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...

  5. CSS中margin属性

    css中margin块级元素的垂直相邻外边距会合并,比如 方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并

  6. css & no margin & print pdf

    css & no margin & print pdf no header & no footer https://stackoverflow.com/questions/46 ...

  7. CSS中margin与padding的区别

    CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...

  8. 前端新人学习笔记-------html/css/js基础知识点(二)

    4月7日学到的知识点:     一:<img src="1.png" alt="美女"/> alt是给图片添加介绍,当图片没加载出来时,会直接显示a ...

  9. 前端新人学习笔记-------html/css/js基础知识点

    即将毕业的软件工程大学生一枚,秋季招聘应聘的是Android,今年来到公司实习,要求做前端开发,所以一切只有现学,现在根据视频来学习,然后开这个博客记录一下自己的学习过程,废话不多说,开写. 4月6日 ...

随机推荐

  1. WPS 去掉自动打开的文档漫游和在线模板

    关闭文档漫游  在cmd(命令提示符)中输入regedit.exe回车,将弹出”注册表编辑器“,选择HKEY_CURRENT_USER>>Software>>Kingsoft& ...

  2. jdk-动态代理

    1.HelloWorld package reflect.proxy; public interface HelloWorld { void print(); } 2.HelloWorldImpl p ...

  3. 说一说&&符

    今天添加检测代码,还得添加好几套,好蛋疼. 为了省点事,全写在HTML的行间onclick里,为此专门琢磨了一下&&的用法. 一般用&&(除了逻辑判断里),是为了简写i ...

  4. 未能写入输出文件 c:/WINDOWS/Microsoft.NET/Framework/v2.0.50727/Temporary

    ERROR: 未能写入输出文件“c:/WINDOWS/Microsoft.NET/Framework/v2.0.50727/Temporary ASP.NET Files/root/.... 一般遇到 ...

  5. JavaScript Structure

    Element, Data, Event, Logic Data:----------- 1. method 1 var obj = { name : "thinkpad", ag ...

  6. 理解使用static import 机制(转)

    J2SE 1.5里引入了“Static Import”机制,借助这一机制,可以用略掉所在的类或接口名的方式,来使用静态成员.本文介绍这一机制的使用方法,以及使用过程中的注意事项. 在Java程序中,是 ...

  7. 【转】Java基础笔记 – 枚举类型的使用介绍和静态导入--不错

    原文网址:http://www.itzhai.com/java-based-notes-introduction-and-use-of-an-enumeration-type-static-impor ...

  8. CentOS环境下,gdb调试中出现:Missing separate debuginfos, use: debuginfo-install.....的问题

    在gdb调试时segmentation fault问题时,遇到下面的了问题: Program received signal SIGABRT, Aborted.0x00007ffff73eb925 i ...

  9. Linux如何删除非空目录

    这个问题很basic,不过还是困扰了我一段时间.(这里主要讨论的是命令行模式下) 我本来觉得应该使用命令 rmdir 但是发现它无法删除非空的目录. 后来发现了原来应该使用命令 rm -rf 目录名 ...

  10. 【转】VS调试技巧

    [转自]http://blog.csdn.net/ghttzsqgm/article/details/5326894 http://blog.csdn.net/cadcisdhht/article/d ...