参考地址：http://www.imooc.com/learn/680

标准盒模型

元素尺寸

  1. 可视尺寸-clientWidth（标准）——就是上图中的border box包含的尺寸。

  2. 占据尺寸-outerWidth（YY，jQuery里面是有这个方法的）——就是上图中的margin box包含的尺寸

一、margin与可视区域

1、适用于没有设定width/height的普通block水平元素，（float元素，absolute/fixed元素，inline元素，table-ceil元素，这些都不行）

2、只适用于水平元素尺寸

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         div {

             overflow: hidden;

             background: #000;

         }

         p {

             height: 200px;

             margin: 50px 50px;

             background: #4794ea;

         }

     </style>

 </head>

 <body>

 <div>

     <p>通过改变p元素的margin-[left|right]值，即可看到p元素水平方向的可视尺寸的改变；通过改变p元素的margin-[top|bottom]，p元素垂直方向上的可视尺寸丝毫不会变化，改变的是p元素在垂直方向上的占据尺寸。<br />可以借助Chrome dev面板的来观测：一边改变p元素的margin值，一边观测面板中的盒子模型数值就能够明白了。</p>

 </div>

 </body>

 </html>

注意，上面代码改变的是中间蓝色的部分

原理：没有设置宽高的普通块属性，元素的宽（content）可以是任意值（可以缩成一点），即可以随着文字伸缩，也可以由于margin值水平伸缩，即margin值改变影响的是宽（content）尺寸，对padding值没有影响，可以设置background-clip:content-box验证；而height高由于先受文本内容的自适应影响，所以改变margin就只是改变margin值而已。
为什么设置了float和绝对定位后尺寸就不受margin的影响呢，因为设置这两个任意属性后，元素就成了inline-block，宽度尺寸仅随着文本的变化而变化。这就解释了inline也是如此。

实际应用：

1、一侧定宽的自适应布局

二、margin与占据尺寸(元素所占据的空间)

1、block与inlne-block水平元素均适用

2、与有没有设定width/height值无关

3、适用于水平方向和垂直方向

实际应用：

1、实现滚动区域上下留白的效果

代码：

 <div style="height: 100px;background-color: #1AA094;overflow:auto;padding: 50px 0">

     <img height="200"  src="../img/1.jpg">

 </div>

 <div style="height: 100px;background-color: #1AA094;overflow:auto;">

     <img height="200" style="margin: 50px 0" src="../img/1.jpg">

 </div>

第一个，火狐浏览器里面，底部没有留白。第二个，正常

二、margin与百分比单位

普通元素的百分比margin都是相对于容器的宽度计算的

代码：

 <div style="background-color: #1AA094;width: 200px;height: 300px">

     <img style="margin: 10%" src="../img/1.jpg">

 </div>

绝对定位元素的百分比margin

代码：

 <div style="background-color: #1AA094;width: 200px;height: 300px;position: relative">

     <img style="margin: 10%;position: absolute" src="../img/1.jpg">

 </div>

三、margin重叠

1、相邻兄弟元素margin重叠

这三个效果是一样的

2、空block元素margin重叠

重叠规则计算：

1、正正取最大值

2、正负值相加

3、负负最负值

实例之一：

css之margin的更多相关文章

  1. CSS中margin和padding的区别

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

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

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

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

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

  4. CSS中margin属性

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

  5. css & no margin & print pdf

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

  6. CSS的margin塌陷（collapse）

    <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head&g ...

  7. CSS padding margin border属性详解

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  8. CSS 百分比 margin & padding

    前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想 ...

  9. DIV+CSS：Margin和Padding属性[转载]

    margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom. ...

  10. CSS中margin与padding的区别

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

随机推荐

  1. 初探react(一)

    我们学习react首先是要了解react是什么,以及他的特点. React 是一个用于构建用户界面的 JAVASCRIPT 库,起源于 Facebook 的内部项目,用来架设 Instagram 的网 ...

  2. 洛谷 P4375 [USACO18OPEN]Out of Sorts G(树状数组求冒泡排序循环次数加强版)

    传送门:Problem 4375 参考资料: [1]:https://www.cnblogs.com/Miracevin/p/9662350.html [2]:https://blog.csdn.ne ...

  3. Word2010中的页眉怎样删除和添加横线

    http://jingyan.baidu.com/article/f79b7cb3bb3c629144023e05.html 我们在使用Word2010编辑文档中时,有时需要在页眉下方删除或添加一条横 ...

  4. advancedsearch.php织梦高级自定义模型字段无法调用解决方案

    advancedsearch.php织梦dedecms 高级自定义模型字段无法调用解决方案 ,具体步骤如下: 1  打开修改puls/advancedsearch.php文件,找到复制代码(不同版本可 ...

  5. mac 上传下载iterm2

    1.安装Homebrew,目的是执行 brew 命令,解决 brew: command not found问题 ruby -e "$(curl -fsSL https://raw.githu ...

  6. java 中自定义类的概述

    作业: 描述商品类 Goods 4个属性 商品名字 大小 价格 库存 把商品类放进集合中 小米品牌 大小 价格 库存的数量 都存集合 华为..... 魅族 public class Goods{ St ...

  7. Jenkins发送邮件

    Jenkins发送邮件 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.  一.配置并发执行任务数量 1>.点击系统管理 2>.点击系统设置 3>.修改执行者数量为: ...

  8. python---cookie模拟登陆和模拟session原理

    cookie模拟登陆: import tornado.web class IndexHandler(tornado.web.RequestHandler): def get(self): #self. ...

  9. Spark记录-Scala程序例子（函数/List/match/option/泛型/隐式转换）

    object func { def main(args:Array[String]):Unit={ //函数赋值给变量时, 必须在函数后面加上空格和下划线. def sayHello(name: St ...

  10. JAVA-大白话探索JVM-类加载过程（二）

    首先我们知道JVM是什么以及类加载器的作用 不清楚的可以看看JAVA-大白话探索JVM-类加载器(一) 现在我们来摸索下类的加载过程 首先,我们将类加载过程分为三步走 装载 链接 初始化 其中 链接 ...