说说对盒子模型的了解和实际开发中需要注意的点

发布时间 2023-04-23 23:07:35作者: 小阿紫

盒子模型

  • 定义

    由内容 content + 内边距 padding + 边框 border + 外边距 margin 构成,盒子的宽高由 content + padding + border 决定,但是不同的盒子模型的计算依据不一样,分为:标准盒模型(w3c)怪异盒模型(IE)

  • 标准盒模型

    宽高包含 content + padding + border

  • 怪异盒模型

    宽高只包含 content

  • 盒模型设置

    box-sizing: content-box // 标准盒模型
    box-sizing: border-box // 怪异盒模型