CSS/CSS3

CSS[内容盒模型]和[边框盒模型]的对比分析

目录

盒模型概述

　　盒模型是CSS中的一个重要概念和组成部分，直接决定了页面的基本布局。下图是一张网上常见的关于CSS盒模型的立体图，很好的解释了盒模型中的基本概念。

　　不同种类和版本的浏览器对于width, height, padding, border, margin的解析有所不同，导致同样的CSS代码在不同浏览器上有不相同的效果。本文对此进行小结。
　　所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
　　下面的图片说明了盒子模型基本结构(Box Model)：

　　CSS中的box-sizing属性与盒子模型密切相关：

1
box-sizing : content-box|border-box|inherit;

内容盒模型(标准盒模型)

取值

1
box-sizing : content-box;

概念

　　盒子的width只包含内容。

  • 总元素的宽度=内容宽度+padding-left+padding-right+border-left+border-right+margin-left+margin-right
  • 总元素的高度=内容高度+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom

示例

1
2
3
4
5
6
7
.box {
    width: 200px;
    height: 200px;
    border: 20px solid black;
    padding: 50px;
    margin: 50px;
}

边框盒模型(传统盒模型)

1
box-sizing : border-box;

概念

　　设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容。即总宽度=margin+width。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

示例

1
2
3
4
5
6
7
.box {
    width: 200px;
    height: 200px;
    border: 20px solid black;
    padding: 50px;
    margin: 50px;
}

分享到： QQ空间 新浪微博 腾讯微博 微信 更多