【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

相关推荐
oo121383 分钟前
里程碑5 - 完成框架 npm 包抽象封装并发布
前端·npm
达拉4 分钟前
我花了三天用AI写了个上一代前端构建工具
前端·前端工程化
bysking7 分钟前
【31-Ai-Agent】ai-agent的核心实现细节-bysking
前端
从文处安12 分钟前
「前端何去何从」(React教程)React 状态管理:从局部 State 到可扩展架构
前端·react.js
一拳不是超人15 分钟前
Three.js一起学-如何通过官方例子高效学习 Three.js?手把手带你“抄”出一个3D动画
前端·webgl·three.js
椰子皮啊19 分钟前
400行Node.js搞定mediasoup信令转换:一次跨语言"表白"实录
前端·架构
果然_27 分钟前
告别混淆!Git 多账号按域名/目录自动切换身份的终极指南
前端
Wect31 分钟前
React Scheduler & Lane 详解
前端·react.js·面试
myNameGL32 分钟前
ArkTs核心语法
前端·javascript·vue.js
重庆穿山甲40 分钟前
从零到精通:OpenClaw完整生命周期指南
前端·后端·架构