css盒模型

来源：互联网发布：淘宝的付款方式有哪些编辑：程序博客网时间：2024/06/16 20:37

今天看了面试题，被盒模型的大小问题又懵了，于是在网上查了查，决定记下来。

盒模型，我的理解是在进行html元素布局时，可以把每一种元素所占用的范围可以称为一个盒子。这个元素的长，宽，内外边距，边框属性对应为盒子的属性。

重要的是盒子的长度与宽度：

我一开始以为就是我们在设置元素样式时的height和width,后来看了视频才知道原来盒子的宽与长其实都是加上左右或者上下的边距和边框的。

不过今天看面试题，居然又出现了两个盒模型。一个叫标准盒模型，另一个叫ie盒模型。下面来区分一下。

1.标准盒模型。

是我们经常用的盒模型，盒子的宽度=宽度+左内距+右内距+左边框+右边框+左外距+右外距。盒子的高度=高度+上内距+下内距+上边框+下边框+上外距+下外距。

2.ie盒模型

顾名思义，实在ie上生效的盒模型，它与标准盒模型的区别是盒子的宽度=宽度+左外距+右外距。盒子的高度=高度+上外距+下外距。

它的长度与宽度里包含了内距与边框。

我们一般默认是标准盒模型，原因是在页面开头声明了<!DOCTYPE html>，这让我对写<!DOCTYPE html>的规范又明白了点。

不过我又查了查css有这么一个属性box-sizing。box-sizing:content-box，那盒模型使用标准盒模型。如果box-sizing:border-box，那盒模型使用ie盒模型。

0 0