【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

相关推荐
SoaringHeart17 分钟前
Flutter组件封装:视频播放组件全局封装
前端·flutter
离&染1 小时前
vue.js2.x + elementui2.15.6实现el-select滚动条加载数据
前端·javascript·vue.js·el-select滚动加载
inferno2 小时前
HTML基础(第一部分)
前端·html
kirinlau2 小时前
pinia状态管理在vue3项目中的用法详解
前端·javascript·vue.js
OranTech2 小时前
练习05-CSS基础选择器
css
zhuà!2 小时前
腾讯地图TMap标记反显,新增标记
前端·javascript·vue.js
未知原色2 小时前
web worker使用总结(包含多个worker)
前端·javascript·react.js·架构·node.js
ttod_qzstudio2 小时前
CSS改变图片颜色方法介绍
前端·css
curdcv_po3 小时前
我接入了微信小说小程序官方阅读器
前端·微信小程序
程序员鱼皮3 小时前
什么是 RESTful API?凭什么能流行 20 多年?
前端·后端·程序员