【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

相关推荐
糕冷小美n20 小时前
elementuivue2表格不覆盖整个表格添加固定属性
前端·javascript·elementui
小哥不太逍遥21 小时前
Technical Report 2024
java·服务器·前端
沐墨染21 小时前
黑词分析与可疑对话挖掘组件的设计与实现
前端·elementui·数据挖掘·数据分析·vue·visual studio code
anOnion21 小时前
构建无障碍组件之Disclosure Pattern
前端·html·交互设计
threerocks21 小时前
前端将死,Agent 永生
前端·人工智能·ai编程
问道飞鱼1 天前
【前端知识】Vite用法从入门到实战
前端·vite·项目构建
爱上妖精的尾巴1 天前
8-10 WPS JSA 正则表达式:贪婪匹配
服务器·前端·javascript·正则表达式·wps·jsa
Aliex_git1 天前
浏览器 API 兼容性解决方案
前端·笔记·学习
独泪了无痕1 天前
useStorage:本地数据持久化利器
前端·vue.js
程序员林北北1 天前
【前端进阶之旅】JavaScript 一些常用的简写技巧
开发语言·前端·javascript