【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

相关推荐
酷炫码神10 分钟前
Day 2|CSS 盒模型:把昨天的骨架,变成能看的页面
前端·css
Amos_Web15 分钟前
我做了一个 Chrome 插件,专治“这篇文章我明明看过,但重点去哪了?”
前端·浏览器
abcyuu17 分钟前
用友 U8 Cloud 生产制造模块深度解析:从 BOM 建立到成本核算的技术实现
前端·数据库·制造
零基础12320 分钟前
为什么 Agent 用 SQLite 数据库?
前端·人工智能·sqlite·开源
xuyanzhuqing31 分钟前
如何在一周内将一个巨石工程实现国际化
前端
数据掘金37 分钟前
小程序埋点方案的埋点覆盖率怎么算?
前端
true80337 分钟前
跨端开发的相册选择:弃用 uni-app 原生选图 API,直调 Android MediaStore 实现自定义相册架构
前端
数据掘金37 分钟前
多AI平台回答快照的差异校验
前端
于航44 分钟前
从 Multi-Agent 到 Skill+CLI:个人助理 1.0 → 2.0 架构演进
前端
2301_786756601 小时前
2026 JCR 秋季数据重载解读:影响因子为什么会变?附期刊影响力数据批量追踪方案
java·服务器·前端