【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

相关推荐
z***396217 小时前
Plugin ‘org.springframework.bootspring-boot-maven-plugin‘ not found(已解决)
java·前端·maven
e***582317 小时前
Nginx 配置前端后端服务
运维·前端·nginx
小奶包他干奶奶17 小时前
Webpack学习——Plugin(插件)
前端·学习·webpack
张拭心17 小时前
AI 从业者需要铭记的时刻:2023年6月30日
前端·ai编程
我叫张小白。17 小时前
Vue3 Hooks:逻辑复用的解决方案
前端·javascript·vue.js·前端框架·vue
S***t71417 小时前
前端物联网开发
前端·物联网
我叫张小白。17 小时前
Vue3 Props 的使用:组件间数据传递的桥梁
前端·javascript·vue.js·vue3
r***869817 小时前
Nginx解决前端跨域问题
运维·前端·nginx
广州华水科技17 小时前
单北斗GNSS在桥梁变形监测中的关键应用与技术优势分析
前端
IT_陈寒17 小时前
Python 3.12新特性实战:10个让你效率翻倍的代码优化技巧
前端·人工智能·后端