【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

相关推荐
程序员鱼皮15 分钟前
我花 300 块,让 Claude Fable 5 开发桌面 APP,值么?
前端
William_Xu21 分钟前
JavaScript 并发控制
前端
拾年27521 分钟前
从零手写 Ajax:用原生 XHR 搭建前后端交互全流程
前端·javascript·ajax
光影少年22 分钟前
懒加载与分包:React.lazy + Suspense
前端·react.js·掘金·金石计划
小林ixn37 分钟前
你以为你懂 + 号?看完这篇 Bun + TS 实战,才发现以前全写错了
前端·javascript·typescript
namexingyun1 小时前
开源前端生态如何成为 AI UI 生成的“燃料“:shadcn/ui、Tailwind CSS、Storybook 技术价值全解剖
java·前端·人工智能·python·ui·开源·ai编程
Zyed1 小时前
[STM32]Day15读写FLASH+读取ID
前端·stm32·性能优化
jvxiao2 小时前
你真的懂作用域吗?从编译原理角度深度 JS 的作用域
前端·javascript
Darling噜啦啦2 小时前
二叉树与递归算法实战:从树结构到 LeetCode 爬楼梯,一文吃透前端数据结构与递归思维
前端·javascript·数据结构
星栈2 小时前
Rust + Makepad 应用怎么打包发布:Windows、macOS、Linux 全平台交付
前端·rust