参考地址：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. JAVA分布式架构的演进

    系统架构演化历程-初始阶段架构 初始阶段 的小型系统 应用程序.数据库.文件等所有的资源都在一台服务器上通俗称为LAMP 特征:应用程序.数据库.文件等所有的资源都在一台服务器上. 描述:通常服务器操 ...

  2. 面向对象【day08】：问答式面相对象（四）

    本节内容 1.什么是面向对象编程 2.什么是市类?什么是对象?又有什么关系? 3.什么时候适用面向对象? 4.self就是调用当前方法的对象 5.封装.继承.多态 6.字段方法 1.什么是面向对象编程 ...

  3. tomcat配置好后，启动eclipse中的server，不能出现有猫的页面，提示404

    原因:tomcat与eclipse中的server未关联起来 解决办法:双击servers中的server,在Server Locations中选中第二项,保存之后再进行刚才的操作就好了.

  4. Hibernate的实体类中为什么要继承Serializable？

    确切的说应该是对象的序列化,一般程序在运行时,产生对象,这些对象随着程序的停止运行而消失,但如果我们想把某些对象(因为是对象,所以有各自 不同的特性)保存下来,在程序终止运行后,这些对象仍然存在,可以 ...

  5. JavaSE学习总结（三）——Java语言编程练习、格式化字符与常量

    一.变量.常量.字面量 package com.zhangguo.chapter2_3; /** * 1.银行利率为5%,问存款100美元5年的收益细节? * */ public class P1 { ...

  6. python---tornado钩子预留解析

    在tornado.web.RequestHandler类中的初始构造方法中: class RequestHandler(object): """Base class fo ...

  7. 挖洞姿势：特殊的上传技巧，绕过PHP图片转换实现远程代码执行（RCE）

    我使用了一个特殊的图片上传技巧,绕过PHP GD库对图片的转换处理,最终成功实现了远程代码执行. 事情是这样的.当时我正在测试该网站上是否存在sql注入漏洞,不经意间我在网站个人页面发现了一个用于上传 ...

  8. js 格式化时间、字符串指定长度、随机字符串

    格式化字符串长度 方法 function formatWidth(str, width){ str += '' if(str.length<width) '+str, width) else r ...

  9. Android studio 自动导入(全部)包 import

    http://blog.csdn.net/buaaroid/article/details/44979629 1 Android studio 只有import单个包的快捷键:Alt+Enter.没有 ...

  10. Hadoop mapreduce执行过程涉及api

    资源的申请,分配过程略过,从开始执行开始. mapper阶段: 首先调用默认的PathFilter进行文件过滤,确定哪些输入文件是需要的哪些是不需要的,然后调用inputFormat的getSplit ...