CSS inline-block、BFC以及外边距合并

2016-06-02 本文已影响305人 betterwlf

盒模型是CSS中很重要的一个概念。只有真正的理解好盒模型，才能正确的使用盒模型进行页面布局。在这篇文章中，我们将深入地探讨CSS盒模型的原理和机制。

盒模型基本概念

所有HTML元素，在页面的呈现过程中，都遵循CSS制定的盒模型。盒模型的几个要素是border、margin、padding、content，如下图，

盒模型

content：真正包含元素内容的区域
padding(内边距)：内容和边框之间的一段间距，属于标签内部
border(边框)：包含边框的区域，扩展了内边距区域。它位于边框边界内部。大小为border-box宽和border-box高
margin(外边距)：该标签和其他标签之间的间距，设置此内容，不会影响标签的大小

当一个元素既有margin,又有padding,还有边框时，在普通流中所占的空间就是这些值的总和。即横向空间为：marginLeft + borderLeftWidth + paddingLeft + width + paddingRight + borderRightWidth + marginRight，纵向的同理。

盒模型的分类及不同盒模型之间的区别

盒模型分为IE盒模型和W3C标准的盒模型。它们之间的区别在于IE盒模型和W3C标准盒模型计算高度和宽度的方式不同。具体不同表现在以下方面：

W3C标准盒模型（高度的计算类似）：

一个元素的宽度=content
盒子的总宽度=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right

W3C标准模型

IE怪异盒模型（高度的计算类似）：

一个元素的宽度=content+padding+border
盒子的总宽度=margin-left+width+margin-right

IE盒子模型

如何通过CSS设置IE盒模型和W3C标准盒模型

//W3C标准盒模型（浏览器默认）
box-sizing:content-box;

//IE怪异盒模型
box-sizing:border-box;

box-sizing是CSS3的新属性，为了避免在不同的浏览器中表现不同的情况产生，我们可以这样使用

Element {
     -moz-box-sizing: border-box;  
     -webkit-box-sizing: border-box; 
     -o-box-sizing: border-box; 
     -ms-box-sizing: border-box; 
     box-sizing: border-box; 
  }

JS如何设置盒模型的对应的宽和高

如果样式写在行内，可以通过document.style.width/height获取盒模型的宽或高

  <style>
    #content{
      height:200px;
      border:2px solid blue;
      padding:20px;
      margin:20px;
    }
  </style>
  <div id="content" style="width:100px"></div>
  <script type="text/javascript">
    var ele=document.getElementById('content');
    console.log('content的宽度：'+ele.style.width);  //100px
  </script>

行内样式和外联样式都能取到，只有IE支持

 <style>
    #content{
      width:100px;  
      height:200px;
      border:2px solid blue;
      padding:20px;
      margin:20px;
    }
  </style>
  <div id="content"></div>
  <script type="text/javascript">
    var ele=document.getElementById('content');
    console.log('content的宽度：'+ele.currentStyle.width);   //100px
  </script>

行内样式和外联样式都能取到，主流浏览器几乎都支持

 <style>
    #content{
      width:100px;  
      height:200px;
      border:2px solid blue;
      padding:20px;
      margin:20px;
    }
  </style>
  <div id="content"></div>
  <script type="text/javascript">
    var ele=document.getElementById('content');
    console.log('content的宽度：'+window.getComputedStyle(ele).width);   //100px
  </script>

行内样式和外联样式都能取到，主浏览器几乎都支持

 <style>
    #content{
      width:100px;  
      height:200px;
      border:2px solid blue;
      padding:20px;
      margin:20px;
    }
  </style>
  <div id="content"></div>
  <script type="text/javascript">
    var ele=document.getElementById('content');
    console.log('content的宽度：'+ele.getBoundingClientRect().width);   //100px
  </script>

用盒模型解释边距重叠

边距重叠也称为外边距合并，指的是块的顶部外边距和底部外边距有时被组合（折叠）为单个外边距，其大小时组合到其中的最大的外边距。

发生边距重叠的基本情况有三种：

相邻的兄弟姐妹元素：毗邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要清除过去的浮动）。示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>兄弟元素外边距合并</title>
  <style>
    #box1{
      width:200px;
      height:200px;
      border:1px solid red;
      margin-bottom:10px;
    }
    #box2{
      width:100px;
      height:100px;
      border:1px solid blue;
      margin-top:30px;
    }
  </style>
</head>
<body>
  <div id="box1"></div>
  <div id="box2"></div>
</body>
</html>

可以发现两个盒子中间的距离不是“上面盒子的下边距”与“下面盒子的上边距”的和，而是两者中的较大值

块级元素与其第一个或最后一个子元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>父子元素外边距合并</title>
  <style>
    #box{
      width:330px;
      height:335px;
      background:pink;
    }
    #box1{
      width:200px;
      height:200px;
      border:1px solid red;
      margin:10px;
    }
    #box2{
      width:100px;
      height:100px;
      border:1px solid blue;
      margin-top:30px;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="box1"></div>
    <div id="box2"></div>
  </div>
</body>
</html>

可以发现父容器的顶部和上面子容器的顶部合并，父容器的底部和下面子容器的底部合并

空块元素

如果存在一个空的块级元素，其border、padding、inline content、height、min-height都不存再，此时它的上下外边距将会合并

参考: