【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

相关推荐
拖孩2 分钟前
全程 AI 写的小程序,刚接上会员虚拟支付,上线第二天就有人真金白银买单了|双签名、定价、iOS 的坑我全踩了一遍
前端·后端·微信小程序
小蚂蚁i4 分钟前
React 基础
前端
ZoeLandia5 分钟前
TypeScript 02:interface、type 与类型收窄
前端·typescript
Bode_20028 分钟前
构建制造业知识库
前端·智能制造系统·业务流程再造
cindershade10 分钟前
接口协作的交接面:让并行开发从约定走到发布
前端
JAVA老架构AI智能化12 分钟前
多图叠加比对
前端·javascript·chrome
ShineWinsu14 分钟前
对于HTML:HTML常见标签的解析—上
前端·面试·html·浏览器·标签·图片·超链接
行者全栈架构师15 分钟前
【鸿蒙心迹】从手机到平板、折叠屏——多端适配自查清单与踩坑实录(HarmonyOS 7.x)
前端·算法·架构
百度一下吧1 小时前
HTML5 新增标签与 Web Components 使用指南
前端·html·html5
志尊宝1 小时前
Vue3 零基础每日笔记(081):富文本编辑器集成 wangEditor 5——封装
前端·javascript·vue.js·笔记·信息可视化·echarts