css基础--margin

1、
1）元素尺寸：对应jQuery中的$().width()和$().height()方法，包括padding和border，也就是元素的border box的尺寸。在原生的DOM API中写作offsetWidth和offsetHeight，所以，有时候也成为“元素偏移尺寸”。
2）元素内部尺寸：对应jQuery中的$().innerWidth()和$().innerHeight()方法，表示元素的内部区域尺寸，包括padding但不包括border，也就是元素的paddingbox的尺寸。在原生的DOM API中写作clientWidth和clientHeight，所以，有时候也称为“元素可视尺寸”。
3）元素外部尺寸：对应jQuery中的$().outerWidth(true)和$().outerHeight(true)方法，表示元素的外部尺寸，不仅包括padding和border，还包括margin，也就是元素的margin box的尺寸。没有相对应的原生的DOM API。
“外部尺寸”有个很不一样的特性，就是尺寸的大小有可能是负数，没错，负尺寸。这和我们现实世界对尺寸的认知明显冲突了，因为现实世界没有什么物体的尺寸是负的。所以，我总是把“外部尺寸”理解为“元素占据的空间尺寸”，把概念从“尺寸”转换到“空间”，这时候就容易理解多了
2、

<div class="father">    
<div class="son"></div> </div> 
.father { width: 300px; } 
.son {  margin: 0 -20px; } 

.son元素的宽度就是340像素了，尺寸通过负值设置变大了，因为此时的宽度表现是“充分利用可用空间”
3、
（1）如果图片左侧定位：此时，文字内容就会根据.box盒子的宽度变化而自动排列，形成自适应布局效果，无论盒子是200像素还是400像素，布局依然良好，不会像纯浮动布局那样发生错位

.box { overflow: hidden; } 
.box > img { float: left; } 
.box > p { margin-left: 140px; } 

<div class="box">   
 <img src="1.jpg"> 
 <p>文字内容...</p>
 </div> 

（2）如果图片右侧定位：只要图片的左浮动改成右浮动，文字内容的左margin改成右margin即可。

.box { overflow: hidden; } 
.box > img { float: right; } 
.box > p { margin-right: 140px; }

我们这里的图片是右浮动，视觉表现在.box的右侧，但是图片相关的HTML代码却在前面。
3）如果图片右侧定位，同时顺序一致：

.box { overflow: hidden; } 
.full { width: 100%; float: left; } 
.box > img { float: left; margin-left: -128px; } 
.full > p { margin-right: 140px; } 

<div class="box">   
 <div class="full"> 
 <p>文字内容...</p>  
  </div>    
  <img src="1.jpg"> </div>

4、利用margin改变元素尺寸的特性来实现两端对齐布局效果
1）列表块两端对齐，一行显示3个，中间有2个20像素的间隙。假如我们使用浮动来实现，CSS代码可能是下面这样

li {    
float: left;    
width: 100px;   
 margin-right: 20px; }

此时就遇到了一个问题，即最右侧永远有个20像素的间隙，无法完美实现两端对齐
如果不考虑IE8，我们可以使用CSS3的nth-of-type选择器：

li:nth-of-type(3n) {    margin-right: 0; } 

但如果需要兼容IE8那么nth-of-type就无能为力了。要么专门使用JavaScript打个补丁，要么列表HTML输出的时候给符合3n的

• 标签加个类名。
  我们可以通过给父容器添加margin属性，增加容器的可用宽度来实现

• ul {    
  margin-right: -20px; } 
  ul > li {    
  float: left;    
  width: 100px;    
  margin-right: 20px; }
  

  此时

  • 的宽度就相当于100%+20px，于是，第3n的
  • 标签的margin-right: 20px就多了20像素的使用空间，正好列表的右边缘就是父级
    • 容器100%宽度位置，两端对齐效果就此实现了
      5、如果容器可以滚动，在IE和Firefox浏览器下是会忽略padding-bottom值的，Chrome等浏览器则不会。也就是说，在IE和Firefox浏览器下底部没有50像素的padding-bottom间隙

  <div style="height:100px; padding:50px 0;">     
   <img src="0.jpg" height="300"> </div>
  

  原因是Chrome浏览器是子元素超过content box尺寸触发滚动条显示，而IE和Firefox浏览器是超过padding box尺寸触发滚动条显示
  

  我们可以借助margin的外部尺寸特性来实现底部留白，代码如下：

  <div style="height:200px;">    
  <img height="300" style="margin:50px 0;"> 
  </div>
  

  6、实现分栏布局，两栏等高

  .column-box {   
   overflow: hidden; } 
   .column-left, .column-right {    
   float: left;
   margin-bottom: -9999px;   
    padding-bottom: 9999px; }
  

  <div id="colLeft" class="column-left">
      <h4>正方观点</h4>
      <p>观点1</p>
  </div>
  <div id="colRight" class="column-right">
      <h4>反方观点</h4>
      <p>观点1</p>
  </div>
  

  
  垂直方向margin无法改变元素的内部尺寸，但却能改变外部尺寸，这里我们设置了margin-bottom:-9999px意味着元素的外部尺寸在垂直方向上小了9999px。默认情况下，垂直方向块级元素上下距离是0，一旦margin-bottom:-9999px就意味着后面所有元素和上面元素的空间距离变成了-9999px，也就是后面元素都往上移动了9999px。此时，通过神来一笔padding-bottom:9999px增加元素高度，这正负一抵消，对布局层并无影响，但却带来了我们需要的东西—视觉层多了9999px高度的可使用的背景色。但是，9999px太大了，所以需要配合父级overflow:hidden把多出来的色块背景隐藏掉，于是实现了视觉上的等高布局效果
  顺便说说使用border和table-cell的优缺点：前者优势在于兼容性好，没有锚点定位的隐患，不足之处在于最多3栏，且由于border不支持百分比宽度，因此只能实现至少一侧定宽的布局；table-cell的优点是天然等高，不足在于IE8及以上版本浏览器才支持，所以，如果项目无须兼容IE6、IE7，则推荐使用table-cell实现等高布局。
  上述margin对尺寸的影响是针对具有块状特性的元素而言的，对于纯内联元素则不适用。和padding不同，内联元素垂直方向的margin是没有任何影响的，既不会影响外部尺寸，也不会影响内部尺寸，有种石沉大海的感觉。对于水平方向，由于内联元素宽度表现为“包裹性”，也不会影响内部尺寸。