CSS-Box模型--理解与整理

CSS-Box

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

 

在开发中，经常会遇到W3C标准盒模型和IE怪异盒模型的问题。下图是两种盒模型的示意图。

• 标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分；
  
• ie 盒子模型的 content 部分包含了 border 和 pading；

这样导致的 问题：对于元素定义的宽高，在浏览器中表现会存在差异。IE中 ，元素的宽高包含了实际内容的宽高加上内外边距以及边框的宽高，如果我们想调一下内边距padding或者边框border的尺寸，那么整个元素的实际尺寸就会发生变化，随着而来的就是布局乱掉，可谓是牵一发而动全身。
在目前流行前端布局中，前端工程师默认的页面布局是采用标准的w3c盒子模型 （需要在页面html声明处加上doctype 声明），告知浏览器按照标准盒模型的方式进行渲染页面。

关于box-sizing

在CSS3中引入了box-sizing属性, 它可以允许改变默认的CSS盒模型对元素宽高的计算方式

box-sizing属性包括content-box（default），border-box

1. content-box：border和padding不计算入width之内
   
2. border-box：border和padding计算入width之内（即IE盒子模型标准）
   

注意：ie8 浏览器支持content-box和border-box;

border-box的使用场景：

页面所有元素的宽高就会随着你设置的width、height而固定，无论你折腾padding、border，整个元素的尺寸是不会有任何变化的，只是实际内容content的尺寸会随着被压缩拉伸。这样的整体布局就稳定了许多，不再会因为某一个元素的边框微调而发生崩塌。

举栗子：

div{
        height:700px;
        float:left;
}
div.left{
        width:25%;
        background:red;
}
div.center{
        width:50%;
        box-sizing:border-box;/*可以改变元素以使其宽度包含填充*/
        /* 现在整个元素,包括填充在内,占页面总宽度的50%,所以元素的组合宽度为100%,这全程它们很好地适应于它们的容器.*/
        background:yellow;
        padding:0 20px; /*加了这个会使盒子内容溢出 但是box-sizing很好的自适应了*/
}
div.right{
       width:25%;
        background:blue;
}复制代码

本文整理了他人的博客等文章，仅供学习使用哦！