【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

相关推荐
少寒8 分钟前
async/await:异步编程的优雅解决方案
前端·javascript
华仔啊12 分钟前
CSS的clamp()函数:一行代码让网页自适应如此简单
前端·css
wordbaby15 分钟前
React 误区粉碎:useEffectEvent 是“非响应式”的,所以它不会触发重渲染?
前端·react.js
Doris89331 分钟前
【JS】Web APIs BOM与正则表达式详解
前端·javascript·正则表达式
建南教你种道德之花31 分钟前
浏览器缓存完全指南:从原理到实践
前端
1024小神39 分钟前
swiftui中view分为几种类型?各有什么特点
前端
局i1 小时前
v-for 与 v-if 的羁绊:Vue 中列表渲染与条件判断的爱恨情仇
前端·javascript·vue.js
suke1 小时前
紧急高危:Next.js 曝出 CVSS 10.0 级 RCE 漏洞,请立即修复!
前端·程序员·next.js
狮子座的男孩1 小时前
js函数高级:06、详解闭包(引入闭包、理解闭包、常见闭包、闭包作用、闭包生命周期、闭包应用、闭包缺点及解决方案)及相关面试题
前端·javascript·经验分享·闭包理解·常见闭包·闭包作用·闭包生命周期