【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

相关推荐
IT_陈寒24 分钟前
Python性能提升50%:这5个隐藏技巧让你的代码快如闪电⚡
前端·人工智能·后端
懒人村杂货铺33 分钟前
微前端QianKun的使用以及坑点问题
前端
qq_3665775135 分钟前
Vue3创建项目,只能localhost访问问题处理
前端·javascript·vue.js
一个处女座的程序猿O(∩_∩)O1 小时前
React Router 路由模式详解:HashRouter vs BrowserRouter
前端·react.js·前端框架
Caster_Z1 小时前
WinServer安装NPM(Nginx Proxy Manager),并设置反向代理和开启https
前端·nginx·npm
顾安r1 小时前
11.22 脚本 手机termux项目分析(bash)
前端·python·stm32·flask·bash
是你的小橘呀2 小时前
JavaScript 原型链解密:原来 proto 和 prototype 这么好懂
前端·javascript·前端框架
ohyeah2 小时前
使用 LocalStorage 实现本地待办事项(To-Do)列表
前端·javascript
Jing_Rainbow2 小时前
【前端三剑客-6/Lesson11(2025-10-28)构建现代响应式网页:从 HTML 到 CSS 弹性布局再到 JavaScript 交互的完整指南 🌈
前端·javascript
非专业程序员2 小时前
精读 GitHub - servo 浏览器(一)
前端·ios·rust