【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

相关推荐
七宝三叔5 分钟前
C#,为什么要用LINQ?
前端
七宝三叔6 分钟前
用「点外卖」的例子讲透HttpClient
前端
C_心欲无痕27 分钟前
nodejs - pnpm解决幽灵依赖
前端·缓存·npm·node.js
二等饼干~za89866833 分钟前
GEO优化---关键词搜索排名源码开发思路分享
大数据·前端·网络·数据库·django
韩曙亮37 分钟前
【Web APIs】移动端轮播图案例 ( 轮播图自动播放 | 设置无缝衔接滑动 | 手指滑动轮播图 | 完整代码示例 )
前端·javascript·css·html·轮播图·移动端·web apis
犬大犬小43 分钟前
Web 渗透:如何绕过403 Forbidden? Part I
前端·安全性测试·web 安全
AI前端老薛1 小时前
面试:了解闭包吗?
前端
xu_duo_i1 小时前
vue3+element-plus图片上传,前端压缩(纯函数,无插件)
前端·javascript·vue.js
林恒smileZAZ1 小时前
在 Web 前端实现流式 TTS 播放
前端
睡不着的可乐1 小时前
前端优化:requestAnimationFrame vs setInterval 性能对比与实战
前端