【CSS】标准&怪异盒模型

概念

CSS 盒模型本质上是一个盒子,盒子包裹着HTML 元素,盒子由四个属性组成,从内到外分别是:content 内容padding 内填充border 边框外边距 margin

盒模型的分类

  • W3C 盒子模型(标准盒模型)
  • IE 盒子模型(怪异盒模型)

两种盒模型的区别

宽度和高度的计算方式不同

标准盒模型:

复制代码
width = content-width
height = content-height

怪异盒模型:

复制代码
width = content-width + padding-width + border-width
height = content-height + padding-height + border-height

如何在CSS 设置这两个模型

标准盒模型:

复制代码
box-sizing: content-box

怪异盒模型:

复制代码
box-sizing: border-box

一般我们常用的是怪异盒模型 box-sizing: border-box

相关推荐
渣渣xiong21 分钟前
从零开始:前端转型AI agent直到就业第五天-第十一天
前端·人工智能
布局呆星29 分钟前
Vue3 | 组件通信学习小结
前端·vue.js
C澒32 分钟前
IntelliPro 企业级产研协作平台:前端智能生产模块设计与落地
前端·ai编程
OpenTiny社区2 小时前
重磅预告|OpenTiny 亮相 QCon 北京,共话生成式 UI 最新技术思考
前端·开源·ai编程
前端老实人灬2 小时前
web前端面试题
前端
Moment2 小时前
AI 全栈指南:NestJs 中的 Service Provider 和 Module
前端·后端·面试
IT_陈寒2 小时前
为什么我的JavaScript异步回调总是乱序执行?
前端·人工智能·后端
Moment2 小时前
AI全栈入门指南:NestJs 中的 DTO 和数据校验
前端·后端·面试
小码哥_常2 小时前
告别RecyclerView卡顿!8个优化技巧让列表丝滑如德芙
前端
小村儿2 小时前
Harness Engineering:为什么你用 AI 越用越累?
前端·后端·ai编程