css盒模型

来源：互联网发布：java 泛型和通配符编辑：程序博客网时间：2024/06/02 02:29

CSS盒子模型又称框模型 (Box Model)，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

一、盒模型一共有两种，一种是标准盒模型，另一种就是IE盒模型。

标准盒模型如下图所示：

标准盒模型中，元素的width、padding、border互不包含。
- 元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
- 元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值＋ border的上下宽度。
IE盒模型如下图所示：

IE盒模型中，元素的width = content + padding + border
- 元素框的总宽度 = 元素（element）的width + margin的左边距和右边距的值；
- 元素框的总高度 = 元素（element）的height + margin的上下边距的值。

那应该选择使用哪种盒子模型呢？

为了兼容大部分浏览器，一般都使用标准 w3c 盒子模型。那怎么样才算是选择了“标准 w3c 盒子模型”呢？就是看在网页的顶部有无 doctype 声明。
假如不加 doctype声明，那么各个浏览器会根据自己的行为去理解网页，即ie浏览器会采用ie盒子模型去解释你的盒子，而其他浏览器会采用标准w3c盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的就不一样。
反之，假如加上了doctype声明，那么所有浏览器都会采用标准w3c盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致。

下面用实例说明到底是用的哪种

代码1

<html><head><title>你用的盒子模型是？</title></head><body><div>你没有设置页面的DOCTYPE 声明</div></body></html>

上面的代码没有加上 DOCTYPE 声明，在 IE 浏览器中显示“IE盒子模型”，在 FF 浏览器中显示“标准 W3C 盒子模型”。
- 代码2：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>你用的盒子模型是标准W3C盒子模型</title></head><body><div>你设置了页面的DOCTYPE 声明</div></body></html>

代码2 与代码1 唯一的不同的就是顶部加了 DOCTYPE 声明。在所有浏览器中都显示“标准 W3C 盒子模型”。
所以为了让网页能兼容各个浏览器，让我们用标准 W3C 盒子模型。

那如果你想使用IE盒模型，同时又想兼容大部分的浏览器的时候，就可以在你的代码中使用box-sizing了。

二、box-sizing属性介绍

box-sizing属性是用户界面属性里的一种，而且这个属性跟盒子模型有关。
- box-sizing : content-box|border-box|inherit;
1. content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。即总宽度=margin+border+padding+width
2. border-box ,设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容，即总宽度= margin + width。
3. inherit , 规定应从父元素继承 box-sizing 属性的值

关于border-box的使用：

一个box宽度为100%，又想要两边有内间距，这时候用就比较好
可以全局设置border-box，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

阅读全文

0 0