【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

相关推荐
布列瑟农的星空24 分钟前
rsbuild mock 插件开发指南
前端
用泥种荷花39 分钟前
【LangChain.js学习】 文档加载(Loader)与文本分割全解析
前端
cxxcode1 小时前
Vite 热更新(HMR)原理详解
前端
HelloReader1 小时前
Tauri 架构从“WebView + Rust”到完整工具链与生态
前端
Bigger2 小时前
告别版本焦虑:如何为 Hugo 项目定制专属构建环境
前端·架构·go
代码匠心3 小时前
AI 自动编程:一句话设计高颜值博客
前端·ai·ai编程·claude
_AaronWong5 小时前
Electron 实现仿豆包划词取词功能:从 AI 生成到落地踩坑记
前端·javascript·vue.js
cxxcode5 小时前
I/O 多路复用:从浏览器到 Linux 内核
前端
用户5433081441945 小时前
AI 时代,前端逆向的门槛已经低到离谱 — 以 Upwork 为例
前端
JarvanMo5 小时前
Flutter 版本的 material_ui 已经上架 pub.dev 啦!快来抢先体验吧。
前端