【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

相关推荐
用户125758524363 分钟前
XYGo Admin ArtTable 表格组件:一行代码搞定加载、刷新与分页
前端
gogoing6 分钟前
Prettier 配置说明
前端·javascript
十有八七6 分钟前
Hermes Agent 自进化实现:从源码到架构的深度拆解
前端·人工智能
渐儿7 分钟前
NestJS 生产级开发教程
前端
前端毕业班7 分钟前
uni-app onShareAppMessage hook 原理分析
前端·javascript
gogoing9 分钟前
React 分包加载优化
前端·react.js
gogoing12 分钟前
Babel 配置与工具
前端·javascript
亲亲小宝宝鸭12 分钟前
重新install,项目就跑不起来了?!
前端·npm
Mike117.26 分钟前
GBase 8a 物化视图依赖和 DDL 风险排查记录
java·服务器·前端
蜡台42 分钟前
Vue3 Hook 与 Store 状态管理:深度解析与选型指南
前端·javascript·vue.js