【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

相关推荐
小小小小宇几秒前
git sparse-checkout(稀疏检出)
前端
ZC跨境爬虫14 分钟前
跟着 MDN 学JavaScript day_9:字符串方法实战挑战与解题思路
开发语言·前端·javascript
夜焱辰27 分钟前
WebMCP 的正确打开方式:只注册 2 个工具,代理 N 个——CreatorWeave 的 On-Demand 实践
前端
用户7459571748401 小时前
Fabric:Python SSH 远程执行利器
前端
用户288391927471 小时前
Elasticsearch DSL:用 Python 对象写查询,不用再手写 JSON
前端
一拳小和尚LXY2 小时前
我开发了一款免费 Chrome 插件 TabScribe:一键复制所有标签页为 Markdown/JSON,完全离线零追踪
前端·chrome·json
dust_and_stars2 小时前
ubuntu24上安装chrome和edge浏览器
前端·chrome·edge
恋猫de小郭2 小时前
Android 官方给 Compose 搞了个不需要 UI 环境的 Composable
android·前端·flutter
老王以为2 小时前
我的多屏编程工作流:从切窗口到空间锚定
前端
旺王雪饼 www2 小时前
localStorage 和 sessionStorage区别与联系
服务器·前端·javascript