盒模型

最新推荐文章于 2022-02-25 10:00:00 发布

前端攻城狮·左大

最新推荐文章于 2022-02-25 10:00:00 发布

阅读量393

点赞数 2

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_46719868/article/details/116130094

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

标准盒模型

在这里插入图片描述
标准和模型的width和height代指content的宽和高并非是盒子的真实宽高
因为盒子的大小是由content，padding，border三部分组成再加上margin确定盒子在页面中的位置
其实我们常用的还是标准盒模型也就是box-sizing中的content-box 指的是 width和height是content的宽高并不是盒子的宽高
So我们在给盒子加border或是padding的时候盒子会被撑大要想保持盒子原本的大小还得去重新计算content的width height 非常麻烦
后来CS3里面给我们提供了一个方式box-sizing：content-box 也就是所谓的怪异盒模型

IE怪异盒模型

在这里插入图片描述
IE怪异盒模型好处：
这里的盒子width和height指的是盒子的大小而不是内容的大小
也就是说 比如我写100100盒子最终也是100100不会被border，padding撑大，它会自己通过自动缩放自己的content来实现盒子还是100*100 这样在写样式的时候就比较干净卫生了，不需要每次都来计算width和height
So在大部分项目中都在应用这种box-sizing：content-box IE怪异盒模型
包括我看了Bootstrap以及各大ui组件element-ui 它们的公共样式里面源码大部分也是用的box-sizing：content-box 建议大家习惯性使用

现在在做移动端响应式开发的时候，其实好多布局方案我们可以应用于CS3新提供的 flex弹性伸缩盒模型来实现（膜拜阮一峰大大）

flex弹性伸缩盒模型

在这里插入图片描述
给父容器设置一个display：flex 这个盒子就会变成一个弹性伸缩盒子
盒子里面有两个轴一个是main axis（主轴，X轴），一个是cross axis（交叉轴，Y轴），盒子中的所有子元素都叫flex item（某一项）默认都是靠左上排列
可以通过设置justify-content主轴的排列方式和align-items交叉轴的排列方式来控制flex item