【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

相关推荐
LaughingZhu7 小时前
Product Hunt 每日热榜 | 2026-04-05
前端·数据库·人工智能·经验分享·神经网络
SuperEugene8 小时前
Vue3 组件复用设计:Props / 插槽 / 组合式函数,三种复用方式选型|组件化设计基础篇
前端·javascript·vue.js
nFBD29OFC8 小时前
利用Vue元素指令自动合并tailwind类名
前端·javascript·vue.js
ISkp3V8b49 小时前
ASP.NET MVC]Contact Manager开发之旅之迭代2 - 修改样式,美化应用
前端·chrome
Highcharts.js9 小时前
高级可视化图表的暗色模式与主题|Highcharts 自适应主题配色全解
前端·react.js·实时图表
zk_one10 小时前
【无标题】
开发语言·前端·javascript
precious。。。11 小时前
1.2.1 三角不等式演示
前端·javascript·html
小陈工12 小时前
Python Web开发入门(十一):RESTful API设计原则与最佳实践——让你的API既优雅又好用
开发语言·前端·人工智能·后端·python·安全·restful
星空12 小时前
前段--A_2--HTML属性标签
前端·html
三万棵雪松12 小时前
【Linux 物联网网关主控系统-Web部分(一)】
linux·前端·嵌入式linux