参考地址：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. mac 上传下载iterm2

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

  2. 理解 PHP 依赖注入

    Laravel框架的依赖注入确实很强大,并且通过容器实现依赖注入可以有选择性的加载需要的服务,减少初始化框架的开销,下面是我在网上看到的一个帖子,写的很好拿来与大家分享,文章从开始按照传统的类设计数据 ...

  3. Gulp小记

    安装 总的来说,玩gulp的流程是这样的: 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 ...

  4. Python基础【day01】：python 2和3区别（四）

    许多Python初学者都会问:我应该学习哪个版本的Python.对于这个问题,我的回答通常是“先选择一个最适合你的Python教程,教程中使用哪个版本的Python,你就用那个版本.等学得差不多了,再 ...

  5. SparkRDD简介/常用算子/依赖/缓存

    SparkRDD简介/常用算子/依赖/缓存 RDD简介 RDD(Resilient Distributed Dataset)叫做分布式数据集,是Spark中最基本的数据抽象,它代表一个不可变.可分区. ...

  6. java中import机制(指定import和import *的区别)

    转自:https://www.cnblogs.com/dtts/p/4692480.html java中有两种包的导入机制,总结如下: 单类型导入(single-type-import),       ...

  7. 转---python os.exec*()家族函数的用法

    execl(file, arg0,arg1,...) 用参数列表arg0, arg1 等等执行文件 execv(file, arglist) 除了使用参数向量列表,其他的和execl()相同 exec ...

  8. oozie JAVA Client 编程提交作业

    1,eclipse环境搭建 在eclipse中新建一个JAVA工程,导入必要的依赖包,目前用到的有: 其次编写JAVA 程序提交Oozie作业,这里可参考:oozie官方参考文档 在运行提交程序前,首 ...

  9. SmartUpload文件上传组件的使用教程

    在项目中使用SmartUpload组件可以进行文件的上传和下载操作 使用步骤 1.导入jar包,进行build path操作 2.编写文件上传页面,代码如下 <form action=" ...

  10. 定时器QTimer

    import sys from PyQt5.QtCore import QTimer, Qt from PyQt5.QtWidgets import QApplication, QWidget, QP ...