【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

相关推荐
A24207349308 分钟前
js流程控制语句
开发语言·前端·javascript
AAA阿giao25 分钟前
JavaScript 执行机制深度解析:从 V8 引擎到作用域链、变量提升与闭包的全面剖析
前端·javascript·面试
一水鉴天25 分钟前
整体设计 定稿 之19 拼语言表述体系之2(codebuddy)
大数据·前端·人工智能·架构
低代码的未来27 分钟前
React CVE-2025-55182漏洞排查与修复指南
前端
软件技术NINI27 分钟前
html css js网页制作成品——陈都灵html+css 5页附源码
javascript·css·html
脾气有点小暴30 分钟前
CSS position 属性
前端·css
ohyeah1 小时前
用原生 JS 手写一个“就地编辑”组件:EditInPlace 的 OOP 实践
前端·javascript
timeweaver1 小时前
React Server Components 的致命漏洞CVE-2025-55182
前端·安全
重铸码农荣光1 小时前
深入理解 JavaScript 中的 this:一场关于作用域、调用方式与设计哲学的思辨
前端·javascript
新晨4371 小时前
跨域是服务器拒绝请求还是浏览器去拒绝的请求?
前端·浏览器