参考地址：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. 预测氨基酸替换的致病性及分子机制：MutPred工具的使用

    MutPred的功能是预测氨基酸替换后的致病性及其分子机制,旧版本见链接:http://mutpred1.mutdb.org/ 新版本更新为MutPred2,见网站链接:http://mutpred2 ...

  2. 外显子分析报错解决方案bin field of BAM record does not equal value computed based on alignment start and end, and length of sequence to which read is aligned

    以下链接给出了解决方案:https://gatkforums.broadinstitute.org/gatk/discussion/4290/sam-bin-field-error-for-the-g ...

  3. vue资源

    Vue中文官网:https://cn.vuejs.org/ Vue源码:https://github.com/vuejs/vue Vue官方工具:https://github.com/vuejs vu ...

  4. 使用MedleyText与Syncthink自建云笔记

    随着学习加深,做的笔记越来越多,而使用云笔记怕万一平台关闭(如360网盘啥的)还需要导出笔记费时费力,并且多平台兼容性未知.还是自己搭建放心省事. MedleyText介绍 MedleyText为ma ...

  5. POJ - 3267 The Cow Lexicon（动态规划）

    https://vjudge.net/problem/POJ-3267 题意 给一个长度为L的字符串,以及有W个单词的词典.问最少需要从主串中删除几个字母,使其可以由词典的单词组成. 分析 状态设置很 ...

  6. DotNetBar 中Ribbon汉化

    private void frmMain_Load(object sender, System.EventArgs e)        {            //  Ribbon汉化代码      ...

  7. utf8_bin跟utf8_general_ci的区别

    ci是 case insensitive, 即 "大小写不敏感", a 和 A 会在字符判断中会被当做一样的; bin 是二进制, a 和 A 会别区别对待. 例如你运行: SEL ...

  8. 【原创】angularjs1.3.0源码解析之执行流程

    Angular执行流程 前言 发现最近angularjs在我厂的应用变得很广泛,下周刚好也有个angular项目要着手开始做,所以先做了下功课,从源代码开始入手会更深刻点,可能讲的没那么细,侧重点在于 ...

  9. IDAPython安装

    转载:All Right   (本人没有测试过) 关于IDAPython的安装教程网上的资料非常少,也不是很详细,我费了好长时间才装好,现在和大家分享一下. 注意事项 下面几点关系到安装是否成功 ID ...

  10. [C++]指针/指针数组/数组指针/多维指针/单值指针/多值指针

    int main(){ //单值指针(指向单个值得指针,类同普通变量) int *px = new int; *px = 100; printf("%d",*px); delete ...