参考地址：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. 关于chrome控制台出现代码叠加页面不能正常显示大小问题

    见下图页面出现在chrome中的情况 描述状态:代码都变小了才出现控制台代码叠加问题 解决办法:使用鼠标滚轮放大代码就行啦,在设置里面让页面的大小显示为100%就可以了.

  2. Sublime Text3—系统设置

    摘要 软件的设置分为系统设置和快捷键设置两项,这次分享系统设置,Sublime Text3-自带快捷键介绍前面已分享过. 正文 菜单依次选择Preferences | Settings,我们修改设置不 ...

  3. Servlet学习：（三）Servlet3.0 上传文件

    转: Servlet学习:(三)Servlet3.0 上传文件 2018年08月03日 11:57:58 iDark_CSDN 阅读数:362   一.注意事项 客户端(浏览器) 表单的提交方法必须是 ...

  4. SQL Server 2008以上误操作数据库恢复方法——日志尾部备份

    原文出处:http://blog.csdn.net/dba_huangzj/article/details/8491327 问题: 经常看到有人误删数据,或者误操作,特别是update和delete的 ...

  5. Simple Question

    一.你会在时间序列数据集上使用什么交叉验证技术?是用k倍? 答:都不是.对于时间序列问题,k倍可能会很麻烦,因为第4年或第5年的一些模式有可能跟第3年的不同,而我们最终可能只是需要对过去几年的进行验证 ...

  6. 记录一次nginx的upstream的配置信息

    nginx的upstream的配置信息 upstream qq.xiaoyu.cn { server 192.168.1.139:80 max_fails=3 fail_timeout=30s; se ...

  7. JS 将字符串数组用 | 或其他符号分割

    var arr = ["吕超","赵云","典韦","关羽","马超","张飞" ...

  8. jQuery 选择城市，显示对应的即时时区时间

    因客户需要,我们CRM系统中,jQuery 弄个时区插件 如图: HTML: <div id="cityDate"> <i class="P_arrow ...

  9. SQL Server分页进化

    DataReader.Dataset 数据量太大就用datareader,dataset都读到内存里了,datareader是直接读取数据库. DataReader是一个快速的只进游标 DataRea ...

  10. spring boot(十一)：Spring boot中mongodb的使用

    mongodb简介 传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成, MongoDB是由数据库(database).集合(collection ...