【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

相关推荐
我是伪码农37 分钟前
外卖餐具智能推荐
linux·服务器·前端
2401_885885041 小时前
营销推广短信接口集成:结合营销策略实现的API接口动态变量填充方案
前端·python
小李子呢02111 小时前
前端八股性能优化(2)---回流(重排)和重绘
前端·javascript
程序员buddha1 小时前
深入理解ES6 Promise
前端·ecmascript·es6
吴声子夜歌2 小时前
ES6——Module详解
前端·ecmascript·es6
剪刀石头布啊2 小时前
原生form发起表单干了啥
前端
剪刀石头布啊2 小时前
表单校验场景,如何实现页面滚动到报错位置
前端
gyx_这个杀手不太冷静2 小时前
大人工智能时代下前端界面全新开发模式的思考(二)
前端·架构·ai编程
GreenTea3 小时前
AI Agent 评测的下半场:从方法论到落地实践
前端·人工智能·后端
吴声子夜歌3 小时前
Vue3——Vue实例与数据绑定
前端·javascript·vue.js