【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

相关推荐
辻戋6 分钟前
从零开始手写mini-webpack
前端·webpack·node.js
cch89188 分钟前
PHP vs 易语言:Web开发与桌面编程大对决
开发语言·前端·php
百撕可乐11 分钟前
NextJS官网实战02:项目的基础骨架搭建
前端·javascript·react.js
陈天伟教授16 分钟前
人工智能应用- 人工智能风险与伦理:01.数据安全
前端·人工智能·安全·xss·csrf
用户693717500138424 分钟前
Android 17 完整更新详解:Beta 3 已达平台稳定,这些新功能值得期待
android·前端·android studio
fengci.37 分钟前
Polar春季个人挑战赛WEB简单部分
android·前端
张元清1 小时前
不用 WebSocket 库,在 React 中构建实时功能
前端·javascript·面试
李白你好1 小时前
浏览器插件 | 信息收集、统一指纹识别 、DOM XSS 检测 、漏洞报告生成与管理
前端·xss
渔民小镇1 小时前
不用前端也能测试 —— 模拟客户端请求模块详解
java·服务器·前端·分布式·游戏
SuperEugene1 小时前
Python + venv + VSCode:前端工程师 AI 转型入门 | 基础篇
前端·人工智能·vscode·python