【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

相关推荐
怪我冷i10 小时前
在win11进行Rust Web 开发,采用Salvo框架
开发语言·前端·rust
candyTong10 小时前
Claude Code 是怎么跑起来的:从 Agent Loop 理解代理循环实现
前端·后端·ai编程
倾颜10 小时前
我是怎么把 Multi-Tool Runtime 升级成第一层 Skill Runtime 的
前端·llm·next.js
qq_4061761410 小时前
React 状态管理完全指南:从入门到选型
前端·javascript·react.js
thatway198918 小时前
闲聊-关于AI终结者的警醒
前端
努力的小郑18 小时前
突发!Claude Code 51万行源码全网裸奔:一场史诗级“开源”事故,国内大厂笑麻了
前端·后端·ai编程
七度黑光18 小时前
用 openclaw 给故障复盘打分:质量审核自动化实践
运维·服务器·前端·数据库·自动化
HashTang19 小时前
Claude Code 源码中 REPL.tsx 深度解析:一个 5005 行 React 组件的架构启示
前端·后端·ai编程
wendycwb19 小时前
前端城市地址根据最后一级倒推,获取各层级id的方法
前端·vue.js·typescript
终端鹿20 小时前
Vue3 模板引用 (ref):操作 DOM 与子组件实例 从入门到精通
前端·javascript·vue.js