【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

相关推荐
幸运小圣20 小时前
深入理解ref、reactive【Vue3工程级指南】
前端·javascript·vue.js
用户479492835691520 小时前
面试官最爱挖的坑:用户 Token 到底该存哪?
前端·javascript·面试
Irene199120 小时前
Web前端开发中的垃圾回收详解
前端
Heo20 小时前
Vue3.4中diff算法核心梳理
前端·javascript·面试
惜.己20 小时前
前端笔记(二)
前端·笔记
O***p60420 小时前
前端的“复杂性红线”:如何在超大型应用时代构建可持续演进的前端架构?
前端·架构
腾讯TNTWeb前端团队20 小时前
hel+发布了,一起体验原生跨端js模块联邦
前端
幸运小圣20 小时前
【Vue3】 中 ref 与 reactive:状态与模型的深入理解
前端·javascript·vue.js
叁两20 小时前
教你快速从Vue 开发者 → React开发者转变!
前端·vue.js·react.js
吴敬悦20 小时前
Claude Code 使用的命令行 UI 库: ink(使用 react 编写命令行界面)
前端·react.js