css常见的两种盒模型及其区别

html-css06

css常见的两种盒模型及其区别,第1张

盒模型也称为框模型，就是从盒子顶部俯视所得的一张平面图，用于描述元素所占用的空间。它有两种盒模型，W3C盒模型和IE盒模型（IE6以下，不包括IE6以及怪异模式下的IE5.5+）

理论上两者的主要区别是二者的盒子宽高是否包括元素的边框和内边距。当用CSS给给某个元素定义高或宽时，IE盒模型中内容的宽或高将会包含内边距和边框，而W3C盒模型并不会。

例如：下面的div元素，在W3C盒模型中的宽度为122px在IE盒模型中的宽度是100px

盒子模型分为哪几部分？

一个盒子模型分成几部分：

- 内容区（content）

- 内边距（padding）

- 边框（border）

- 外边距（margin）12345

内容区

内容区：盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。

如果没有元素设置内边距和边框，则设置内容大小偶人和盒子大小一致123

通过width 和height 两个属性可以设置内容的大小1

width 和height属性值适合用于块元素1

内边距

内边距：元素内容区与边框以内的空间1

默认情况下width和height不包含padding的大小

12

使用padding属性来设置元素的内边距

举例：

-padding:10px 20px 30px 40px

这样会设置元素的 上，右，下，上 四个方向的内边距。(按照顺时针方向)

padding:10px 20px 30px

分别指定 上，左右，下 四个方向的内边距

padding:10px 20px

分别指定上下，左右四个方向的内边距

padding:10px

分别指定 上左下右 四个方向的内边距

同时在CSS中还提供padding-top padding-right padding-left padding-bottom1234567891011121314

边框

可以在元素周围创建边框，边框是元素可见的最外部1

可以使用border属性来设置盒子的边框：

-border:1px red solid

上边的样式分别指定了边框的 宽度 ，颜色，样式123

也可以使用border-top/left/right/bottom分别指定 上右下左 四个方向的边框

和padding一样，默认width 和height 并包括边框的宽度123

边框样式

边框样式可以设置多种样式：

-none（没有边框）

-dotted（点线）

-dashed（虚线）

-solid（实线）

-double（双线）

-groove（槽线）

-ridge（脊线）

-inset（凹线）

-outset（凸线）1234567891011

外边距

外边距是原素边框与周围元素相距的空间1

使用margin属性可以设置外边距1

用法和padding 类似，同样也提供了四个方向的

margin-top/right/bottom/left12

当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码 margin:0 auto 可以使元素居中

1

margin 在一个声明中设置所有外边距属性。

margin-top设置元素的上外边距。

margin-bottom 设置元素的下外边距。

margin-left设置元素的左外边距。

margin-right 设置元素的右外边距。