CSS3盒子模型

盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容部分

盒子模型分为两种:

第一种是 W3C 标准的盒子模型(标准盒模型)

第二种 IE 标准的盒子模型(怪异盒模型)

标准盒模型与怪异盒模型的表现效果的区别之处:

1、标准盒模型中 width 指的是内容区域 content 的宽度

height 指的是内容区域 content 的高度

标准盒模型下盒子的大小 = content + border + padding + margin

2、怪异盒模型中的 width 指的是内容、边框、内边距总的宽度(content + border + padding);height 指的是内容、边框、内边距总的高度
怪异盒模型下盒子的大小=width(content + border + padding) + margin
除此之外,我们还可以通过属性 box-sizing 来设置盒子模型的解析模式
可以为 box-sizing 赋两个值:

1、box-sizing: content-box:默认值,border 和 padding 不算到 width 范围内,可以理解为是 W3c 的标准模型(default)。总宽=width+padding+border+margin

2、box-sizing: border-box:border 和 padding 划归到 width 范围内,可以理解为是 IE 的怪异盒模型,总宽=width+margin

1.相邻块元素垂直外边距的合并

2.嵌套块元素垂直外边距的塌陷

相关推荐
小文刀69611 分钟前
CSS-响应式布局
前端
三小河16 分钟前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法20 分钟前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku21 分钟前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀69624 分钟前
2025-35st-w-日常开发总结
前端
我是日安26 分钟前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
小lan猫31 分钟前
React学习笔记(一)
前端·react.js
晨米酱31 分钟前
JavaScript 中"对象即函数"设计模式
前端·设计模式
拜无忧31 分钟前
【教程】Nuxt v4 入门指南与实践 (vue前端角度开发)
前端·nuxt.js
云枫晖35 分钟前
手写Promise-什么是Promise
前端·javascript