CSS 盒模型

82 阅读1分钟

盒模型

问:标准盒模型和ie模型区别?

答:区别是:计算宽和高的不同。

  • 标准模型width/height不计算padding和border
  • ie模型width/height包含padding和border

IE盒模型的width/height = content + border + padding

标准盒模型的width/height = content

都不包含外边框。

问:可以改变盒模型吗?

答:可以,css3中的box-sizing可以。

默认值content-box,标准盒模型。

border-box,ie使用的盒模型。

块级元素,内联元素

在CSS中,所有元素都被一个个“box”包围着。有两种盒子,块级元素和内联元素。

无论是div、span、还是a都是盒子。

图片、表单元素一律看作是文本,它们并不是盒子,因为一张图片里面并不能放东西,它自己就是自己的内容。

在页面流和元素之间的关系方面表现出不同的行为

块级容器

  1. 元素会在内联的方向上扩展并占据父容器在该方向上的所有可用空间,在绝大数情况下意味着元素会和父容器一样宽
  2. 每个盒子都会换行
  3. width 和 height 属性可以发挥作用
  4. 内边距(padding), 外边距(margin) 和 边框(border) 会将其他元素从当前盒子周围“推开”

内联容器

  1. 盒子不会产生换行。
  2. width 和 height 属性将不起作用。
  3. 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
  4. 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。