目录引言一、盒子模型的组成1.1 内容Content1.2 内边距Padding1.3 边框Border1.4 外边距Margin二、两种盒子模型2.1 标准盒模型content-box2.2 怪异盒模型border-box三、关于margin的塌陷问题3.1 兄弟元素塌陷3.2 父子元素塌陷3.3 解决塌陷的常用方法引言CSS盒子模型是CSS中的基本概念其本质上是一个盒子封装周围的HTML元素四层结构由内向外Content内容→ Padding内边距→ Border边框→ Margin外边距一、盒子模型的组成1.1 内容Content这是盒子模型的核心用来展示文字、图片、子元素等内容关键属性width、height1.2 内边距Padding这是内容与边框之间的空白区域避免内容紧贴边框简写规则顺时针padding上 右 下 左1.3 边框Border这是包裹在内边距外侧的边线组成元素边框宽度、线型、颜色1.4 外边距Margin边框外侧的空白区域实现元素之间的间距、居中效果在盒子计算中不计算二、两种盒子模型CSS3新增 box-sizing属性彻底区分两种盒子计算规则2.1 标准盒模型content-box写法box-sizingcontent-box规则width/height只代表内容大小计算公式盒子宽度 width 左右padding 左右border缺点布局极难控制修改 padding、border 会直接撑大盒子导致页面布局错乱2.2 怪异盒模型border-box写法box-sizingborder-box规则width/height包含了内容 内边距 边框计算公式盒子宽度 原本内容的width 压缩后的内容width 左右padding 左右border优点修改 padding、border 不会撑大盒子只会压缩内部内容区尺寸布局稳定三、关于margin的塌陷问题margin的垂衣方向会发生合并塌陷水平方向不会3.1 兄弟元素塌陷上盒子的 margin-bottom 与 下盒子的 margin-top 相遇会取两者最大值作为最终的间距而不是 margin-bottom margin-top3.2 父子元素塌陷父元素没有边框、内边距、溢出隐藏时子元素的 margin-top 会穿透父元素作用到父元素外侧导致父元素整体下移3.3 解决塌陷的常用方法给父元素设置overflow: hidden给父元素添加 border / padding使用 flex 弹性布局