css之margin

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

标准盒模型

css之margin

元素尺寸

可视尺寸-clientWidth（标准）——就是上图中的border box包含的尺寸。
占据尺寸-outerWidth（YY，jQuery里面是有这个方法的）——就是上图中的margin box包含的尺寸

一、margin与可视区域

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

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

css之margin

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div {
 8             overflow: hidden;
 9             background: #000;
10         }
11         p {
12             height: 200px;
13             margin: 50px 50px;
14             background: #4794ea;
15         }
16     </style>
17 </head>
18 <body>
19 <div>
20     <p>通过改变p元素的margin-[left|right]值，即可看到p元素水平方向的可视尺寸的改变；通过改变p元素的margin-[top|bottom]，p元素垂直方向上的可视尺寸丝毫不会变化，改变的是p元素在垂直方向上的占据尺寸。<br />可以借助Chrome dev面板的来观测：一边改变p元素的margin值，一边观测面板中的盒子模型数值就能够明白了。</p>
21 </div>
22 </body>
23 </html>

View Code

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

1 <div style="height: 100px;background-color: #1AA094;overflow:auto;padding: 50px 0"> 2 <img height="200" src="../img/1.jpg"> 3 </div> 4 5 6 <div style="height: 100px;background-color: #1AA094;overflow:auto;"> 7 <img height="200" style="margin: 50px 0" src="../img/1.jpg"> 8 </div>

相关推荐