【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

相关推荐
syty20201 分钟前
RedisTemplate方法汇总
前端·bootstrap·html
懒大王、3 分钟前
Vue dcm文件预览
前端·javascript·vue.js·dcm·cornerstone.js
C_心欲无痕7 分钟前
Docker 本地部署 SSR 前端项目实战指南
前端·docker·容器
梵得儿SHI17 分钟前
Vue 高级特性:组件高级用法(动态组件、异步组件、组件缓存 keep-alive)
前端·javascript·vue.js·keep-alive·异步组件·动态组件·vue组件高级特性
EndingCoder18 分钟前
泛型类和高级用法
linux·运维·前端·ubuntu·typescript
ℋᙚᵐⁱᒻᵉ鲸落24 分钟前
【Vue3】Element Plus 表单显示自定义校验错误
前端·javascript·vue.js
程序员小寒25 分钟前
聊一聊 CommonJS 和 ES6 Module
前端·ecmascript·es6
Java后端的Ai之路26 分钟前
【AI应用开发工程师】-Gemini写前端的一个坑
前端·人工智能·gemini·ai应用开发工程师
亿元程序员26 分钟前
最近很火的一个拼图游戏,老板让我用Cocos3.8做一个...
前端
m0_7482500327 分钟前
C++ Web 编程
开发语言·前端·c++