css盒模型

84 阅读1分钟

分为两种:

content-box:内容盒,宽度只是内容的宽度

border-box:边框盒,宽度包括 内容+padding+border

添加如下代码:

页面内容:

页面结果显示:

  • content-box 的宽度 width 表示内容区的宽度,不包含 padding 和 border;
  • border-box 的宽度 width 表示内容区 + padding + border 的总和。

因为content-box会将盒子撑大,使用border-box会方便一些

学以致用:利用盒模型画一个彩虹

rainbow