CSS 盒模型和怪异盒模型

CSS 盒模型和怪异盒模型

一.概念

盒模型是CSS布局的基石,它规定了网页元素如何显示以及元素间相互关系,CSS定义所有元素都可以拥有像盒子一样的外形和平面空间,即都包含内容区,补白(填充,内边距),边框,边界(外边距)

下面图片说明了盒子模型:

• Margin(外边距):在元素外边的空白区域,被称为外边距
• Border(边框): 元素的边框
• Padding(内边距) 元素内容到元素的边框之间的距离,也称补白.
• Content 盒子的内容

二.标准盒模型和IE盒模型

盒模型又分为标准盒模型(W3C标准)和怪异盒模型(IE盒模型)

标准盒模型与IE盒模型的区别在于宽高的计算方式不同

1.标准盒模型

在标准模式下,一个块的宽度和高度计算如下

总宽度: width+margin(左右)+padding(左右)+border(左右)

总高度: height+margin(上下)+padding(上下)+border(上下)

2.IE盒模型

IE盒模型或怪异盒模型它的宽度和高度的计算方式是会包含padding和border的,计算方式如下

总宽度:width(包含了padding和border的值)+margin(左右)

总高度:height(包含了padding和border的值)+margin(上下)

3.区别

宽高计算方式不一样,标准盒模型计算元素的宽高只计算Content的宽高,IE盒模型是Content+Padding+Border的中宽高

4.示例

.box{
    width:100px;
    height: 100px;
    border:5px solid red;
    padding: 10px;
    margin: 20px;
}
<div class="box"></div>

上述代码是一个盒子:content宽高100px,100px,padding为10px,border为5px,margin为10px

标准盒模型下,这个元素的宽为100px,高为100px

IE盒模型下,宽为100px+2*10px(左右padding)+2*5px(左右border)=130px,高为100px+2*10px(上下padding),+2*5px(上下border)=130px

5.设置盒模型方法

• 设置标准盒模型

  box-sizing:content-box

• 设置怪异盒模型
  box-sizing:border-box

box-sizing的默认值是content-box ,也就是默认标准盒模型

三.运用

我们编写页面代码时,应尽量使用标准的W3C模型(需在页面中声明 doctype类型),这样可以避免多个浏览器对同一页面不兼容

如果不声明doctype类型,IE浏览器会将盒模型解释为IE盒模型,FireFix等会将其解释为W3C盒子模型,若在页面中声明了doctype类型,所有的浏览器都会把盒模型解释为W3C盒模型.

一般呢,我们使用过程中,都会倾向使用怪异盒模型,因为避免的一些高度或者宽度的计算,特别是在移动端适配的时候,会对自适应布局比较友好

//写在css  重置中,全局使用怪异盒模型
*{
   box-sizing:border-box 
}