CSS学习篇(五) 盒子模型(框模型)

CSS学习篇(五) 盒子模型(框模型)
0

  盒子模型(box model),也可以叫框模型,是网页布局的基础,每个HTML元素都被表示为一个矩形盒子,盒子包含了它的内容(content)、内边距(padding)、边框(border)和外边距(margin),每部分都可以用一个或多个CSS属性来指定其大小、颜色等,可以参考下图:

  1.内容盒子(content-box)由 width 和 height 来表示内容的宽度和高度,主要用来存放盒子的内容,包括文本以及其他嵌套子元素的盒子。除此之外,还有 min-width、max-width、min-height和max-height 可以用来设置盒子的最大/最小宽度和高度值。

  2.padding,表示盒子的内边距,它表示从边界到content-box之间的空间,padding 属性可以设置盒子四条边,同时还提供了 padding-top、padding-right、padding-bottom 和 padding-left 分别设置盒子各个方向的内边距。

  3.border,表示盒子的边框,它分割了内边距和外边距,边框厚度默认为0(即不可见),但可以通过border简写属性来设置边框厚度、样式和颜色,例如 border:1px solid blue;可以设置厚度为1像素的蓝色实体边框。

  同样地,border有可以通过border-top、border-right、border-bottom 和 border-left来设置各条边的样式。

  4.margin,表示盒子的外边距,就是盒子边框往外的区域,一般用外边距设置来与其他元素保持一定距离,类似padding,margin是简写属性,它还提供了 padding-top、padding-right、padding-bottom 和 padding-left 分别设置各方向的外边距。

  特殊地,当两个盒子的接触在一起时,它们的间距合并为两者中最大的外边距的距离,而不是两者外边距的总和,这种特性叫外边距塌陷(margin-collapsing)。

  除了上面这些属性外,还有其他的一些可以控制盒子显示内容的属性,例如:

overflow

  这个属性用来控制当盒子装不住所有内容时的表现,分别可以设置以下三个值:

  auto:当内容过多,溢出的内容被隐藏,然后出现滚动条来让我们滚动查看所有的内容。

  scroll:无论内容是否过多,都会出现滚动条(水平和垂直的都有)来让我们滚动查看所有的内容。

  hidden:当内容过多,溢出的内容被隐藏。

  visible(默认值):当内容过多,溢出的内容被显示在盒子的外边。

background-clip

  这个属性用来裁剪盒子的背景内容,分别可以设置以下三个值:

  border-box(默认):背景内容显示到边框。

  padding-box:背景内容显示到内边距。

  content-box:背景显示到内容盒子内。

CSS盒子类型

  CSS 中盒子类型有很多种,常见有三种:块级盒子(block box)、行内盒子(inline box)和行内块级盒子(inline-block box),它可以使用 display 属性来设置。HTML 中的块级元素默认 display 为 block,行内元素默认 display 为 inline 。

下面分别说明几种盒子类型的特点:

block

  • 独占一行(前后自动换行)
  • 宽度是其父元素的100%
  • 高度是其(最大)内容的高度
  • 可设置宽高
  • 可包含其他的块盒子或行内盒子

inline

  • 与其他行内盒子并行在一行
  • 宽高与其内容的宽高一致
  • 不能设置宽高
  • 不可包含其他盒子

inline-block

  它是上面两者的结合体:

  • 不会独占一行,会与其他行内盒子一起随文字流动

  • 可以设置宽高

  • 像块级盒子(block box)一样保持完整性,不会像行内盒子那样会被拆开两行,但若单独一行都没有足够的空间存放它会断开多层,失去一个盒子的形状

盒子模型的变换

  默认情况下,盒子的总宽度 = width+padding-left+padding-right+border-left+border-right ,但是这样的话有时候会不方便,例如现在我有一个保持总宽度为容器一半(50%)的盒子,同时它又有一定宽度的边界和内边距,那么我还要去计算它的 content-box 的宽度从而去设置 width(如果我之类边界和内边距改变,这个 width 又要修改了),所以能不能有一种方便的方法来设置盒子的总宽度呢?没错,就是 box-sizing 属性,将它设置为 border-box 即可,这样设置后盒子模型变成下面这样:

  这时候盒子总宽度 = width,包含了原来 content-box 的 width、 padding 和 border 的宽度,这样无论边界和内边距怎么改变,去设置 width 值就比较方便了。

1赞