【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

相关推荐
谢尔登1 小时前
Vue3 响应式系统——computed 和 watch
前端·架构
愚公移码1 小时前
蓝凌EKP产品:主文档权限机制浅析
java·前端·数据库·蓝凌
我是伪码农1 小时前
轮播图案例
css·html·css3
欣然~3 小时前
法律案例 PDF 批量转 TXT 工具代码
linux·前端·python
一个小废渣3 小时前
Flutter Web端网络请求跨域错误解决方法
前端·flutter
符文师3 小时前
css3 新特性
前端·css3
ct9784 小时前
WebGL开发
前端·gis·webgl
C_心欲无痕4 小时前
前端页面渲染方式:CSR、SSR、SSG
前端
果粒蹬i4 小时前
生成式 AI 质量控制:幻觉抑制与 RLHF 对齐技术详解
前端·人工智能·easyui
WordPress学习笔记5 小时前
解决Bootstrap下拉菜单一级链接无法点击的问题
前端·bootstrap·html