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.嵌套块元素垂直外边距的塌陷

相关推荐
云枫晖16 小时前
Webpack系列-Loader
前端·webpack
aggression16 小时前
代码敲击乐:让你了解前端的动静结合和移动端的适配性
前端
yinuo16 小时前
深入理解与实战 Git Submodule
前端
骑自行车的码农16 小时前
React 事件收集函数
前端·react.js
一个处女座的程序猿O(∩_∩)O16 小时前
Vue CLI 插件开发完全指南:从原理到实战
前端·javascript·vue.js
小蜜蜂dry16 小时前
JavaScript 原型
前端·javascript
用户904438163246016 小时前
前端也能玩 AI?用 brain.js 在浏览器里训个 "前后端分类大师",后端同事看了都沉默!
前端
祈祷苍天赐我java之术16 小时前
什么是Nginx?:掌握高性能 Web 服务器核心技术
服务器·前端·nginx
Achieve前端实验室16 小时前
【每日一面】async/await 的原理
前端·javascript·面试
姜至16 小时前
el-calendar实现自定义展示效果
前端·vue.js